Code Editor
Web Browser
Learn
Services

Services II

Well done! The city_name now shows up in the view. How does it work?

  1. First in js/services/forecast.js, we made a new service. We used app.factory to create a new service named forecast
  2. The forecast service needs to use AngularJS's built-in $http to fetch JSON from the server. Therefore, we add $http to the forecast service as a dependency, like this:
    ['$http', function($http) { // ... }]
    Now $http is available to use inside forecast.
  3. Then, inside forecast, we use $http to construct an HTTP GET request for the weather data. If the request succeeds, the weather data is returned; otherwise the error info is returned.
  4. Next in the controller, we used the forecast service to fetch data from the server. First we added forecast into MainController as a dependency so that it's available to use. Then within the controller we used forecast to asynchronously fetch the weather data from the server and store it into $scope.fiveDay
  5. As before, any properties attached to $scope become available to use in the view. This means in index.html, we can display the city_name using an expression as done before.
Report a Bug
If you see a bug or any other issue with this page, please report it here.