It's time to give these pages a bit of a dynamic feature--with angularjs! We have added a test here for the controller to be added later.
There are many kinds of code architectures for an application. For ANGULARJS applications, we encourage decoupling of code and separation of concerns using the model-view-controller (MVC) pattern. 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 go to GitHub to see the complete difference.
Views and templates
In Angularjs, a view is a map of the model after rendering through the html** template * *. This means that, regardless of when the model changes, ANGULARJS updates the combination point in real time and updates the view.
For example, the view component is built with the following Angularjs template:
As we learned in the No. 0 step, the curly braces around phone.name and Phone.snippet identify data bindings. Unlike constant calculations, the expression here is actually a reference to the data model we are applying, which we have set up in the Phonelistctrl controller.
Models and controllers
The data model is initialized in the Phonelistctrl controller (this is just a function containing an array, and the object stored in the array is a list of mobile data):
App/js/controller.js:
function Phonelistctrl ($scope) { $scope. phones = [ {' name ': ' Nexus S ', ' snippet ': ' Fast just got faster with N Exus S. "}, {" name ":" Motorola xoom™with Wi-Fi ", " snippet ":" The next, next Generation tablet. "}, {" name ":" M Otorola xoom™ ", " snippet ":" The next, next Generation tablet. "} ; }Although the controller does not seem to have any control, it plays a vital role here. Given the context of our data model, the controller allows us to establish data binding between the model and the view. This is how we associate the presentation layer, the data, and the logical components:
phonelistctrl--the name of the Controller method (in JS file controllers.js) and the value of the ngcontroller instruction in the <body> tag.
The cell phone data is now associated with the scope ($scope) injected into our controller function. When the application is started, a root scope is created, and the controller's scope is a typical successor to the root scope. The scope of this controller is valid for data binding within all <body ng-controller= "Phonelistctrl" > tags.The scope theory of ANGULARJS is very important: a scope can be regarded as a connector for templates, models and controllers to work together. Angularjs uses scopes, as well as information in templates, data models, and controllers. These can help separate the model from the view, but they are indeed synchronized! Any changes to the model are immediately reflected in the view, and any changes to the view are immediately reflected in the model.
To get a deeper understanding of the scope of ANGULARJS, see the ANGULARJS scope documentation.
Test
The "Angularjs Way" makes development-time code testing very simple. Let's take a look at this new unit test added 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 a while). 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 about them.
When writing tests, ANGULARJS developers tend to use the syntax in the Jasmine behavior-driven Development (BBD) framework. Although Angularjs did not force you to use Jasmine, all of our tests in the tutorial were written using Jasmine. You can get relevant knowledge on Jasmine's official homepage or Jasmine wiki.
Angularjs based projects are preconfigured to run unit tests using Jstestdriver. You can run the test as follows:
On a separate terminal, go to the Angular-phonecat directory and run./scripts/test-server.sh to start the test (please enter it under Windows command line. \scripts\ Test-server.bat to run the script, followed by the script command to run the same way);
Open a new browser window and go to http://localhost:9876;
Select "Capture this browser in strict mode".
At this point, you can leave your window open and forget about it. Jstestdriver will run out of tests and output the results to your terminal.
Run./scripts/test.sh for testing.
You should see a result similar to the following:
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)Yes! 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 turn off the script, and then step back on the side.
Practice
Add another data binding for index.html. For example:
<p>total number of phones: {{phones.length}}</p>
Create a new data model property and bind it to the template. For example:
$scope. Hello = "Hello, world!"
Update your browser and make sure to show "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 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>Determine that the unit test fails after converting Tobe (3) to Tobe (4), and then run it again./scripts/test.sh Script
Summarize
You now have a model, a view, a dynamic application of the controller separation, and you are ready to test. Now you can go to step 3来 to add full-text search functionality to the application.
The above is the Angularjs template data collation, follow-up continue to supplement the relevant information, thank you for your support of this site!
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
