AngularJS 模板

時間 2019-12-01

原文原文鏈接

一個應用的代碼架構有不少種。對於AngularJS應用，咱們鼓勵使用模型-視圖-控制器（MVC）模式解耦代碼和分離關注點。考慮到這一點，咱們用AngularJS來爲咱們的應用添加一些模型、視圖和控制器。html

請重置工做目錄：git

git checkout -f step-2

咱們的應用如今有了一個包含三部手機的列表。angularjs

步驟1和步驟2之間最重要的不一樣在下面列出。，你能夠到GitHub去看完整的差異。github

視圖和模板

在AngularJS中，一個視圖是模型經過HTML**模板**渲染以後的映射。這意味着，不論模型何時發生變化，AngularJS會實時更新結合點，隨之更新視圖。web

好比，視圖組件被AngularJS用下面這個模板構建出來：api

<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>

咱們剛剛把靜態編碼的手機列表替換掉了，由於這裏咱們使用ngRepeat指令和兩個用花括號包裹起來的AngularJS表達式——{{phone.name}}和{{phone.snippet}}——能達到一樣的效果。數組

在<li>標籤裏面的ng-repeat="phone in phones"語句是一個AngularJS迭代器。這個迭代器告訴AngularJS用第一個<li>標籤做爲模板爲列表中的每一部手機建立一個<li>元素。
正如咱們在第0步時學到的，包裹在phone.name和phone.snippet周圍的花括號標識着數據綁定。和常量計算不一樣的是，這裏的表達式其實是咱們應用的一個數據模型引用，這些咱們在PhoneListCtrl控制器裏面都設置好了。

模型和控制器

在PhoneListCtrl控制器裏面初始化了數據模型（這裏只不過是一個包含了數組的函數，數組中存儲的對象是手機數據列表）：瀏覽器

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."} ]; }

儘管控制器看起來並無起到什麼控制的做用，可是它在這裏起到了相當重要的做用。經過給定咱們數據模型的語境，控制器容許咱們創建模型和視圖之間的數據綁定。咱們是這樣把表現層，數據和邏輯部件聯繫在一塊兒的：app

PhoneListCtrl——控制器方法的名字（在JS文件controllers.js中）和<body>標籤裏面的ngController指令的值相匹配。
手機的數據此時與注入到咱們控制器函數的做用域（$scope）相關聯。當應用啓動以後，會有一個根做用域被建立出來，而控制器的做用域是根做用域的一個典型後繼。這個控制器的做用域對全部<body ng-controller="PhoneListCtrl">標記內部的數據綁定有效。

AngularJS的做用域理論很是重要：一個做用域能夠視做模板、模型和控制器協同工做的粘接器。AngularJS使用做用域，同時還有模板中的信息，數據模型和控制器。這些能夠幫助模型和視圖分離，可是他們二者確實是同步的！任何對於模型的更改都會即時反映在視圖上；任何在視圖上的更改都會被馬上體如今模型中。

想要更加深刻理解AngularJS的做用域，請參看AngularJS做用域文檔。

測試

「AngularJS方式」讓開發時代碼測試變得十分簡單。讓咱們來瞅一眼下面這個爲控制器新添加的單元測試：

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); }); }); });

這個測試驗證了咱們的手機數組裏面有三條記錄（暫時無需弄明白這個測試腳本）。這個例子顯示出爲AngularJS的代碼建立一個單元測試是多麼的容易。正由於測試在軟件開發中是必不可少的環節，因此咱們使得在AngularJS能夠輕易地構建測試，來鼓勵開發者多寫它們。

在寫測試的時候，AngularJS的開發者傾向於使用Jasmine行爲驅動開發（BBD）框架中的語法。儘管AngularJS沒有強迫你使用Jasmine，可是咱們在教程裏面全部的測試都使用Jasmine編寫。你能夠在Jasmine的官方主頁或者Jasmine Wiki上得到相關知識。

基於AngularJS的項目被預先配置爲使用JsTestDriver來運行單元測試。你能夠像下面這樣運行測試：

在一個單獨的終端上，進入到angular-phonecat目錄而且運行./scripts/test-server.sh來啓動測試（Windows命令行下請輸入.\scripts\test-server.bat來運行腳本，後面腳本命令運行方式相似）；
打開一個新的瀏覽器窗口，而且轉到http://localhost:9876 ；
選擇「Capture this browser in strict mode」。

這個時候，你能夠拋開你的窗口無論而後把這事忘了。JsTestDriver會本身把測試跑完而且把結果輸出在你的終端裏。

運行./scripts/test.sh進行測試。

你應當看到相似於以下的結果：

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)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。