Angularjs Learning---More templates (more templating) Step 8

1. Switch Branches

[Email protected]:~/develop/angular-phonecat$ git checkout step-8  #切换分支 [email protected]-pc:~/ develop/angular-phonecat$ NPM Start #启动项目

2. Requirements:

Display the details of the phone in step 7, plus a variety of parameter configurations, pictures and more.

3. Effect:

It's obviously more detailed than the information in step 7, and it works much better. How did it come true?

3. Implementation code:

First, all the images that need to be shown are in the App/img/phones directory.

Second, all mobile phone parameters are configured in the App/phones directory, are stored in the Phones.json file.

Example:

Data:

: (Take one of these phones for example) app/phones/nexus-s.json

{"Additionalfeatures": "Contour Display, near Field Communications (NFC),...", "Android": {"OS": "Android 2.3", "UI": " Android "},..." Images ": [" Img/phones/nexus-s.0.jpg "," img/phones/nexus-s.1.jpg "," img/phones/nexus-s.2.jpg "," img/ Phones/nexus-s.3.jpg "]," storage ": {" flash ":" 16384MB "," Ram ":" 512MB "}}

Controller (Controllers):

App/js/controllers.js:

varPhonecatcontrollers = Angular.module (' phonecatcontrollers '), []);p Honecatcontrollers.controller (' Phonelistctrl ', [' $scope ', ' $http ',  function($scope, $http) {$http. Get (' Phones/phones.json '). Success (function(data) {$scope. Phones=data;    }); $scope. Orderprop= ' Age '; }]);p Honecatcontrollers.controller (' Phonedetailctrl ', [' $scope ', ' $routeParams ', ' $http ',  function($scope, $routeParams, $http) { $http. Get ( ' phones/' + $routeParams. Phoneid + '. JSON '). Success (function  (data) {  $scope. Phone     = data;  }); }]);

Here is the reading of the control data and the display of the page.

app/partials/phone-detail.html:

[Email protected]:~/develop/angular-phonecat/app$ cat partials/phone-detail.html  <li ng-repeat= "img In Phone.images ">      </li></ul><ul class=" Specs ">  <li>    <span>availability and networks</span>    <dl>      <dt>availability </dt>      <dd ng-repeat= "availability in Phone.availability" >{{availability}}</dd>    </dl >  </li> ... .....</ul>

The main focus here is that when displaying data, the traversal and display of the image URL in the template is<ling-repeat="img in phone.images">ng-src="{{img}}"></li>

If you want to show a picture in the specified array, you can indicate subscript in phone.images[i],i, starting with 0.

4. Testing (TEST)Test/unit/controllersspec.js:

Beforeeach (module (' Phonecatapp ')); ... describe (' Phonedetailctrl ',function(){    varscope, $httpBackend, CTRL; Beforeeach (Inject (function(_$httpbackend_, $rootScope, $routeParams, $controller) {$httpBackend=_$httpbackend_; $httpBackend. Expectget (' Phones/xyz.json '). Respond ({name: ' Phone xyz ')}); $routeParams. Phoneid= ' xyz '; Scope= $rootScope. $New(); CTRL= $controller (' Phonedetailctrl ', {$scope: scope});    })); It (' Should fetch phone detail ',function() {expect (Scope.phone). tobeundefined ();      $httpBackend. Flush (); Expect (Scope.phone). Toequal ({name:' Phone xyz '});  }); });...

To start the test:

[Email protected]:~/develop/angular-in8.325  seconds58 0 Failures