(public).sospep.systems ~ view step ~ step-005-xhr-dependancy-injection

<h1 style="text-align: center;">step-005 - xhr's &amp; dependancy injection</h1>
&nbsp;
<ol>
<li>[00:00] NEW step IN</li>
<ol>
<li>x] git checkout -f step-5 - resets app code for this example</li>
<li>*] index page now displays ...</li>
</ol>
<li>[00:00] NEW step IN</li>
<ol>
<li>*] Enough of building an app with three phones in a hard-coded dataset!</li>
<li>] Let's fetch a larger dataset from our server using one of Angular's built-in <a href="https://docs.angularjs.org/guide/services" target="_blank">services</a> called <a href="https://docs.angularjs.org/api/ng/service/$http" target="_blank">$http</a>.</li>
<li>] We will use Angular's <a href="https://docs.angularjs.org/guide/di" target="_blank">dependency injection (DI)</a> to provide the service to the <code>PhoneListCtrl</code>controller.</li>
<ol>
<li>] There is now a list of 20 phones, loaded from the server.</li>
</ol></ol></ol>
&nbsp;
<h1 style="text-align: center;">need to know</h1>
&nbsp;
<ol>
<li>] Data</li>
<ol>
<li>]&nbsp;a larger list of phones, json file format&nbsp;</li>
<li>] properties = age, id, name, snippet</li>
</ol>
<li>] Controller</li>
<ol>
<li>] We'll use Angular's <a href="https://docs.angularjs.org/api/ng/service/$http" target="_blank">$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="https://docs.angularjs.org/guide/services" target="_blank">Angular services</a> that handle common operations in web apps. Angular injects these services for you where you need them.</li>
<li>] Services are managed by Angular's <a href="https://docs.angularjs.org/guide/di" target="_blank">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).</li>
<li>] $http.get('phones/phones.json').success(function(data){ $scope.phones = data;});</li>
<ol>
<li>*] this service look exactly like a jq get request </li>
</ol>
<li>] The <code>$http</code> service returns a <a href="https://docs.angularjs.org/api/ng/service/$q" target="_blank">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!</li>
<li>] To use a service in Angular, you simply declare the names of the dependencies you need as arguments to the controller's constructor function, as follows:</li>
<ol>
<li>] phonecatApp.controller('PhoneListCtrl',function($scope, $http){...}</li>
</ol>
<li>] Angular'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</li>
<li>] illustration - how it works </li>
</ol>
<li>] $ Prefix naming convention</li>
<ol>
<li>] You can create your own services, and in fact we will do exactly that in step 11. As a naming convention, Angular'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'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.</li>
</ol>
<li>] note ON minification</li>
<ol>
<li>] Since Angular infers the controller's dependencies from the names of arguments to the controller's constructor function, if you were to <a href="http://goo.gl/SAnnsm" target="_blank">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: </li>
<li>] we can overrcome this problem by ...</li>
<ol>
<li>] see <a href="https://docs.angularjs.org/tutorial/step_05" target="_blank">https://docs.angularjs.org/tutorial/step_05</a>&nbsp;</li>
</ol></ol>
<li>] Test</li>
<ol>
<li>] 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 "fake" responses to server requests by calling methods on a service called <code>$httpBackend</code>:</li>
</ol>
<li>] Experiments</li>
<ol>
<li>x] 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.&nbsp;</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:</li>
<ol>
<li>] $scope.phones = data.splice(0,5);</li>
<li>*]&nbsp;save EX files index-ex-step-005, controller-ex-step-005,&nbsp;</li>
<li>*] next update doesnt affect files that i added to&nbsp;working directory</li>
</ol></ol>
<li>] Summary</li>
<ol>
<li>] how easy it is to use Angular services (thanks to Angular's dependency injection), go to <a href="https://docs.angularjs.org/tutorial/step_06" target="_blank">step 6</a>, where you will add some thumbnail images of phones and some links.</li>
</ol></ol>

~ view step ~ Procedure] angular-tutorial FROM [ App] framework-angular IN [ servers] technology-developer-www