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>