Angularjs

核心要點

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

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

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

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

<tr ng-repeat="row in board.grid">
<p></p>
<h2>AngularJS 指令</h2>
<p><code>ng-repeat 是 AngularJS 的一個 指令，是提供的 HTML 擴展之一。它允許我們迭代集合，為每個項目實例化模板。在本例中，我們告訴 AngularJS 為 board 對象的 grid 屬性中的每一行重複 <tr>。假設 <code>grid 是一個二維數組，board 是窗口上的一個對象。 
<code class="language-html"><table>
  <tr ng-repeat="row in board.grid">
    <td ng-repeat="cell in row">
      {{ cell.marker }}
    </td>
  </tr>
</table></code>
然後，我們使用另一個 ng-repeat 指令迭代行中的單元格。這裡的雙大括號表示使用 AngularJS 數據綁定 的一個 表達式——<td> 的內容將被替換為相應單元格的 <code>marker 屬性。 
到目前為止，很簡單，對吧？您可以立即了解生成的標記將是什麼樣子。我們不需要使用 jQuery 等重量級工具來創建新元素並填充它們，我們只需明確我們的模板即可。這更易於維護——我們只需查看 HTML 即可確切知道 DOM 將如何更改，而無需跟踪我們實際上不記得編寫的一些模糊的 JavaScript 代碼。 
現在我們可以可視化棋盤的狀態，我們將通過定義 board 的實際內容為其提供數據源。 
<code class="language-html"><tr ng-repeat="row in board.grid">
<p>我們首先添加一些 JavaScript 代碼，為我們的應用程序定義一個 AngularJS 模塊。第一個參數是應用程序的名稱，<code>['ng']</code> 表示我們需要 AngularJS 的“ng”模塊，該模塊提供核心 AngularJS 服務。 </p>
<p>我們將 HTML 調整為使用 <code>ng-app</code> 指令指示我們將使用我們的應用程序模塊。 </p>
<pre class="brush:php;toolbar:false"><code class="language-html"><td ng-repeat="cell in row">
  {{ cell.marker }}
</td></code>

MVC——定義控制器和視圖
AngularJS 的 MVC 特性在這裡發揮作用。我們添加一些 JS 代碼來調用我們新創建的應用程序模塊上的控制器函數，傳遞控制器的名稱和實現它的函數。 
<code class="language-javascript">app = angular.module('ngOughts', ['ng'])</code>
在本例中，我們的控制器函數接受一個參數 $scope，它是我們控制器的 依賴項。 AngularJS 使用 依賴注入 來向我們提供此服務對象，從函數參數的名稱推斷正確的對象（還有一種替代語法也允許縮小）。 
我們現在向 HTML 模板添加一個 ng-controller 指令，以將其連接到我們的控制器：
<code class="language-html"><div ng-app="ngOughts">
<p>同樣，就像帶有控制器名稱的屬性一樣簡單。有趣的事情發生在這裡——嵌套在我們 body 標記內的元素現在可以訪問 <code>$scope</code> 服務對象。然後，我們的 <code>ng-repeat</code> 屬性將在 <code>BoardCtrl</code> 範圍內查找 <code>board</code> 變量，所以讓我們定義它：</p>
<pre class="brush:php;toolbar:false"><code class="language-javascript">app.controller "BoardCtrl", ($scope) -></code>
我們現在取得了一些進展。我們將 Board 注入到我們的控制器中，實例化它並使其在 BoardCtrl 的範圍內可用。 
讓我們繼續實現一個簡單的 Board 類。 
<code class="language-html"><div ng-controller="BoardCtrl">
  <table>
    <tr ng-repeat="row in board.grid">
      ...
    </tr>
  </table>
</div></code>

添加工廠
然後，我們可以定義一個 工廠，它只返回 Board 類，允許將其註入到我們的控制器中。 
<code class="language-javascript">app.controller "BoardCtrl", ($scope, Board) ->
    $scope.board = new Board</code>
可以在工廠函數內直接定義 Board，甚至可以將 Board 放到窗口對像上，但是在這裡將其保持獨立允許我們獨立於 AngularJS 測試 Board，並鼓勵可重用性。 
所以現在我們有一個空棋盤。令人興奮的事情，對吧？讓我們設置一下，以便單擊一個單元格會在那裡放置一個標記。 
<code class="language-html"><table>
  <tr ng-repeat="row in board.grid">
    <td ng-repeat="cell in row">
      {{ cell.marker }}
    </td>
  </tr>
