Home > Developer > JavaScript
AngularJS getting started tutorial (2): AngularJS template, angularjs getting started tutorial
It's time to give these webpages some dynamic features-use AngularJS! Here we have added a test for the Controller to be added later.
There are many types of code architectures for an application. For AngularJS applications, we encourage you to use the Model-View-controller (MVC) mode to decouple code and separate concerns. With this in mind, AngularJS is used to add models, views, and controllers for our applications.
Reset the working directory:
Copy codeThe Code is as follows:
Git checkout-f step-2
Our application now has a list of three mobile phones.
The most important differences between steps 1 and 2 are listed below. You can go to GitHub to see the complete difference.
Views and templates
In AngularJS, a view is the ing after the model is rendered using the HTML ** template. This means that, no matter when the model changes, AngularJS will update the combination point in real time and update the view accordingly.
For example, the view component is constructed by AngularJS using the following template:
Copy codeThe Code is as follows:
<Html ng-app>
<Head>
...
<Script src = "lib/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 static-encoded mobile phone list, because here we use the ngRepeat command and two AngularJS expressions wrapped in curly brackets -- {phone. name }}and {phone. snippet} -- achieve the same effect.
1. the ng-repeat = "phone in phones" statement in the <li> label is an AngularJS iterator. This iterator tells AngularJS to use the first <li> tag as the template to create a <li> element for each mobile phone in the list.
2. As we learned in step 1, curly braces wrapped around phone. name and phone. snippet indicate data binding. Unlike constant computation, the expression here is actually a data model reference of our application, which we have set in the PhoneListCtrl controller.
Model and Controller
Initialize the data model in the PhoneListCtrl controller (here it is just a function that contains an array, and the object stored in the array is the mobile phone data list ):
App/js/controller. js:
Copy codeThe Code is as follows:
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 does not seem to play any role in control, it plays a crucial role here. Given the context of our data model, the Controller allows us to establish data binding between the model and the view. We associate the presentation layer, data, and logical components in this way:
1. PhoneListCtrl -- the Controller method name (in the Javascript file controllers. JS) matches the value of the ngController command in the <body> label.
2. The data on the mobile phone is now associated with the scope injected into our controller function ($ scope. After the application is started, a root scope is created, and the scope of the controller is a typical successor of the root scope. The scope of this controller is valid for all <body ng-controller = "PhoneListCtrl"> internal data bindings marked.
AngularJS's scope theory is very important: a scope can be regarded as a binder for the template, model, and controller to work collaboratively. AngularJS uses the scope, as well as information in the template, data model and controller. These can help separate models and views, but they are indeed synchronized! Any changes to the model are immediately reflected in the view. Any changes to the view are immediately reflected in the model.
For more information about AngularJS scopes, see AngularJS scopes.
Test
"AngularJS" makes code testing very simple in the development age. Let's take a look at the new unit test for the Controller:
Test/unit/controllersSpec. js:
Copy codeThe Code is as follows:
Describe ('python' controllers', function (){
Describe ('pythonelistctrl ', function (){
It ('could create "phones" model with 3 phones ', function (){
Var scope = {},
Ctrl = new PhoneListCtrl (scope );
CT (scope. phones. length). toBe (3 );
});
});
});
This test verifies that our cell phone array contains three records (this test script is not needed for the moment ). This example shows how easy it is to create a unit test for AngularJS code. Because testing is essential in software development, we allow AngularJS to easily build tests to encourage developers to write more about them.
During write testing, 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 tests in the tutorial are written in Jasmine. You can obtain relevant knowledge on the official Jasmine homepage or Jasmine Wiki.
AngularJS-based projects are pre-configured to run unit tests using JsTestDriver.
You can run the test as follows:
1. on a separate terminal, go to the angular-phonecat directory and run the command. /scripts/test-server.sh to start the test (for Windows command line, enter. \ scripts \ test-server.bat to run the script, followed by the script command run in a similar way );
2. Open a new browser window and go to http: // localhost: 9876;
3. Select "Capture this browser in strict mode ".
At this time, you can leave your window alone and forget it. JsTestDriver runs the test and outputs the result on your terminal.
4. Run./scripts/test. sh to perform the test.
You should see a result similar to the following:
Copy codeThe Code is as follows:
Chrome: Runner reset.
.
Total 1 tests (Passed: 1; Fails: 0; Errors: 0) (2.00 MS)
Chrome 19.0.20.4.36 Mac OS: Run 1 tests (Passed: 1; Fails: 0; Errors 0) (2.00 MS)
Yeah! Test passed! Or no... note: if an error occurs after you run the test, close the browser, return to the terminal, close the script, and then repeat the above steps.
Exercise
Add another data binding for index.html. For example:
Copy codeThe Code is as follows:
<P> Total number of phones: {phones. length }}</p>
Create a new data model attribute and bind it to the template. For example:
Copy codeThe Code is as follows:
$ Scope. hello = "Hello, World! "
Update your browser and make sure "Hello, World!" is displayed !"
Use an iterator to create a simple table:
Copy codeThe Code is as follows:
<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>
Add 1 to the I of the data model expression:
Copy codeThe Code is as follows:
<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>
Are you sure you want to change toBe (3) TO toBe (4), then the unit test fails, and re-run the./scripts/test. sh script.
Summary
You now have a dynamic application of model, view, and controller separation, and you can test it at any time. Now, you can go to step 3 to add the full-text search function to the application.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
