API, .factory, .controller error
Question
I try to fetch data from a json file . This is the JS code:
var app = angular.module('ForecastApp', []);
console.log('in app');
//fetches weather data from service
var res ="";
app.factory('forecast', ['$http', function($http) {
$http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json')
.success(function(data) { console.log(data); res = data; })
.error(function(err) { console.log(err); res = err;});
return res;
}]);
//Save weather data into $scope.fiveDay
app.controller('MainController', ['$scope', 'forecast', function($scope, forecast) {
$scope.fiveDay = res;
console.log('in controller');
}]);
Then i run in the main HTML file:
<body ng-app="ForecastApp">
<div class="main" ng-controller="MainController">
...
<h1>{{ fiveDay.city_name }}</h1>
...
fiveDay.city_name doesn't return anything, it just shows blank. fiveDay should have the value of res , which is an object, right? I don't understand why fiveDay.city_name isn't New York.
2 answers
solution1
2 ACCPTED 2015-11-21 11:05:18
I have provided a simple Solution, just using $http Service in the controller
var app = angular.module('ForecastApp', []); console.log('in app'); //Save weather data into $scope.fiveDay app.controller('MainController', ['$scope', '$http', function($scope, $http) { $http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json') .success(function(data) { console.log(data); $scope.fiveDay = data; }) .error(function(err) { console.log(err);}); console.log('in controller'); }]);
<html> <head> <script data-require="angular.js@1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body ng-app="ForecastApp"> <div class="main" ng-controller="MainController"> ... <h1>{{ fiveDay.city_name }}</h1> </div> </body> </html>
see plunker here demo
solution2
1 2015-11-21 12:23:22
If you still want to use a custom service this is a way to do it.
app.factory('forecastService', ['$http', function($http) {
return $http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json');
}]);
app.controller('MainController', ['$scope', 'forecastService', function($scope, forecastService) {
forecastService.then(function(success) { $scope.fiveDay = success.data});
}]);
Your service here returns a promise where you can use the .then method on. This way the controller don't need to know any thing about the URL.
You don't want any global variables hanging around in your scripts when using angular. This is exactly why angular services / factories. They provide a way to share data between multiple controllers and other services.
Here is a plunker showing the action .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.