</table></code>
我們向每個 <td> 元素添加了一個 <code>ng-click 指令。當單擊表格單元格時，我們將使用單擊的單元格對象調用 board 上的 playCell 函數。填充 Board 實現：
<code class="language-html"><tr ng-repeat="row in board.grid">
<p></p>
<h2>雙向數據綁定</h2>
<p>好的，所以現在我們已經更新了棋盤模型，我們需要更新視圖，對吧？ </p>
<p>不！ AngularJS 數據綁定是 <em>雙向的</em>——它觀察模型的更改並將它們傳播回視圖。同樣，更新視圖將更新相應的模型。我們的標記將在我們的 <code>Board</code> 內部網格中更新，並且 <code><td> 的內容將立即更改以反映這一點。 
<p>這消除了您以前需要編寫的許多脆弱的、依賴於選擇器的樣板代碼。您可以專注於應用程序邏輯和行為，而不是管道。 </p>
<p>如果我們知道有人獲勝就好了。讓我們實現它。我們將在此處省略檢查獲勝條件的代碼，但它存在於最終代碼中。假設當我們找到獲勝者時，我們會將獲勝屬性設置在構成獲勝者的每個單元格上。 </p>
<p>然後我們可以將我們的 <code><td> 更改為如下所示：
<pre class="brush:php;toolbar:false"><code class="language-html"><td ng-repeat="cell in row">
  {{ cell.marker }}
</td></code>
<code class="language-javascript">app = angular.module('ngOughts', ['ng'])</code>
如果 winning 為真，ng-class 將將“winning”CSS 類應用於 <td>，讓我們設置一個令人愉悅的綠色背景來慶祝我們的勝利。你說再來一局？我們需要一個重置棋盤按鈕：
<pre class="brush:php;toolbar:false">&lt;code class=&quot;language-html&quot;&gt;&lt;div ng-app=&quot;ngOughts&quot;&gt;
&lt;p&gt;將其添加到我們的控制器中，我們將在單擊按鈕時調用 &lt;code&gt;reset&lt;/code&gt;。棋盤標記將被清除，所有 CSS 類將被清除，我們準備再次開始——無需我們更新 DOM 元素。 &lt;/p&gt;
&lt;p&gt;讓我們真正炫耀我們的勝利：&lt;/p&gt;
&lt;pre class=&quot;brush:php;toolbar:false&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;app.controller &quot;BoardCtrl&quot;, ($scope) -&gt;&lt;/code&gt;</pre>
<p><code>ng-show 指令允許我們在遊戲獲勝時有條件地顯示 <h1></h1> 元素，並且數據綁定允許我們插入獲勝者的標記。簡單而富有表現力。 

更易組合、更易測試的應用程序
值得注意的是，我們的大部分代碼都處理的是普通的舊 JavaScript 代碼。這是故意的——不擴展框架對象，只是編寫和調用 JS 代碼。這種方法有助於創建更易組合、更易測試的應用程序，這些應用程序感覺重量輕。我們的設計關注點通過 MVC 分離，但我們不需要編寫大量代碼來將它們連接在一起。 
但是，AngularJS 也並非沒有局限性。許多人抱怨官方文檔和相對陡峭的學習曲線，有些人擔心 SEO，還有些人只是討厭使用非標準 HTML 屬性和元素。 
但是，這些問題都有解決方案，AngularJS 對 Web 開發的獨特方法絕對值得花時間去探索。 
您可以在 Plunkr 上查看最終代碼的實際效果，或從 GitHub 下載它。 
本文的評論已關閉。對 AngularJS 有疑問？為什麼不在我們的論壇上提問呢？ 

關於 AngularJS 指令和數據綁定的常見問題

AngularJS 指令和組件有什麼區別？ 

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

AngularJS 中的數據綁定是如何工作的？ 

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

您可以解釋單向數據綁定和雙向數據綁定之間的區別嗎？ 

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

如何在 AngularJS 中創建自定義指令？ 

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

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

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

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

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

AngularJS 指令中的鏈接函數是什麼？ 

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

如何在 AngularJS 指令中使用控制器函數？ 

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

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

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

如何測試我的 AngularJS 指令？ 

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