AngularJS

時間 2019-12-10

原文原文鏈接

AngularJS

AngularJS ^[1] 誕生於2009年，由Misko Hevery 等人建立，後爲Google所收購。是一款優秀的前端JS框架，已經被用於Google的多款產品當中。AngularJS有着諸多特性，最爲核心的是：MVVM、模塊化、自動化雙向數據綁定、語義化標籤、依賴注入等等。

中文名: AngularJS
外文名: AngularJS

時間: 2009年
建立人: Misko Hevery

背景介紹

編輯

AngularJS是爲了克服 HTML在構建應用上的不足而設計的。HTML是一門很好的爲靜態文本展現設計的聲明式語言，但要構建WEB應用的話它就顯得乏力了。因此我作了一些工做（你也能夠以爲是小花招）來讓瀏覽器作我想要的事。

一般，咱們是經過如下技術來解決靜態網頁技術在構建動態應用上的不足：

類庫 - 類庫是一些函數的集合，它能幫助你寫WEB應用。起主導做用的是你的代碼，由你來決定什麼時候使用類庫。類庫有：jQuery等

框架 - 框架是一種特殊的、已經實現了的WEB應用，你只須要對它填充具體的業務邏輯。這裏框架是起主導做用的，由它來根據具體的應用邏輯來調用你的代碼。框架有：knockout、sproutcore等。

AngularJS使用了不一樣的方法，它嘗試去補足HTML自己在構建應用方面的缺陷。AngularJS經過使用咱們稱爲指令(directives)的結構，讓瀏覽器可以識別新的語法。例如：

使用雙大括號{{}}語法進行數據綁定；

使用DOM控制結構來實現迭代或者隱藏DOM片斷；

支持表單和表單的驗證；

能將邏輯代碼關聯到相關的DOM元素上；

能將HTML分組成可重用的組件。

解決方案

編輯

AngularJS試圖成爲WEB應用中的一種客戶端的解決方案。這意味着它不僅是你的WEB應用中的一個小部分，仍是一個完整的客戶端的解決方案。這會讓AngularJS在構建一個 CRUD（增長Create、查詢Retrieve、更新Update、刪除Delete）的應用時顯得很「執拗」（原文爲 opinionated,意指沒有太多的其餘方式）。可是，儘管它很「執拗」，它仍然能確保它的「執拗」只是在你構建應用的起點，而且你仍能靈活變更。AngularJS的一些出衆之處以下：

構建一個CRUD應用可能用到的所有內容包括：數據綁定、基本模板標識符、表單驗證、路由、深度連接、組件重用、依賴注入。

測試方面包括：單元測試、端對端測試、模擬和自動化測試框架。

具備目錄佈局和測試腳本的種子應用做爲起點。

可愛之處

編輯

AngularJS經過爲開發者呈現一個更高層次的抽象來簡化應用的開發。如同其餘的抽象技術同樣，這也會損失一部分靈活性。換句話說，並非全部的應用都適合用AngularJS來作。AngularJS主要考慮的是構建CRUD應用。幸運的是，至少90%的WEB應用都是CRUD應用。可是要了解什麼適合用AngularJS構建，就得了解什麼不適合用AngularJS構建。

如遊戲，圖形界面編輯器，這種DOM操做很頻繁也很複雜的應用，和CRUD應用就有很大的不一樣，它們不適合用AngularJS來構建。像這種狀況用一些更輕量、簡單的技術如jQuery可能會更好。

實例

編輯

下面是一個包含了一個表單的典型CRUD應用。表單值先通過驗證，而後用來計算總值，這個總值會被格式化成本地的樣式。下面有一些開發者常見的概念，你須要先了解一下：

1.將 數據模型(data-model)關聯到視圖(UI)上；

2.寫、讀、驗證用戶的輸入；

3.根據模型計算新的值；

4.將輸出格式本地化，

index.html:

 
   
    
      
      
        <! 
        doctype  
        html> 
       
 
        < 
        html  
        ng-app> 
       
 
        < 
        head 
        > 
       
 
        < 
        script  
        src 
        = 
        "angular-1.1.0.min.js" 
        ></ 
        script 
        > 
       
 
        < 
        script  
        src 
        = 
        "script.js" 
        ></ 
        script 
        > 
       
 
        </ 
        head 
        > 
       
 
        < 
        body 
        > 
       
 
        < 
        div  
        ng-controller 
        = 
        "InvoiceCntl" 
        > 
       
 
        < 
        b 
        >Invoice:</ 
        b 
        > 
       
 
        < 
        br 
        > 
       
 
        < 
        br 
        > 
       
 
        < 
        table 
        > 
       
 
        < 
        tr 
        >< 
        td 
        >Quantity</ 
        td 
        >< 
        td 
        >Cost</ 
        td 
        ></ 
        tr 
        > 
       
 
        < 
        tr 
        > 
       
 
        < 
        td 
        >< 
        input  
        type 
        = 
        "integer"  
        min 
        = 
        "0"  
        ng-model 
        = 
        "qty"  
        required ></ 
        td 
        > 
       
 
        < 
        td 
        >< 
        input  
        type 
        = 
        "number"  
        ng-model 
        = 
        "cost"  
        required ></ 
        td 
        > 
       
 
        </ 
        tr 
        > 
       
 
        </ 
        table 
        > 
       
 
        < 
        hr 
        > 
       
 
        < 
        b 
        >Total:</ 
        b 
        > {{qty * cost | currency}} 
       
 
        </ 
        div 
        > 
       
 
        </ 
        body 
        > 
       
 
        </ 
        html 
        > 
       
 
    
 
   
 

