Introduction to AngularJS tutorial (ii) : AngularJS template

2020-03-30 04:31:53
OfStack

It's time to add some dynamic features to these pages - use AngularJS! We've added a test here for the controller we're going to add later.

There are many different code architectures for an application. For AngularJS applications, we encourage the use of the model-view-controller (MVC) pattern to decouple code and separate concerns. With this in mind, we use AngularJS to add some models, views, and controllers to our application.

Please reset the working directory:



git checkout -f step-2

Our app now has a list of three phones.

The most important differences between steps 1 and 2 are listed below. You can see the full difference on GitHub.

Views and templates

In AngularJS, a view is a map of the model rendered by an HTML** template **. This means that whenever the model changes, AngularJS updates the junction in real time, and with it the view.

For example, the view component is built by AngularJS using the following template:



<html ng-app>

<head>

  ...

  <script src="lib/angular/angular.js"></script>

  <script src="js/controllers.js"></script>

</head>

<body ng-controller="PhoneListCtrl">
  <ul>

    <li ng-repeat="phone in phones">

      {{phone.name}}

    <p>{{phone.snippet}}</p>

    </li>

  </ul>

</body>

</html>

We just replaced the statically encoded list of phones, because here we use the ngRepeat directive and two AngularJS expressions wrapped in curly braces -- {{phone.name}} and {{phone.snippet}} -- to achieve the same effect.

1. In < Li> The ng-repeat="phone in phones" statement in the tag is an AngularJS iterator. This iterator tells AngularJS to use the first < Li> The tag ACTS as a template to create one for each phone in the list. Li> Elements.

2. As we learned in step 0, the curly braces surrounding phone.name and phone.snippet identify the data binding. Unlike constant calculations, the expression here is actually a data model reference that we applied, which we set up in the PhoneListCtrl controller.

Model and controller

Initialize the data model in the PhoneListCtrl controller (this is just a function that contains an array of objects stored in the phone's data list) :

App/js/controller. Js:



function PhoneListCtrl($scope) {

  $scope.phones = [

    {"name": "Nexus S",

     "snippet": "Fast just got faster with Nexus S."},

    {"name": "Motorola XOOM™ with Wi-Fi",

     "snippet": "The Next, Next Generation tablet."},

    {"name": "MOTOROLA XOOM™",

     "snippet": "The Next, Next Generation tablet."}

  ];

}

Although the controller doesn't seem to be doing much of the controlling, it's playing a crucial role here. Given the context of our data model, the controller allows us to establish the data binding between the model and the view. Here's how we link the presentation layer, data, and logical components:

1.PhoneListCtrl -- the name of the controller method (in the JS file controllers. JS) and < Body> The value of the ngController directive in the tag matches.

2. The data of the phone is now associated with the scope ($scope) injected into our controller function. When the application starts, a root scope is created, and the scope of the controller is a typical successor to the root scope. The scope of this controller is on all. Body ng - controller = "PhoneListCtrl >" The data binding inside the tag is valid.

AngularJS's scope theory is important: a scope can be thought of as a glue between the template, the model, and the controller. AngularJS USES scope, along with the information in the template, the data model, and the controller. These can help separate the model from the view, but they are really synchronized! Any changes to the model are immediately reflected in the view; Any changes to the view are immediately reflected in the model.

Want to further understand the scope of AngularJS, see (link: http://docs.angularjs.org/api/ng.%24rootScope.Scope).

test

The "AngularJS approach" makes it easy to test code at development time. Let's take a look at this new unit test for the controller:

The test/unit/controllersSpec. Js:



describe('PhoneCat controllers', function() {
  describe('PhoneListCtrl', function(){
    it('should create "phones" model with 3 phones', function() {

      var scope = {},

      ctrl = new PhoneListCtrl(scope);
      expect(scope.phones.length).toBe(3);

    });

  });

});

This test verifies that we have three records in our cell phone array (no need to understand this test script for now). This example shows how easy it is to create a unit test for AngularJS code. Because testing is an essential part of software development, we made it easy to build tests in AngularJS to encourage developers to write more of them.

When writing tests, AngularJS developers tend to use the syntax in the Jasmine behavior-driven development (BBD) framework. Although AngularJS does not force you to use Jasmine, all of our tests in this tutorial are written using Jasmine. You can be in Jasmine (link: http://pivotal.github.com/jasmine/) or to gain knowledge (link: https://github.com/pivotal/jasmine/wiki).

Based on AngularJS projects were configured to use (link: http://code.google.com/p/js-test-driver/) to run the unit tests.

You can run the test like this:

1. On a separate terminal, enter the angular-phonecat directory and run./scripts/test-server.sh to start the test (please enter.
2. Open a new browser window and go to http://localhost:9876;
3. Select "Capture this browser in strict mode".

At this point, you can throw away your window and forget about it. JsTestDriver will run the test itself and output the results to your terminal.

4. Run./scripts/test.sh for the test.

You should see something like this:



Chrome: Runner reset.

.

Total 1 tests (Passed: 1; Fails: 0; Errors: 0) (2.00 ms)

  Chrome 19.0.1084.36 Mac OS: Run 1 tests (Passed: 1; Fails: 0; Errors 0) (2.00 ms)

Yeah! The test passed! Or not... Note: if an error occurs after you run the test, close the browser and then go back to the terminal to close the script, then redo the steps above.

practice

Add another data binding for index.html. Such as:



<p>Total number of phones: {{phones.length}}</p>

Create a new data model property and bind it to the template. Such as:



$scope.hello = "Hello, World!"

Update your browser to make sure it says "Hello, World!"

Create a simple table with an iterator:



<table>

    <tr><th>row number</th></tr>

    <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i}}</td></tr>

</table>

Now add 1 to the I of the data model expression:



<table>

    <tr><th>row number</th></tr>

    <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i+1}}</td></tr>

</table>

Make sure toBe(3) changes to toBe(4) and the unit test fails, then run it again

conclusion

You now have a dynamic application that separates model, view, and controller, and you test it all the time. Now you can go to step 3 to add full-text search to your application.