Drag the edges to resize the window.

In Projects, you can keep track of your progress as you go throught the tasks. Check each item as you complete it!

Code Editor
Web Browser

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.