核心要點

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

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

<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 的一個 指令，是提供的 HTML 擴展之一。它允許我們迭代集合，為每個項目實例化模板。在本例中，我們告訴 AngularJS 為 board 對象的 grid 屬性中的每一行重複 <tr>。假設 grid 是一個二維數(shù)組，board 是窗口上的一個對象。

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

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

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

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

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

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

我們將 HTML 調整為使用 ng-app 指令指示我們將使用我們的應用程序模塊。

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

MVC——定義控制器和視圖

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

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

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

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

<div ng-app='ngOughts'>

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

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

我們現(xiàn)在取得了一些進展。我們將 Board 注入到我們的控制器中，實例化它並使其在 BoardCtrl 的範圍內可用。

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

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

添加工廠

然後，我們可以定義一個 工廠，它只返回 Board 類，允許將其註入到我們的控制器中。

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

可以在工廠函數(shù)內直接定義 Board，甚至可以將 Board 放到窗口對像上，但是在這裡將其保持獨立允許我們獨立於 AngularJS 測試 Board，並鼓勵可重用性。

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

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

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

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

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

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

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

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

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

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

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

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

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

<div ng-app='ngOughts'>

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

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

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

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

更易組合、更易測試的應用程序

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

但是，AngularJS 也並非沒有局限性。許多人抱怨官方文檔和相對陡峭的學習曲線，有些人擔心 SEO，還有些人只是討厭使用非標準 HTML 屬性和元素。

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

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

本文的評論已關閉。對 AngularJS 有疑問？為什麼不在我們的論壇上提問呢？

關於 AngularJS 指令和數(shù)據(jù)綁定的常見問題

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

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

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

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

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

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

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

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

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

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

如何在 AngularJS 指令中使用轉錄？

轉錄是 AngularJS 中的一個功能，允許您在指令內插入自定義內容。通過在指令定義對像中將 transclude 選項設置為 true，您可以在指令的模板中使用 ng-transclude 指令來插入自定義內容。

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

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

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

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

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

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

如何測試我的 AngularJS 指令？

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

以上是Angularjs的詳細內容。更多資訊請關注PHP中文網(wǎng)其他相關文章！