核心要點(diǎn)

• Google 開發(fā)的 JavaScript 框架 AngularJS 允許開發(fā)者創(chuàng)建前端代碼，無需直接操作文檔對象模型 (DOM)。這可以通過使用指令和數(shù)據(jù)綁定來定義動(dòng)態(tài)視圖和控制器來實(shí)現(xiàn)。
• AngularJS 使用 MVC (模型-視圖-控制器) 結(jié)構(gòu)。模型通過 Angular 模塊和控制器定義，這些模塊和控制器通過指令連接到 HTML。這允許雙向數(shù)據(jù)綁定，其中模型中的更改會自動(dòng)更新視圖，反之亦然。
• 在 AngularJS 中，指令擴(kuò)展了 HTML 的詞匯表，提供了更動(dòng)態(tài)和強(qiáng)大的模板。示例包括用于迭代集合的 ng-repeat、用于事件處理的 ng-click 和用于條件渲染的 ng-show。
• 盡管 AngularJS 在學(xué)習(xí)曲線和使用非標(biāo)準(zhǔn) HTML 屬性方面受到一些批評，但它提供了一種獨(dú)特的 Web 開發(fā)方法，鼓勵(lì)創(chuàng)建更多可組合、可測試的應(yīng)用程序。通過 MVC 分離設(shè)計(jì)關(guān)注點(diǎn)，減少了連接組件所需的大量代碼。

AngularJS 憑借其先進(jìn)的理念迅速成為最受矚目的 JavaScript 框架之一，這并非偶然。在 Google 的支持和開發(fā)下，AngularJS 對前端的處理方式起初可能看起來有些奇怪，但您很快就會想知道為什么以前要采用其他方式。AngularJS 使開發(fā)者能夠編寫前端代碼，無需直接操作 DOM。本教程將指導(dǎo)您入門，通過構(gòu)建一個(gè)使用指令和數(shù)據(jù)綁定來定義動(dòng)態(tài)視圖和控制器的應(yīng)用程序。如果您熟悉 CoffeeScript（AngularJS 不需要），您會對本文更感興趣，但掌握 JavaScript 基礎(chǔ)知識就足夠了。您可能以前見過很多待辦事項(xiàng)應(yīng)用程序，所以讓我們構(gòu)建一些有趣的東西——井字棋！我們將從標(biāo)記棋盤開始。AngularJS 聲稱擴(kuò)展 HTML 的詞匯表，而不是將 DOM 隱藏在 JavaScript 后面。其理念是 HTML 本身就相當(dāng)出色，但我們可以添加一些元素和屬性，以構(gòu)建您已經(jīng)熟悉的強(qiáng)大、動(dòng)態(tài)的模板語言。我們的棋盤只是一個(gè)簡單的表格。如果我們通過良好的愿望進(jìn)行編程，我們實(shí)際上只需要迭代棋盤，為每個(gè)單元格輸出一個(gè)單元格即可。實(shí)際代碼非常接近我們的設(shè)想：

<table>
  <tr ng-repeat="row in board.grid">
    <td ng-repeat="cell in row">
      {{ cell.marker }}
    </td>
  </tr>
</table>

等等，那些奇怪的 ng 元素和胡須括號是什么？讓我們退一步，一步一步來。

<tr ng-repeat="row in board.grid">

AngularJS 指令

ng-repeat 是 AngularJS 的一個(gè) 指令，是提供的 HTML 擴(kuò)展之一。它允許我們迭代集合，為每個(gè)項(xiàng)目實(shí)例化模板。在本例中，我們告訴 AngularJS 為 board 對象的 grid 屬性中的每一行重復(fù) <tr>。假設(shè) grid 是一個(gè)二維數(shù)組，board 是窗口上的一個(gè)對象。

<table>
  <tr ng-repeat="row in board.grid">
    <td ng-repeat="cell in row">
      {{ cell.marker }}
    </td>
  </tr>
</table>

然后，我們使用另一個(gè) ng-repeat 指令迭代行中的單元格。這里的雙大括號表示使用 AngularJS 數(shù)據(jù)綁定 的一個(gè) 表達(dá)式——<td> 的內(nèi)容將被替換為相應(yīng)單元格的 marker 屬性。

到目前為止，很簡單，對吧？您可以立即了解生成的標(biāo)記將是什么樣子。我們不需要使用 jQuery 等重量級工具來創(chuàng)建新元素并填充它們，我們只需明確我們的模板即可。這更易于維護(hù)——我們只需查看 HTML 即可確切知道 DOM 將如何更改，而無需跟蹤我們實(shí)際上不記得編寫的一些模糊的 JavaScript 代碼。

現(xiàn)在我們可以可視化棋盤的狀態(tài)，我們將通過定義 board 的實(shí)際內(nèi)容為其提供數(shù)據(jù)源。

<tr ng-repeat="row in board.grid">

我們首先添加一些 JavaScript 代碼，為我們的應(yīng)用程序定義一個(gè) AngularJS 模塊。第一個(gè)參數(shù)是應(yīng)用程序的名稱，['ng'] 表示我們需要 AngularJS 的“ng”模塊，該模塊提供核心 AngularJS 服務(wù)。

我們將 HTML 調(diào)整為使用 ng-app 指令指示我們將使用我們的應(yīng)用程序模塊。

<td ng-repeat="cell in row">
  {{ cell.marker }}
</td>

MVC——定義控制器和視圖

AngularJS 的 MVC 特性在這里發(fā)揮作用。我們添加一些 JS 代碼來調(diào)用我們新創(chuàng)建的應(yīng)用程序模塊上的控制器函數(shù)，傳遞控制器的名稱和實(shí)現(xiàn)它的函數(shù)。

app = angular.module('ngOughts', ['ng'])

在本例中，我們的控制器函數(shù)接受一個(gè)參數(shù) $scope，它是我們控制器的 依賴項(xiàng)。AngularJS 使用 依賴注入 來向我們提供此服務(wù)對象，從函數(shù)參數(shù)的名稱推斷正確的對象（還有一種替代語法也允許縮?。?。

我們現(xiàn)在向 HTML 模板添加一個(gè) ng-controller 指令，以將其連接到我們的控制器：

<div ng-app='ngOughts'>

同樣，就像帶有控制器名稱的屬性一樣簡單。有趣的事情發(fā)生在這里——嵌套在我們 body 標(biāo)記內(nèi)的元素現(xiàn)在可以訪問 $scope 服務(wù)對象。然后，我們的 ng-repeat 屬性將在 BoardCtrl 范圍內(nèi)查找 board 變量，所以讓我們定義它：

app.controller "BoardCtrl", ($scope) ->

我們現(xiàn)在取得了一些進(jìn)展。我們將 Board 注入到我們的控制器中，實(shí)例化它并使其在 BoardCtrl 的范圍內(nèi)可用。

讓我們繼續(xù)實(shí)現(xiàn)一個(gè)簡單的 Board 類。

  
    <tr ng-repeat="row in board.grid">
      ...
    

添加工廠

然后，我們可以定義一個(gè) 工廠，它只返回 Board 類，允許將其注入到我們的控制器中。

app.controller "BoardCtrl", ($scope, Board) ->
    $scope.board = new Board

可以在工廠函數(shù)內(nèi)直接定義 Board，甚至可以將 Board 放到窗口對象上，但是在這里將其保持獨(dú)立允許我們獨(dú)立于 AngularJS 測試 Board，并鼓勵(lì)可重用性。

所以現(xiàn)在我們有一個(gè)空棋盤。令人興奮的事情，對吧？讓我們設(shè)置一下，以便單擊一個(gè)單元格會在那里放置一個(gè)標(biāo)記。

<table>
  <tr ng-repeat="row in board.grid">
    <td ng-repeat="cell in row">
      {{ cell.marker }}
    </td>
  </tr>
</table>

我們向每個(gè) <td> 元素添加了一個(gè) ng-click 指令。當(dāng)單擊表格單元格時(shí)，我們將使用單擊的單元格對象調(diào)用 board 上的 playCell 函數(shù)。填充 Board 實(shí)現(xiàn)：

