【譯】《精通使用AngularJS開發Web App》（二） --- 框架概覽，雙向數據綁定，MVC，scope，控制器，模型

時間 2020-04-07

標籤精通使用 angularjs 開發 web app 框架概覽雙向數據綁定 mvc scope 控制器模型欄目 AngularJS 简体版

原文原文鏈接

上一篇：【譯】《精通使用AngularJS開發Web App》（一）
下一篇：【譯】《精通使用AngularJS開發Web App》（三）javascript

原版書名：Mastering Web Application Development with AngularJShtml

Chapter 1java

AngularJS速覽

如今咱們已經知道了到哪兒去找框架的源碼，以及相關的文檔，如今咱們就能夠開始編碼了，在實戰中看看AngularJS到底是什麼樣子的。
本書的這一部分將爲隨後的章節打下基礎，會涵蓋 AngularJS模板，模塊化，和依賴注入。任何的AngularJS web app 都是由這些基礎組建而成的。angularjs

Hello World - AngularJS示例

咱們對AngularJS的第一印象就用典型的 Hello, World! 來演示，看看用AngularJS是如何來寫的，同時也看看它所使用的語法。web

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/
angular.js"></script>
</head>
<body ng-app ng-init="name='World'">
    <h1>Hello, {{name}}</h1>
</body>
</html>

首先須要引入AngularJS，這樣才能在瀏覽器中正確運行。這就像AngularJS同樣簡單，它最簡單的形式就是引用一個javascript文件。ajax

AngularJS 相對來講仍是比較小的：壓縮並gzip以後大概只有30KB，壓縮不gzip的話大概有80KB。它並不依賴任何第三方類庫。
本書的小例子中咱們會使用未經壓縮的，開發友好的版本，在Google的CDN上。同時AngularJS的全部版本均可以在這裏下載到：http://code.angularjs.orgexpress

在實際運行中，僅僅把AngularJS包含進來還不夠，咱們還須要啓動這個小應用。最簡單的方式就是使用自定義的屬性 ng-app 。segmentfault

<body> 標籤附近能夠看到另外一個非標準的 HTML 屬性：ng-init。咱們可使用 ng-init 在模板被渲染以前來初始化模型。最後要說到的就是 {{name}} 表達式，它就是簡單的把模型的值給渲染出來了而已。api

即使是在這最開始的、最簡單的小例子中，也能夠看到AngularJS模板系統的一些重要特性，以下所示：
- 自定義的 HTML 標籤和屬性能夠給原本是靜態的 HTML 文檔增添動態行爲。
- 兩個花括號（{{expression}}）是一個用來輸出模型值的表達式的定界符。
在 AngularJS 中，全部的能夠被框架所理解和解析的特殊的 HTML 標籤和屬性都是指令（directive）。數組

雙向數據綁定

對 AngularJS 來講，渲染模板簡直就是最拿手的工做了；特別是當要構建一個動態web 應用的時候，AngularJS簡直就能發光昇仙了。爲了讓我們能欣賞到 AngularJS 的真正的力量，咱們就用 input 來擴展一下以前的 Hello World，以下所示：

<body ng-app ng-init="name='World'">
    Say hello to:　<input type="text" ng-model="name">
    <h1>Hello, {{name}}</h1>
</body>

這個 input 標籤處了額外的 ng-model 以外簡直就毫無特別之處。真正的魔法力量將會在咱們在input 中輸入文字的時候展示。忽然之間，屏幕會在每次鍵盤敲擊以後進行重繪，顯示出你所敲打的名字！要刷新一個模板，你並不須要編寫任何一行代碼，咱們也沒有被強迫調用任何一個框架的 API 來更新數據模型。AngularJS 是足夠聰明的，能夠自動檢測到模型的變化並相應的更新DOM。

大多數的傳統的模板系統渲染模板時都是線性的，單向的：模型（變量）和模板被拼合在一塊兒並將計算的結果輸出。模型的任何改變都須要模板的從新計算。AngularJS無需如此，由於任何的用戶引發的視圖變化，都會當即映射到對應的模型中，同時，任何模型的變化也會立刻傳播到模板中去。

