AngularJS 表達式的實例詳解

最近想做一款跨平台（pc\app\pad）的東西玩玩,研究了許多技術：

android、ios、H5、Bootrap、angular、angular2、ApiCloud、微信小程序

除android、ios 本身的枷鎖（系統）其它的都可以實現跨平台，尤其ApiCloud、微信小程式做開發sdk級解決方案很是火熱，但是從技術主權上講太依賴人家的東西，

H5 、bootstrap 在響應式相當優秀，前後端框架基本上可以承包。

當然還有很多 前端框架 如vue.js 等等。

不知道why,目前對angular產生興趣，興趣是最不要臉的行為號召力，比如你對某個漂亮姑娘產生了濃厚的興趣，然後。 。 。 。 （~~~開個玩笑）

然後就要去想辦法接近「她」 ~~

我要接近angular ~~

 

#先從收集資訊開始：

她從哪裡來？

AngularJS[1]  誕生於2009年，由Misko Hevery 等人創建，後來由Google所收購。是一款優秀的前端JS框架，已經被用在Google的多款產品當中。 AngularJS有著許多特性，最為核心的是：MVC、模組化、自動化雙向資料綁定、語意化標籤、依賴注入等等。

她的迷人之處？

AngularJS是為了克服HTML在建構應用上的不足而設計的。 HTML是一門很好的偽靜態文字展示設計的聲明式語言，但要建構WEB應用的話它就顯得乏力了。

通常，我們是透過以下技術來解決靜態網頁技術在建構動態應用上的不足：

#類別庫 - 類別庫是一些函數的集合，它能幫助你寫WEB應用。起主導作用的是你的程式碼，由你來決定何時使用類別庫。類別庫有：jQuery等

框架 - 框架是一種特殊的、已經實現了的WEB應用，你只需要對它填入特定的業務邏輯。這裡框架是起主導作用的，由它來根據具體的應用邏輯來呼叫你的程式碼。框架有：knockout、sproutcore等。

------好吧，還不夠迷人

#AngularJS透過為開發者呈現一個更高層次的抽象來簡化應用的開發。如同其他的抽象技術一樣，這也會損失一部分彈性。換句話說，並不是所有的應用都適合用AngularJS來做。 AngularJS主要考慮的是建構CRUD應用。幸運的是，至少90%的WEB應用都是CRUD應用。但是要了解什麼適合用AngularJS構建，就得了解什麼不適合用AngularJS構建。

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

------心動了麼？

----------不得不說，我們所有的網路行為無非是一個個的數據點進行CRUD,如購物車加減商品（+ - ）、查機票、車票、清除不聯絡的微信好友、下個訂單------------

 

進一步探索：

 

在標籤裡，我們用ng-app識別碼標示這是AngularJS應用。

這個ng-app標識符會使AngularJS自動初始化(auto initialize)你的應用。

我們用<script>標籤來載入AngularJS腳本：</script>

> ;

透過設定標籤裡的ng-model屬性， AngularJS會自動對資料進行雙向綁定。

我們也同時進行了一些簡單的資料驗證：

Quantity:Cost:

這個輸入框的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能將你從以下的惡夢中解脫出來 

# 

AngularJS 表達式

編輯

AngularJS 表達式寫在雙大括號內：{{ expression }}。 [2] 

AngularJS 表達式將資料綁定到 HTML，這與ng-bind指令有異曲同工之妙。

AngularJS 將在表達式書寫的位置"輸出"資料。

AngularJS 表達式很像JavaScript 表達式：它們可以包含文字、運算子和變數。

實例{{ 5 + 5 }} 或{{ firstName + " " + lastName }}

 

 

#初步認識了angular ，等待約下次~~~要一起麼~~~     V-V 

 

以上是AngularJS 表達式的實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！