<tr ng-repeat="row in board.grid">

雙向數(shù)據(jù)綁定

好的，所以現(xiàn)在我們已經(jīng)更新了棋盤模型，我們需要更新視圖，對吧？

不！AngularJS 數(shù)據(jù)綁定是 雙向的——它觀察模型的更改并將它們傳播回視圖。同樣，更新視圖將更新相應(yīng)的模型。我們的標(biāo)記將在我們的 Board 內(nèi)部網(wǎng)格中更新，并且 <td> 的內(nèi)容將立即更改以反映這一點(diǎn)。

這消除了您以前需要編寫的許多脆弱的、依賴于選擇器的樣板代碼。您可以專注于應(yīng)用程序邏輯和行為，而不是管道。

如果我們知道有人獲勝就好了。讓我們實(shí)現(xiàn)它。我們將在此處省略檢查獲勝條件的代碼，但它存在于最終代碼中。假設(shè)當(dāng)我們找到獲勝者時(shí)，我們會將獲勝屬性設(shè)置在構(gòu)成獲勝者的每個(gè)單元格上。

然后我們可以將我們的 <td> 更改為如下所示：

<td ng-repeat="cell in row">
  {{ cell.marker }}
</td>

app = angular.module('ngOughts', ['ng'])

如果 winning 為真，ng-class 將將“winning”CSS 類應(yīng)用于 <td>，讓我們設(shè)置一個(gè)令人愉悅的綠色背景來慶祝我們的勝利。你說再來一局？我們需要一個(gè)重置棋盤按鈕：

<div ng-app='ngOughts'>

將其添加到我們的控制器中，我們將在單擊按鈕時(shí)調(diào)用 reset。棋盤標(biāo)記將被清除，所有 CSS 類將被清除，我們準(zhǔn)備再次開始——無需我們更新 DOM 元素。

讓我們真正炫耀我們的勝利：

app.controller "BoardCtrl", ($scope) ->

ng-show 指令允許我們在游戲獲勝時(shí)有條件地顯示 <h1></h1> 元素，并且數(shù)據(jù)綁定允許我們插入獲勝者的標(biāo)記。簡單而富有表現(xiàn)力。

更易組合、更易測試的應(yīng)用程序

值得注意的是，我們的大部分代碼都處理的是普通的舊 JavaScript 代碼。這是故意的——不擴(kuò)展框架對象，只是編寫和調(diào)用 JS 代碼。這種方法有助于創(chuàng)建更易組合、更易測試的應(yīng)用程序，這些應(yīng)用程序感覺重量輕。我們的設(shè)計(jì)關(guān)注點(diǎn)通過 MVC 分離，但我們不需要編寫大量代碼來將它們連接在一起。

但是，AngularJS 也并非沒有局限性。許多人抱怨官方文檔和相對陡峭的學(xué)習(xí)曲線，有些人擔(dān)心 SEO，還有些人只是討厭使用非標(biāo)準(zhǔn) HTML 屬性和元素。

但是，這些問題都有解決方案，AngularJS 對 Web 開發(fā)的獨(dú)特方法絕對值得花時(shí)間去探索。

您可以在 Plunkr 上查看最終代碼的實(shí)際效果，或從 GitHub 下載它。

本文的評論已關(guān)閉。對 AngularJS 有疑問？為什么不在我們的論壇上提問呢？

關(guān)于 AngularJS 指令和數(shù)據(jù)綁定的常見問題

AngularJS 指令和組件有什么區(qū)別？

AngularJS 指令和組件都是 AngularJS 框架的強(qiáng)大功能。指令允許您創(chuàng)建可重用的自定義 HTML 元素和屬性，而組件是一種使用更簡單配置的特殊指令。組件適合構(gòu)建基于組件的應(yīng)用程序結(jié)構(gòu)，這在當(dāng)今前端開發(fā)中更為現(xiàn)代和廣泛使用。但是，指令更靈活，可以直接操作 DOM，而組件則無法做到這一點(diǎn)。