AngularJS中的MVC

大部分現存的web應用都是構建在知名的 模型-視圖-控制器（MVC） 模式的某種形式之上。可是 MVC 最大的問題在於，它自己並非一個很是清晰的模式，而是很高階很結構化的。更糟糕的是，最原始的模式又變異、衍生出不少種模式（最知名的多是 MVP 和 MVVM）。要加入這些混亂的、不一樣的框架，開發人員經常會對這些模式作出不一樣的理解和解釋。這樣的結果就是，用着相同的 MVC 的名號，卻在描述一個不一樣的架構和編碼實現。Martin Fowler 在他很優秀的關於GUI架構的文章中對此有很好的總結（http://martinfowler.com/eaaDev/uiArchs.html）。

就拿模型-視圖-控制器來講，它常常被拿來看成一個模式來講事，但我卻不以爲把它當作一個模式是個什麼好事，由於它自己包含了不少不一樣的思路。不一樣的人看到 MVC 不一樣的地方會得出不一樣的結論，併成他們的理解爲 "MVC"。若是這尚未形成足夠的混亂，那你終將會從根據對 MVC 的誤解而開發的像 Chinese whispers(一個耳語傳話的遊戲，詳見這裏) 同樣的系統中看到最後的效果。

AngularJS團隊本着很是務實的態度來整個MVC模式家族，並宣稱這個框架是基於MVW（模型-視圖-隨便你是啥）模式的。通常說來只有在實踐中見識到來能感覺到（究竟如何）。

鳥瞰

咱們到如今爲止所見到的 Hello World都尚未使用任何的分層策略：數據初始化，邏輯，還有視圖都混在一個文件之中。在任何實際的應用中，咱們都須要把更多的注意力放在分配給每層的那些責任上面。幸運的是，AngularJS提供了一些不一樣的構建方式，能夠正確地構建更加複雜的應用。

本書後面的例子都會省略掉 AngularJS 的初始化代碼（引入腳本，ng-app 屬性，等等），這樣更利於閱讀。

咱們一塊兒來看看這個稍微修改過的 Hello World：

<div ng-controller="HelloCtrl">
    Say hello to: <input type="text" ng-model="name"><br>
    <h1>Hello, {{name}}!</h1>
</div>

ng-init 屬性被移除了，而後咱們增長了一個新的 ng-controller 指令，以及對應着一個 JavaScript 函數。這個 HelloCtrl 還接受一個至關神祕的 $scope 做爲參數：

var HelloCtrl = function ($scope) {
     $scope.name = 'World';
}

Scope（做用域）

AngularJS中的 $scope 對象在這裏就是要將域模型暴露給視圖（模板）。只需把屬性設置給 scope 實例，就能夠在模板渲染時獲得這個值。

Scopes（做用域）也能夠針對特定的視圖來擴展數據和特定的功能。只要在 scope 實例上定義一些函數就能將特定的 UI 邏輯暴露給模板了。

例如，你能夠給 name 變量建立一個 getter 方法，以下所示：

var HelloCtrl = function ($scope) {
   $scope.getName = function() {
      return $scope.name;
   };
}

而後就像下面這樣在模板中使用：

<h1>Hello, {{getName()}} !</h1>

$scope對象讓咱們能夠很是精確的控制這個域內的模型的哪一部分，以及哪些操做在視圖層是可用的。理論上來說，AngularJS的 scopes 很是相似於 MVVM 模式的 ViewModel。

控制器

控制器的首要任務就是初始化scope對象。在實踐中，初始化的邏輯由下面的這些責任組成：
- 提供模型初始化的值
- 擴展 $scope 的 UI 行爲（方法）
控制器都是普通的 JavaScript 函數。他們並沒必要去繼承一些框架特定提供的類，也沒必要去調用任何特定的 AngularJS API才能去正確的執行他們的任務。