Loading ng-view html templates

43 Views Asked by At

I have one index.html page and I am using ng-view. The two HTML templates are page1 and page2.

I have a button to which I have attached an ng-click function. When the function is fired, I am fetching weather data using $resource and also using the weather url inside amcharts dataloader to make a graph from weather information.

Now, if I do not separate the templates and keep everything on one page, everything works fine. But when I separate them and take the input from the index.html page, nothing works. I guess because when page1 and page2 are loaded, the information fetched by the function is lost.

Is there an elegant way to do this? Ideally I want my index.html to take input from the user. Like, "enter city" and I want that when I load /page1 there should be the weather data and on page2, the weather chart, without again asking for input from the user.

Right now I am taking the input in page1 but ideally I would like it to be in main index.html.

I am sure that the code is correct and I am correctly using routing and this is more of an error that has to do with the logic and priority of execution.

I am still quite new to angularjs. So please :)

JavaScript

$app.config(function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'page1.html',
            controller: 'weatherController'
        })
        .when('/graph', {
            templateUrl: 'page2.html',
            controller: 'weatherController'
        })
        .otherwise({
            redirectTo: '/'
        })
});

app.controller('weatherController', ['$scope', '$resource', '$routeParams', function($scope, $resource, $routeParams) {
    $scope.GetWeatherInfo = function() {
        // getting weather data for page1.html
        // getting chart data for page2.html
        ...
    }
}]);

HTML (Page1.html)

<div ng-controller="weatherController">

<input type="text" name="city" id="city" class="form-control" placeholder="Stadt" ng-model="city_name" /> 
<button id="submitWeather" class="btn btn-primary" ng-click="GetWeatherInfo()"> zum Wetter </button>

Temperature:        Min: {{w.main.temp_min}} 
                    Max: {{w.main.temp_max}}    

HTML (Page2.html)

<div ng-controller="weatherController">
<div id="chartdiv"></div>
0

There are 0 best solutions below