1. 快速開(kāi)始

2018-02-24 16:14 更新

Hello World!

開(kāi)始學(xué)習(xí)AngularJS的一個(gè)好方法是創(chuàng)建經(jīng)典應(yīng)用程序“Hello World!”:

  1. 使用您喜愛(ài)的文本編輯器,創(chuàng)建一個(gè)HTML文件,例如:helloworld.html。
  2. 將下面的源代碼復(fù)制到您的HTML文件。
  3. 在web瀏覽器中打開(kāi)這個(gè)HTML文件。

源代碼

<!doctype html>
<html ng-app>
    <head>
        <script src="https://atts.w3cschool.cn/attachments/image/cimg/angular-1.0.1.min.js"></script>
    </head>
    <body>
        Hello {{'World'}}!
    </body>
</html>

請(qǐng)?jiān)谀臑g覽器中運(yùn)行以上代碼查看效果。

現(xiàn)在讓我們仔細(xì)看看代碼,看看到底怎么回事。 當(dāng)加載該頁(yè)時(shí),標(biāo)記ng-app告訴AngularJS處理整個(gè)HTML頁(yè)并引導(dǎo)應(yīng)用:

<html ng-app>

這行載入AngularJS腳本:

<script src="https://atts.w3cschool.cn/attachments/image/cimg/angular-1.0.1.min.js"></script>

(想了解AngularJS處理整個(gè)HTML頁(yè)的細(xì)節(jié),請(qǐng)看Bootstrap。)

最后,標(biāo)簽中的正文是應(yīng)用的模板,在UI中顯示我們的問(wèn)候語(yǔ):

Hello {{'World'}}!

注意,使用雙大括號(hào)標(biāo)記{{}}的內(nèi)容是問(wèn)候語(yǔ)中綁定的表達(dá)式,這個(gè)表達(dá)式是一個(gè)簡(jiǎn)單的字符串‘World’。

下面,讓我們看一個(gè)更有趣的例子:使用AngularJS對(duì)我們的問(wèn)候語(yǔ)文本綁定一個(gè)動(dòng)態(tài)表達(dá)式。

Hello AngularJS World!

本示例演示AngularJS的雙向數(shù)據(jù)綁定(bi-directional data binding):

  1. 編輯前面創(chuàng)建的helloworld.html文檔。
  2. 將下面的源代碼復(fù)制到您的HTML文件。
  3. 刷新瀏覽器窗口。

源代碼

<!doctype html>
<html ng-app>
    <head>
        <script src="https://atts.w3cschool.cn/attachments/image/cimg/angular-1.0.1.min.js"></script>
    </head>
    <body>
        Your name: <input type="text" ng-model="yourname" placeholder="World">
        <hr>
        Hello {{yourname || 'World'}}!
    </body>
</html>

請(qǐng)?jiān)谀臑g覽器中運(yùn)行以上代碼查看效果。

該示例有一下幾點(diǎn)重要的注意事項(xiàng):

  • 文本輸入指令<input ng-model="yourname" />綁定到一個(gè)叫yourname的模型變量。
  • 雙大括號(hào)標(biāo)記將yourname模型變量添加到問(wèn)候語(yǔ)文本。
  • 你不需要為該應(yīng)用另外注冊(cè)一個(gè)事件偵聽(tīng)器或添加事件處理程序!

現(xiàn)在試著在輸入框中鍵入您的名稱(chēng),您鍵入的名稱(chēng)將立即更新顯示在問(wèn)候語(yǔ)中。 這就是AngularJS雙向數(shù)據(jù)綁定的概念。 輸入框的任何更改會(huì)立即反映到模型變量(一個(gè)方向),模型變量的任何更改都會(huì)立即反映到問(wèn)候語(yǔ)文本中(另一方向)。

AngularJS應(yīng)用的解析

本節(jié)描述AngularJS應(yīng)用程序的三個(gè)組成部分,并解釋它們?nèi)绾斡成涞侥P?視圖-控制器設(shè)計(jì)模式:

模板(Templates)

模板是您用HTML和CSS編寫(xiě)的文件,展現(xiàn)應(yīng)用的視圖。 您可給HTML添加新的元素、屬性標(biāo)記,作為AngularJS編譯器的指令。 AngularJS編譯器是完全可擴(kuò)展的,這意味著通過(guò)AngularJS您可以在HTML中構(gòu)建您自己的HTML標(biāo)記!

應(yīng)用程序邏輯(Logic)和行為(Behavior)

應(yīng)用程序邏輯和行為是您用JavaScript定義的控制器。AngularJS與標(biāo)準(zhǔn)AJAX應(yīng)用程序不同,您不需要另外編寫(xiě)偵聽(tīng)器或DOM控制器,因?yàn)樗鼈円呀?jīng)內(nèi)置到AngularJS中了。這些功能使您的應(yīng)用程序邏輯很容易編寫(xiě)、測(cè)試、維護(hù)和理解。

模型數(shù)據(jù)(Data)

模型是從AngularJS作用域?qū)ο蟮膶傩砸甑?。模型中的?shù)據(jù)可能是Javascript對(duì)象、數(shù)組或基本類(lèi)型,這都不重要,重要的是,他們都屬于AngularJS作用域?qū)ο蟆?/p>

AngularJS通過(guò)作用域來(lái)保持?jǐn)?shù)據(jù)模型與視圖界面UI的雙向同步。一旦模型狀態(tài)發(fā)生改變,AngularJS會(huì)立即刷新反映在視圖界面中,反之亦然。

此外,AngularJS還提供了一些非常有用的服務(wù)特性:

  1. 底層服務(wù)包括依賴(lài)注入,XHR、緩存、URL路由和瀏覽器抽象服務(wù)。
  2. 您還可以擴(kuò)展和添加自己特定的應(yīng)用服務(wù)。
  3. 這些服務(wù)可以讓您非常方便的編寫(xiě)WEB應(yīng)用。
以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)