script.js

 
        function InvoiceCntl($scope) { 
       
        $scope.qty = 1; 
       
        $scope.cost = 19.95; 
       
        }

試一下上面這個例子。而後咱們一塊兒來看下這個例子的工做原理。

在<html>標籤裏，咱們用一個ng-app標識符標明這是一個AngularJS應用。這個ng-app標識符會使AngularJS 自動初始化(auto initialize)你的應用。

咱們用<script>標籤來加載AngularJS腳本：

Quantity:<input type="integer"min="0"ng-model="qty"required >Cost:<input type="number"ng-model="cost"required >這個輸入框的widget看起來很普通，但若是認識到如下幾點那它就不普通了：

當頁面加載完後，AngularJS會依照widget裏的聲明的模型名字（qty、cost）生成同名變量。你能夠把這些變量認爲是MVC設計模式中的M(Model)；

注意上面widget裏的input有着特殊的能力。若是大家沒有輸入數據或者輸入的數據無效，這個input輸入框會自動變紅。輸入框的這種新特性，能讓開發者更容易實現CRUD應用裏常見的字段驗證功能。

終於，咱們能夠來看一下神祕的雙大括號{{}}了:

Total:{{qty *cost |currency}}這個{{表達式}}標記是AngularJS的數據綁定。其中的表達式能夠是表達式和過濾器({{ expression | filter }})的組合。AngularJS提供了過濾器來對輸入輸出數據格式化。

上面的這個例子裏，{{}}裏的表達式讓AngularJS把從輸入框中得到的數據相乘，而後把相乘結果格式化成本地貨幣樣式，而後輸出到頁面上。

值得一提的是，咱們既沒有調用任何AngularJS的方法，也沒有像用框架同樣去編寫某個具體邏輯，就是完成了上述功能。這個實現的背後是由於瀏覽器作了比以往生成靜態頁面更多的工做，讓它能知足動態WEB應用的須要。AngularJS使得動態WEB應用的開發門檻降到不須要類庫或者框架的程度。

理念

編輯

Angular信奉的是，當組建視圖(UI)同時又要寫軟件邏輯時，聲明式的代碼會比命令式的代碼好得多，儘管命令式的代碼很是適合用來表述業務邏輯。

將DOM操做和應用邏輯解耦是一種很是好的思路，它能大大改善代碼的可調性；

將測試和開發同等看待是一種很是很是好的思路，測試的難度在很大程度上取決於代碼的結構；

將客戶端和服務器端解耦是一種特別好的作法，它能使兩邊並行開發，而且使兩邊代碼都能實現重用；

若是框架可以在整個開發流程裏都引導着開發者：從設計UI，到編寫業務邏輯，再到測試，那對開發者將是極大的幫助；

「化繁爲簡，化簡爲零」老是好的。

AngularJS能將你從如下的噩夢中解脫出來：

使用回調：回調的使用會打亂你的代碼的可讀性，讓你的代碼變得支離破碎，很難看清原本的業務邏輯。移除一些常見的代碼，例如回調，是件好事。大幅度地減小你由於JavaScript這門語言的設計而不得不寫的代碼，能讓你把本身應用的邏輯看得更清楚。

手動編寫操做DOM元素的代碼：操做DOM是AJAX應用很基礎的一部分，但它也老是很「笨重」而且容易出錯。用聲明的方式描述的UI界面可隨着應用狀態的改變而變化，能讓你從編寫低級的DOM操做代碼中解脫出來。絕大部分用AngularJS寫的應用裏，開發者都不用再本身去寫操做DOM的代碼，不過若是你想的話仍是能夠去寫。

對UI界面讀寫數據：AJAX應用的很大一部是CRUD操做。一個經典的流程是把服務端的數據組建成內部對象，再把對象編成HTML表單，用戶修改表單後再驗證表單，若是有錯再顯示錯誤，而後將數據從新組建成內部對象，再返回給服務器。這個流程裏有太多太多要重複寫的代碼，使得代碼看起來老是在描述應用的所有執行流程，而不是具體的業務邏輯和業務細節。

開始前得寫大量的基礎性的代碼：一般你須要寫不少的基礎性的代碼才能實現一個「Hello World」的應用。用AngularJS的話，它會提供一些服務讓你很容易地正式開始寫你的應用，而這些服務都是以一種Guice-like dependency-injection式的依賴注入自動加入到你的應用中去的，這讓你能很快的進入你應用的具體開發。特別的是，你還能全盤掌握自動化測試的初始化過程。