More templates for Angularjs introductory tutorials _angularjs

In this step, you will implement the mobile Details view, which will be displayed when the user clicks on a mobile phone in the mobile phone list.

Please reset the working directory:

Git checkout-f step-8

Now when you click on a cell phone in the list, the details page of the phone is displayed.

In order to achieve the mobile phone details view We will use $http to get the data, and we also want to add a phone-detail.html view template.

The most important differences between steps 7 and 8 are listed below. You can see the whole difference in the GitHub.

Data

In addition to the phones.json,app/phones/directory also contains a JSON file for each cell phone information.

App/phones/nexus-s.json (Sample Fragment)

{
 "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"
 }
}

Each of these files uses the same data structure to describe the different properties of a mobile phone. We will display this data in the phone details view.

Controller

We use the $http service to get the data to expand our Phonelistctrl. It works the same way as the previous phone list controller.

App/js/controllers.js

function Phonedetailctrl ($scope, $routeParams, $http) {
 $http. Get (' phones/' + $routeParams. Phoneid + '. Json '). Success (function (data) {
  $scope. phone = data;
 });

Phonedetailctrl $inject = [' $scope ', ' $routeParams ', ' $http '];

In order to construct the URL of the HTTP request, we need to extract the $routeparams.phoneid from the current route provided by the $route service.

Template

The TBD placeholder line in the phone-detail.html file has been replaced by the list and the bindings that make up the details of the phone. Note that here we use the Angularjs {{expression}}} tags and ngrepeat to render the data model in the view.

App/partials/phone-detail.html

Test

Let's write a new unit test that looks like the one we wrote for Phonelistctrl in step 5.

Test/unit/controllersspec.js

...
 Describe (' Phonedetailctrl ', function () {
  var scope, $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 '});
  }
); ...

Execute the./scripts/test.sh script to perform the test, you should see the following output:

Chrome:runner Reset.
...
Total 3 Tests (passed:3; fails:0; errors:0) (5.00 ms)
 Chrome 19.0.1084.36 Mac os:run 3 Tests (passed:3; fails:0; Errors 0) (5.00 ms)

We also add an end-to-end test that points to the Nexus S phone Details page and verifies that the page's head is "Nexus S".

Test/e2e/scenarios.js

...
 Describe (' Phone detail View ', function () {

  Beforeeach (function () {
   browser (). NavigateTo (). /.. /app/index.html#/phones/nexus-s ');


  It (' should display nexus-s page ', function () {
   Expect (binding (' Phone.name ')). Tobe (' Nexus S ');
  });
 };
...

You can now refresh your browser and run the End-to-end test again, or you can run it on a ANGULARJS server.

Practice

Use the Angularjs end-to-end test API to write a test that validates the four thumbnails we display on the Nexus S detail page.

Summarize

Now that the phone detail page is ready, we'll learn how to write a display filter in step 9.

The above is the collation of Angularjs more template information, follow-up continue to supplement the relevant information, thank you for your support of this site!