最近想做一款跨平台(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)你的應用。
我們用
透過設定標籤裡的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中文網其他相關文章!
陳述:本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn