EVOLUTION-MANAGER

Edit File: step_05.html

<a href='https://github.com/angular/angular.js/edit/v1.3.x/docs/content/tutorial/step_05.ngdoc?message=docs(tutorial%2F5 - XHRs & Dependency Injection)%3A%20describe%20your%20change...' class='improve-docs btn btn-primary'>&nbsp;Improve this Doc</a>

Enough of building an app with three phones in a hard-coded dataset! Let&#39;s fetch a larger dataset
from our server using one of Angular&#39;s built-in <a href="guide/services">services</a> called <a href="api/ng/service/$http">$http</a>. We will use Angular&#39;s <a href="guide/di">dependency
injection (DI)</a> to provide the service to the <code>PhoneListCtrl</code> controller.
<ul>
<li>There is now a list of 20 phones, loaded from the server.</li>
</ul>
<div doc-tutorial-reset="5"></div>

<h2 id="data">Data</h2>
The <code>app/phones/phones.json</code> file in your project is a dataset that contains a larger list of phones
stored in the JSON format.
Following is a sample of the file:
<pre><code class="lang-js">[
 {
 &quot;age&quot;: 13,
 &quot;id&quot;: &quot;motorola-defy-with-motoblur&quot;,
 &quot;name&quot;: &quot;Motorola DEFY\u2122 with MOTOBLUR\u2122&quot;,
 &quot;snippet&quot;: &quot;Are you ready for everything life throws your way?&quot;
 ...
 },
...
]
</code></pre>
<h2 id="controller">Controller</h2>
We&#39;ll use Angular&#39;s <a href="api/ng/service/$http">$http</a> service in our controller to make an HTTP
request to your web server to fetch the data in the <code>app/phones/phones.json</code> file. <code>$http</code> is just
one of several built-in <a href="guide/services">Angular services</a> that handle common operations
in web apps. Angular injects these services for you where you need them.
Services are managed by Angular&#39;s <a href="guide/di">DI subsystem</a>. Dependency injection
helps to make your web apps both well-structured (e.g., separate components for presentation, data,
and control) and loosely coupled (dependencies between components are not resolved by the
components themselves, but by the DI subsystem).
<code>app/js/controllers.js:</code>
<pre><code class="lang-js">var phonecatApp = angular.module(&#39;phonecatApp&#39;, []);

phonecatApp.controller(&#39;PhoneListCtrl&#39;, function ($scope, $http) {
  $http.get(&#39;phones/phones.json&#39;).success(function(data) {
    $scope.phones = data;
  });

$scope.orderProp = &#39;age&#39;;
});
</code></pre>
<code>$http</code> makes an HTTP GET request to our web server, asking for <code>phones/phones.json</code> (the url is
relative to our <code>index.html</code> file). The server responds by providing the data in the json file.
(The response might just as well have been dynamically generated by a backend server. To the
browser and our app they both look the same. For the sake of simplicity we used a json file in this
tutorial.)
The <code>$http</code> service returns a <a href="api/ng/service/$q">promise object</a> with a <code>success</code>
method. We call this method to handle the asynchronous response and assign the phone data to the
scope controlled by this controller, as a model called <code>phones</code>. Notice that Angular detected the
json response and parsed it for us!
To use a service in Angular, you simply declare the names of the dependencies you need as arguments
to the controller&#39;s constructor function, as follows:
<pre><code>phonecatApp.controller(&#39;PhoneListCtrl&#39;, function ($scope, $http) {...}
</code></pre>
Angular&#39;s dependency injector provides services to your controller when the controller is being
constructed. The dependency injector also takes care of creating any transitive dependencies the
service may have (services often depend upon other services).
Note that the names of arguments are significant, because the injector uses these to look up the
dependencies.
<img class="diagram" src="img/tutorial/tutorial_05.png">
<h3 id="-prefix-naming-convention"><code>$</code> Prefix Naming Convention</h3>
You can create your own services, and in fact we will do exactly that in step 11. As a naming
convention, Angular&#39;s built-in services, Scope methods and a few other Angular APIs have a <code>$</code>
prefix in front of the name.
The <code>$</code> prefix is there to namespace Angular-provided services.
To prevent collisions it&#39;s best to avoid naming your services and models anything that begins with a <code>$</code>.
If you inspect a Scope, you may also notice some properties that begin with <code>$$</code>. These
properties are considered private, and should not be accessed or modified.
<h3 id="a-note-on-minification">A Note on Minification</h3>
Since Angular infers the controller&#39;s dependencies from the names of arguments to the controller&#39;s
constructor function, if you were to <a href="http://goo.gl/SAnnsm">minify</a> the JavaScript code for
<code>PhoneListCtrl</code> controller, all of its function arguments would be minified as well, and the
dependency injector would not be able to identify services correctly.
We can overcome this problem by annotating the function with the names of the dependencies, provided
as strings, which will not get minified. There are two ways to provide these injection annotations:
<ul>
<li>Create a <code>$inject</code> property on the controller function which holds an array of strings.
Each string in the array is the name of the service to inject for the corresponding parameter.
In our example we would write:
<pre><code class="lang-js">function PhoneListCtrl($scope, $http) {...}
PhoneListCtrl.$inject = [&#39;$scope&#39;, &#39;$http&#39;];
phonecatApp.controller(&#39;PhoneListCtrl&#39;, PhoneListCtrl);
</code></pre>
</li>
<li>Use an inline annotation where, instead of just providing the function, you provide an array.
This array contains a list of the service names, followed by the function itself.
<pre><code class="lang-js">function PhoneListCtrl($scope, $http) {...}
phonecatApp.controller(&#39;PhoneListCtrl&#39;, [&#39;$scope&#39;, &#39;$http&#39;, PhoneListCtrl]);
</code></pre>
</li>
</ul>
Both of these methods work with any function that can be injected by Angular, so it&#39;s up to your
project&#39;s style guide to decide which one you use.
When using the second method, it is common to provide the constructor function inline as an
anonymous function when registering the controller:
<pre><code class="lang-js">phonecatApp.controller(&#39;PhoneListCtrl&#39;, [&#39;$scope&#39;, &#39;$http&#39;, function($scope, $http) {...}]);
</code></pre>
From this point onward, we&#39;re going to use the inline method in the tutorial. With that in mind,
let&#39;s add the annotations to our <code>PhoneListCtrl</code>:
<code>app/js/controllers.js:</code>
<pre><code class="lang-js">var phonecatApp = angular.module(&#39;phonecatApp&#39;, []);

phonecatApp.controller(&#39;PhoneListCtrl&#39;, [&#39;$scope&#39;, &#39;$http&#39;,
  function ($scope, $http) {
    $http.get(&#39;phones/phones.json&#39;).success(function(data) {
      $scope.phones = data;
    });

$scope.orderProp = &#39;age&#39;;
 }]);
</code></pre>
<h2 id="test">Test</h2>
<code>test/unit/controllersSpec.js</code>:
Because we started using dependency injection and our controller has dependencies, constructing the
controller in our tests is a bit more complicated. We could use the <code>new</code> operator and provide the
constructor with some kind of fake <code>$http</code> implementation. However, Angular provides a mock <code>$http</code>
service that we can use in unit tests. We configure &quot;fake&quot; responses to server requests by calling
methods on a service called <code>$httpBackend</code>:
<pre><code class="lang-js">describe(&#39;PhoneCat controllers&#39;, function() {

describe(&#39;PhoneListCtrl&#39;, function(){
  var scope, ctrl, $httpBackend;

// Load our app module definition before each test.
  beforeEach(module(&#39;phonecatApp&#39;));

// The injector ignores leading and trailing underscores here (i.e. _$httpBackend_).
  // This allows us to inject a service but then attach it to a variable
  // with the same name as the service in order to avoid a name conflict.
  beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) {
    $httpBackend = _$httpBackend_;
    $httpBackend.expectGET(&#39;phones/phones.json&#39;).
        respond([{name: &#39;Nexus S&#39;}, {name: &#39;Motorola DROID&#39;}]);

scope = $rootScope.$new();
 ctrl = $controller(&#39;PhoneListCtrl&#39;, {$scope: scope});
 }));
</code></pre>
Note: Because we loaded Jasmine and <code>angular-mocks.js</code> in our test environment, we got two helper
methods <a href="api/ngMock/function/angular.mock.module">module</a> and <a href="api/ngMock/function/angular.mock.inject">inject</a> that we&#39;ll
use to access and configure the injector.
We created the controller in the test environment, as follows:
<ul>
<li>We used the <code>inject</code> helper method to inject instances of
<a href="api/ng/service/$rootScope">$rootScope</a>,
<a href="api/ng/service/$controller">$controller</a> and
<a href="api/ng/service/$httpBackend">$httpBackend</a> services into the Jasmine&#39;s <code>beforeEach</code>
function. These instances come from an injector which is recreated from scratch for every single
test. This guarantees that each test starts from a well known starting point and each test is
isolated from the work done in other tests.
</li>
<li>We created a new scope for our controller by calling <code>$rootScope.$new()</code>
</li>
<li>We called the injected <code>$controller</code> function passing the name of the <code>PhoneListCtrl</code> controller
and the created scope as parameters.
</li>
</ul>
Because our code now uses the <code>$http</code> service to fetch the phone list data in our controller, before
we create the <code>PhoneListCtrl</code> child scope, we need to tell the testing harness to expect an
incoming request from the controller. To do this we:
<ul>
<li>Request <code>$httpBackend</code> service to be injected into our <code>beforeEach</code> function. This is a mock
version of the service that in a production environment facilitates all XHR and JSONP requests.
The mock version of this service allows you to write tests without having to deal with
native APIs and the global state associated with them — both of which make testing a nightmare.
</li>
<li>Use the <code>$httpBackend.expectGET</code> method to train the <code>$httpBackend</code> service to expect an incoming
HTTP request and tell it what to respond with. Note that the responses are not returned until we call
the <code>$httpBackend.flush</code> method.
</li>
</ul>
Now we will make assertions to verify that the <code>phones</code> model doesn&#39;t exist on <code>scope</code> before
the response is received:
<pre><code class="lang-js">it(&#39;should create &quot;phones&quot; model with 2 phones fetched from xhr&#39;, function() {
 expect(scope.phones).toBeUndefined();
 $httpBackend.flush();

expect(scope.phones).toEqual([{name: &#39;Nexus S&#39;},
 {name: &#39;Motorola DROID&#39;}]);
});
</code></pre>
<ul>
<li>We flush the request queue in the browser by calling <code>$httpBackend.flush()</code>. This causes the
promise returned by the <code>$http</code> service to be resolved with the trained response. See 
&#39;Flushing HTTP requests&#39; in the <a href="api/ngMock/service/$httpBackend">mock $httpBackend</a> documentation for 
a full explanation of why this is necessary.
</li>
<li>We make the assertions, verifying that the phone model now exists on the scope.
</li>
</ul>
Finally, we verify that the default value of <code>orderProp</code> is set correctly:
<pre><code class="lang-js">it(&#39;should set the default value of orderProp model&#39;, function() {
 expect(scope.orderProp).toBe(&#39;age&#39;);
});
</code></pre>
You should now see the following output in the Karma tab:
<pre>Chrome 22.0: Executed 2 of 2 SUCCESS (0.028 secs / 0.007 secs)</pre>

<h1 id="experiments">Experiments</h1>
<ul>
<li>At the bottom of <code>index.html</code>, add a <code>&lt;pre&gt;{{phones | filter:query | orderBy:orderProp | json}}&lt;/pre&gt;</code> 
binding to see the list of phones displayed in json format. 
</li>
<li>In the <code>PhoneListCtrl</code> controller, pre-process the http response by limiting the number of phones
to the first 5 in the list. Use the following code in the <code>$http</code> callback:
<pre><code>$scope.phones = data.splice(0, 5);
</code></pre>
</li>
</ul>
<h1 id="summary">Summary</h1>
Now that you have learned how easy it is to use Angular services (thanks to Angular&#39;s dependency
injection), go to <a href="tutorial/step_06">step 6</a>, where you will add some
thumbnail images of phones and some links.
<ul doc-tutorial-nav="5"></ul>