Angular JS XHR and Dependency Injection

This section explains how to load the data using the HTTP service. This is done by utilizing the Angular’s $http service. 

Below is the code that replaces the hardcoded data with the one from http service 

var phonecatApp = angular.module(‘phonecatApp’, []);

phonecatApp.controller(‘PhoneListCtrl’, function($scope,$http))

{

$http.get(‘phones/phones.jsn’).success(function (data) {

$scope.phones = data; 

 });

$scope.orderProp = ‘age’; 

});

Below is how Angular system inspects the dependancies and resolves them. 

1. the injector identifies $http services as a dependancy of phoneListCtrl 

2. The injector checks whether $http has already been instantiated 

3. If not instantiated yet, it uses factory function for $http to construct it

4. The injector provides singleton instances of the $http service to the PhonelistCtrl controller. 

references:

https://docs.angularjs.org/tutorial/step_05