應項目的需要,一個月之前開始做WebComponents、Javascript MVC框架的技術調研,由於重點是想做組件化,所以就沒有考慮Backbone(去年就小試牛刀,太難用了)及其他的mvc框架,所以重點看了Ploymer,ploymer也是google的庫,這個實在是未來的未來,很多東西都沒有成為標准,如shadow dom也就chrome可以很好的支持,所以最終放棄,再后看了facebook的react和twitter的flight,這倆個由於版本過低,還沒有正式發布,也只好作罷,偶然的機會,結識了AngularJs,一下子被他的特性吸引:
五大特性:
1. 雙向數據綁定;
2. 模板;
3. MVC,准確說是MVVM;
4. 依賴注入;
5. 指令(這個灰常強大,有了它我們就可以做組件了);
關於着五大特性的介紹可以參考Gbin1的這篇文章:
http://www.gbin1.com/technology/javascript/20120717-AugularJS-features/
看完這篇文章,也可以讓自己對AngularJs有一個大體的了解!
如果想要通過AngularJs的官方文檔來學習Angular還是有一定困難的,而且官方的示例也不是很多,他的Tutorial倒是還不錯,是以一個實際的項目做引導,一步步的了解AngularJs的種種特性,英文不錯的話倒是可以看看,或者直接那Demo項目的源碼來看也是不錯地選擇;
學習AngularJs
1. 開始學習之前應該先了解下AngularJs的原理及基本概念,達到知其然知其所以然;
基本概念及原理:
英文:http://docs.angularjs.org/guide/concepts
中文:http://www.angularjs.cn/#/A00q
2. 學習完成AngularJs的原理及基本概念,就可以跟着官方出品的Tutorial小試牛刀了,Tutorial的Demo項目是一個類似與中關村等的電子類產品報價介紹網站,只包含基本的手機列表和手機詳情!
英文:http://docs.angularjs.org/tutorial
中文:http://www.ituring.com.cn/minibook/303(中文的這份翻譯的文檔,在做單元測試的時候會有一點錯誤的說明,可以轉回英文看一眼就好)
3. 學習完成以上的AngularJs的知識,就可以clone一份angular-seed大展拳腳了!不過下山大展拳腳之前,總要聽聽師傅(過來人)的忠告,推薦以下這倆篇博文:
塵埃落定的最佳實踐:http://www.lovelucy.info/angularjs-best-practices.html
破狼的經驗總結:http://www.cnblogs.com/whitewolf/archive/2013/03/24/2979344.html
4. 好了!可以下山了!
下載seed,開始闖盪江湖吧!https://github.com/angular/angular-seed
現在的前端開發,有非常好的構建工具選擇,我首推grunt,grunt就像一個手動的IDE,闖盪江湖,擁有這樣的上乘武功絕學,非常有必要;
使用Grunt構建AngularJs項目
使用grunt構建,讓你擁有飛一般的感覺;
1. 學習Grunt
如果你還不會使用Grunt,那這倆篇文章是很不錯的入門選擇:
http://docs.spmjs.org/contrib/simple-grunt
http://www.jankerli.com/?p=1628
2. 使用ng-Boilerplate,一個開源的基於AngularJs的Grunt構建
https://github.com/joshdmiller/ng-boilerplate(強烈推薦)
其他資料補充
AngularJs中文社區:http://www.angularjs.cn
Angular-UI:http://angular-ui.github.io/
(后續再補充)