[Reprint] AngularJS getting started tutorial 02: 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:
git checkout -f step-2
Our application now has a list of three mobile phones.
The most important differences between Step 1 and Step 2 are listed below ., You can go to GitHub to see the complete difference.
Views and templatesIn AngularJSViewIs the model through HTMLTemplateAfter rendering. 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:
<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.
The ng-repeat = "phone in phones" statement inside the <li> tag is an AngularJS iterator. This iterator tells AngularJS to use the first <li> tag as a template to create a <li> element for each phone in the list.
As we learned in step 0, the curly braces wrapped around phone.name and phone.snippet identify the data binding. Unlike the constant calculation, the expression here is actually a data model reference that we apply, which we have set in the PhoneListCtrl controller.
Models and controllers
The data model is initialized in the PhoneListCtrl controller (here is just a function containing an array, and the object stored in the array is a list of mobile phone data):
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 have any control, it plays a vital role here. Given the context of our data model, the controller allows us to establish a data binding between the model and the view. Here's how we connect the presentation layer, data, and logic components:
PhoneListCtrl-The name of the controller method (in the JS file controllers.js) matches the value of the ngController directive in the <body> tag.
The phone's data is now associated with the scope ($ scope) injected into our controller function. When the application starts, a root scope is created, and the controller scope is a typical successor to the root scope. The scope of this controller is valid for all data binding inside the <body ng-controller = "PhoneListCtrl"> tag.
AngularJS's scoping theory is very important: a scoping can be seen as a glue for templates, models, and controllers working together. AngularJS uses scopes, as well as information in templates, data models, and controllers. These can help model and view separation, but they are indeed synchronized! Any changes to the model are immediately reflected in the view; any changes in the view are immediately reflected in the model.
For a deeper understanding of AngularJS scoping, see the AngularJS scoping documentation.
test
The "AngularJS way" makes it easy to test code during development. Let's take a glance at the newly added unit test for the controller:
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 there are three records in our phone array (no need to figure out this test script for the time being). 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 make 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 our tests in the tutorial are written in Jasmine. You can get relevant knowledge on Jasmine's official homepage or Jasmine Wiki.
AngularJS-based projects are pre-configured to run unit tests using JsTestDriver. You can run tests like this:
Exercise
Add another data binding for index.html. E.g:
<p> Total number of phones: {{phones.length}} </ p>
Create a new data model property and bind it to the template. E.g:
$ scope.hello = "Hello, World!"
Update your browser and make sure "Hello, World!" Is displayed
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 let i increase the data model expression by 1:
<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 the unit test fails after changing toBe (3) to toBe (4), and then run it again. /Scripts/test.sh script
to sum up
You now have a dynamic application of model, view, and controller separation, and you are ready to test. You can now proceed to step 3 to add full-text search functionality to your application.
AngularJS environment setup
Pay attention to the key areas I subscribe to,
1.ng-app plus
2. It is enough to introduce angularjs
Specific to angularjs.org/ see here
<! doctype html> <html ng-app> // Point 1 <head> <meta charset = "UTF-8"> <title> angularjs </ title> </ head> <body> <div> <label> Name : </ label> <input type = "text" ng-model = "yourName" placeholder = "Enter a name here"> <hr> <h1> Hello {{yourName}}! </ h1> </ div> < script src = "ajax.googleapis.com / ... min.js"> </ script> // Key Points 2 </ body> </ html>
I will come to see AngularJS, I need an example of addition, deletion, modification, high-score guidance
Has sent you a friend to add
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
