最近想做一款跨平臺(pc\app\pad)的東西玩玩,研究了許多技術: android、ios、H5、Bootrap、angular、angular2、ApiCloud、微信小程式 除android、ios 本身的枷鎖(系統)其它 的都 可以實現跨平臺,尤其ApiCloud、微信小程式做開發sdk級 ...
最近想做一款跨平臺(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,如購物車加減商品(+ -)、查 機票、車票 、清除 不聯繫的微信好友 、下個訂單------------進一步探索: 在<html>標簽里,我們用一個ng-app標識符標明這是一個AngularJS應用。 這個ng-app標識符會使AngularJS自動初始化(auto initialize)你的應用。 我們用<script>標簽來載入AngularJS腳本: <script src="angular-1.1.0.min.js"></script> 通過設置<input>標簽里的ng-model屬性, 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能將你從以下的噩夢中解脫出來