angularjs權(quán)威教程

《angularjs權(quán)威教程》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫。

1、AngularJS權(quán)威教程HelloWorld!開始學(xué)習(xí)AngularJS的一個(gè)好方法是創(chuàng)建經(jīng)典應(yīng)用程序“HelloWorld!”：使用您喜愛的文本編輯器，創(chuàng)建一個(gè)HTML文件，例如：helloworld.html。將下面的源代碼復(fù)制到您的HTML文件。在web瀏覽器中打開這個(gè)HTML文件。源代碼Hello{{'Wo

2、rld'}}!請(qǐng)?jiān)谀臑g覽器中運(yùn)行以上代碼查看效果。現(xiàn)在讓我們仔細(xì)看看代碼，看看到底怎么回事。當(dāng)加載該頁時(shí)，標(biāo)記ng-app告訴AngularJS處理整個(gè)HTML頁并引導(dǎo)應(yīng)用：這行載入AngularJS腳本：（想了解AngularJS處理整個(gè)HTML頁的細(xì)節(jié)，請(qǐng)看Bootstrap。）最后，標(biāo)簽中的正文是應(yīng)用的模板，在UI中顯示我們的問候語：Hello{

3、{'World'}}!注意，使用雙大括號(hào)標(biāo)記{{}}的內(nèi)容是問候語中綁定的表達(dá)式，這個(gè)表達(dá)式是一個(gè)簡(jiǎn)單的字符串‘World’。下面，讓我們看一個(gè)更有趣的例子：使用AngularJS對(duì)我們的問候語文本綁定一個(gè)動(dòng)態(tài)表達(dá)式。HelloAngularJSWorld!本示例演示AngularJS的雙向數(shù)據(jù)綁定（bi-directionaldatabinding）：編輯前面創(chuàng)建的helloworld.html文檔。將下面的源代碼復(fù)制到您的HTML文件。刷新瀏覽器窗口。源代碼

4、iptsrc="://code.angularjs.org/angular-1.0.1.min.js">Yourname:

5、

6、'World'}}!請(qǐng)?jiān)谀臑g覽器中運(yùn)行以上代碼查看效果。該示例有一下幾點(diǎn)重要的注意事項(xiàng)：文本輸入指令綁定到一個(gè)叫yourname的模型

7、變量。雙大括號(hào)標(biāo)記將yourname模型變量添加到問候語文本。你不需要為該應(yīng)用另外注冊(cè)一個(gè)事件偵聽器或添加事件處理程序！現(xiàn)在試著在輸入框中鍵入您的名稱，您鍵入的名稱將立即更新顯示在問候語中。這就是AngularJS雙向數(shù)據(jù)綁定的概念。輸入框的任何更改會(huì)立即反映到模型變量（一個(gè)方向），模型變量的任何更改都會(huì)立即反映到問候語文本中（另一方向）。AngularJS應(yīng)用的解析本節(jié)描述AngularJS應(yīng)用程序的三個(gè)組成部分，并解釋它們?nèi)绾斡成涞侥Ｐ?視圖-控制器設(shè)計(jì)模式：模板（Templates）模板是您用HTML和CSS編寫的文件，展現(xiàn)應(yīng)

8、用的視圖。您可給HTML添加新的元素、屬性標(biāo)記，作為AngularJS編譯器的指令。AngularJS編譯器是完全可擴(kuò)展的，這意味著通過AngularJS您可以在HTML中構(gòu)建您自己的HTML標(biāo)記！應(yīng)用程序邏輯（Logic）和行為（Behavior）應(yīng)用程序邏輯和行為是您用JavaScript定義的控制器。AngularJS與標(biāo)準(zhǔn)AJAX應(yīng)用程序不同，您不需要另外編寫偵聽器或DOM控制器，因?yàn)樗鼈円呀?jīng)內(nèi)置到AngularJS中了。這些功能使您的應(yīng)用程序邏輯很容易編寫、測(cè)試、維護(hù)和理解。模型數(shù)據(jù)（Data）模型是從AngularJS作

9、用域?qū)ο蟮膶傩砸甑摹ＤＰ椭械臄?shù)據(jù)可能是Javascript對(duì)象、數(shù)組或基本類型，這都不重要，重要的是，他們都屬于AngularJS作用域?qū)ο?。AngularJS通過作用域來保持?jǐn)?shù)據(jù)模型與視圖界面UI的雙向同步。一旦模型狀態(tài)發(fā)生改變，AngularJS會(huì)立即刷新反映在視圖界面中，反之亦然。此外，AngularJS還提供了一些非常有用的服務(wù)特性：底層服務(wù)包括依賴注入，XHR、緩存、URL路由和瀏覽器抽象服務(wù)。您還可以擴(kuò)展和添加自己特定的應(yīng)用服務(wù)。這些服務(wù)可以讓您非常方便的編寫WEB應(yīng)用。AngularJS入門教程：導(dǎo)言和準(zhǔn)備學(xué)習(xí)Ang

10、ularJS的一個(gè)好方法是逐步完成本教程，它將引導(dǎo)您構(gòu)建一個(gè)完整的AngularJSweb應(yīng)用程序。該web應(yīng)用是一個(gè)Android設(shè)備清單的目錄列表，您可以篩選列表以便查看您感興趣的設(shè)備，然后查看設(shè)備的詳細(xì)信息。本教程將向您展示An