AngularJS 中的數(shù)據(jù)綁定是如何工作的？

AngularJS 中的數(shù)據(jù)綁定是模型和視圖組件之間數(shù)據(jù)的自動(dòng)同步。AngularJS 實(shí)現(xiàn)數(shù)據(jù)綁定的方式允許您將模型視為應(yīng)用程序中單一事實(shí)來源。視圖始終是模型的投影。當(dāng)模型更改時(shí)，視圖會反映更改，反之亦然。

您可以解釋單向數(shù)據(jù)綁定和雙向數(shù)據(jù)綁定之間的區(qū)別嗎？

單向數(shù)據(jù)綁定是數(shù)據(jù)從模型到視圖或從視圖到模型的簡單流動(dòng)。這意味著如果模型狀態(tài)發(fā)生更改，視圖將不會更新。另一方面，雙向數(shù)據(jù)綁定意味著如果模型狀態(tài)發(fā)生更改，視圖將更新；如果視圖發(fā)生更改（例如由于用戶交互），模型狀態(tài)將更新。這允許實(shí)時(shí)效果，這意味著更改（例如用戶輸入）將立即反映在模型狀態(tài)中。

如何在 AngularJS 中創(chuàng)建自定義指令？

要在 AngularJS 中創(chuàng)建自定義指令，您需要使用 .directive 函數(shù)。您可以命名您的指令，然后創(chuàng)建一個(gè)工廠函數(shù)，該函數(shù)將保存所有指令選項(xiàng)。工廠函數(shù)使用依賴項(xiàng)（如果有）注入，然后它返回一個(gè)對象，該對象定義指令選項(xiàng)。

AngularJS 指令中的隔離作用域是什么？

AngularJS 指令中的隔離作用域允許您為指令創(chuàng)建一個(gè)新的作用域。這意味著指令作用域中的任何更改都不會影響父作用域，反之亦然。當(dāng)您想要?jiǎng)?chuàng)建可重用和模塊化組件時(shí)，這非常有用。

如何在 AngularJS 指令中使用轉(zhuǎn)錄？

轉(zhuǎn)錄是 AngularJS 中的一個(gè)功能，允許您在指令內(nèi)插入自定義內(nèi)容。通過在指令定義對象中將 transclude 選項(xiàng)設(shè)置為 true，您可以在指令的模板中使用 ng-transclude 指令來插入自定義內(nèi)容。

AngularJS 指令中的鏈接函數(shù)是什么？

鏈接函數(shù)用于 AngularJS 指令來操作 DOM 或添加事件偵聽器。它在克隆模板后執(zhí)行。此函數(shù)通常用于執(zhí)行諸如設(shè)置 DOM 事件處理程序、監(jiān)視模型屬性的變化和更新 DOM 等任務(wù)。

如何在 AngularJS 指令中使用控制器函數(shù)？

控制器函數(shù)是一個(gè) JavaScript 構(gòu)造函數(shù)，用于增強(qiáng) AngularJS 作用域。當(dāng)控制器通過 ng-controller 指令附加到 DOM 時(shí)，AngularJS 將使用指定的控制器的構(gòu)造函數(shù)實(shí)例化一個(gè)新的控制器對象。將創(chuàng)建一個(gè)新的子作用域，并作為可注入?yún)?shù)提供給控制器的構(gòu)造函數(shù)作為 $scope。

指令作用域選項(xiàng)中的“@”、“=”、“&”有什么區(qū)別？

這些符號用于將數(shù)據(jù)綁定到指令作用域?！癅”用于字符串綁定，“=”用于雙向模型綁定，“&”用于方法綁定。它們允許您隔離作用域，使您的指令更模塊化和可重用。

如何測試我的 AngularJS 指令？

AngularJS 提供了一個(gè)名為 ngMock 的模塊，允許您在單元測試中注入和模擬 AngularJS 服務(wù)。您可以使用它來測試您的指令。您還可以將 Jasmine 或 Mocha 等其他測試框架與 ngMock 結(jié)合使用來編寫和運(yùn)行測試。

以上是Angularjs的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！