不借用框架做一個很是複雜的單頁應用,會有什麼問題要注意? 然後想使用yeoman+angularJS的框架來做,但我從來沒接觸過這些。網路上也找不到angular開發的好的教程,希望大家幫忙找找看。
1.對於如果你是初學Angular那么希望你可以先把Angular的基本功掌握好了,對於你接下來的開發是有極大的幫助的。 2.推薦給你一些網站:
Angular
國內的ngnice
國內的AngularJS中文社群
3.國外的網站:
AngularJS官網
scotch
ng-newsletter
4.關於你想使用的yeoman+Angular,可以看看下面的網站:
yeoman
generator-angular你用yeoman会用到的一个generator,幫你組織文件結構,相當方便。
generator
5.一點建議,學習Angular还是要多看看国外的资料,国内的一些讲解有些是旧版本的,有些讲解与Angular的思想根本不一樣,當然最好是照著官網上的例子,還有文檔走一遍,你就大概知道是怎麼回事了。 6.如果是看書的話,推薦看AngularJS權威指南,雖然書中也有一些印刷的錯誤,總體感覺還是可以的。
前人整理我只是藉花獻佛
http://www.html-js.com/article/Angular-learning-angularjs-learning-resource-collection%203059
GitHub網址 https://github.com/dolymood/AngularLearning基礎
官方:http://docs.angularjs.org angularjs官方網站已被牆,可參閱 http://www.ngnice.com/;官方zip下載包https://github.com/dolymood/angular-packages ,已增加docs服務,輸入位址即可,例如:http://blog.aijc.net/angular-packages/angular-1.3.15/docs/jquery?ag? : http://stackoverflow.com/questions /14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-backgroundag note:https://github.com/joeylin/angular-noteangularjs book:https:/ /github.com/shyamseshadri/angularjs-booklearning-angular:https://github.com/zafarali/learning-angular 以及我的翻譯版本(ing)https://github.com/dolymood/learning-angular angular與require結合方式:https://github.com/tnajdek/angular-requirejs-seed利用angular開發下一代Web應用(angular js) 【書】Lcllao的ag筆記:http://www.cnblogs. com/lcllao/archive/2012/10/18/2728787.htmlangular-service-or-factory ? 傻傻分不清楚? http://iffycan.blogspot.com.ar/2013/05/angular-service-or-factory.html 以及https://github.com/tylermcginnis/AngularServicesangular-injection http://iffycan.blogspot.com .ar/2013/07/angular-injection.html利用angular開發下一代Web應用(angular js) 書https://github.com/aztack/AngularJS-translation破狼的angular文章集合http://www .cnblogs.com/whitewolf/category/404298.html鄒業盛angular的學習筆記http://zouyesheng.com/angular.html呂大豹的angular文章合集http://www.cnblogs.com/lvdabao/tag/AngularJstag /塵封の煙雨的angular文章合集http://wangjiatao.diandian.com/?tag=angularjs黑暗線程的angular文章(繁體)http://blog.darkthread.net/blogs/darkthreadtw/archive/tagsreadtw/archive/tagsread /AngularJS/default.aspxAngularJS 資料建模http://blog.jobbole.com/54817/AngularJS 中的一些坑http://blog.jobbole.com/52857/版中文guide http://angangular .duapp.com/guideangular tips http://angular-tips.com/ng-newsletter http://www.ng-newsletter.com/AngularJS 開發者最常犯的10 個錯誤http:// www.oschina.net/translate/top-10-mistakes-angularjs-developers-makeAngularJS 指令實踐指南(二) http://blog.jobbole.com/62999/fse.guru http://www.fse .guru/angular-core-components-roles 以及作者其他相關的ng文章深入理解AngularJS 的Scope http://www.lovelucy.info/understanding-scopes-in-angularjs.htmlangularjs中文社群關於angular.js文章、教學http://angularjs.cn/tag/AngularJSxufei的部落格https://github.com/xufei/blog/issues 一直在更新,薦,講得很好!angularjs-internals-in-depth http://www.smashingmagazine.com/2015/01/22/angularjs-internals-in-depth/introduction-to-unit-testing-in-angularjs http://www. smashingmagazine.com/2014/10/07/introduction-to-unit-testing-in-angularjs/AngularJS Unit Testing – For Real, Though https://quickleft.com/blog/angularjs-unit-testing-for-real -though/Quick Starter Repository for Angular Material https://github.com/angular/material-startangular cheat sheet https://dncmagazine.blob.core.windows.net/downloads/AngularCheatSheet-DNCMagazine.pdf -translate https://github.com/angular-translate/angular-translate推薦15 個Angular.js 應用擴充指令http://www.oschina.net/translate/15-directives-to-extend-your-angular -js-appsA Guide To Transclusion in AngularJS http://teropa.info/blog/2015/06/09/transclusion.html範例
我自己的angular example7步驟從菜鳥到專家(建議原文,可以直接看程式碼範例):http://blog.jobbole.com /46779/”強大的ToDoMVC:https://github.com/tastejs/todomvcangular-ajax-upload 指導性質的http://iffycan.blogspot.com.ar/2013/08/angular-ajax-upload .htmlangular app https://github.com/angular-app/angular-appFun with AngularJS! http://devgirl.org/2013/03/21/fun-with-angularjs/Angular指令及元件的全面範例https://github.com/angular-cn/ng-showcaseangular中的MVVM模式http://greengerong.github.io/blog/2015/06/16/angularzhong-de-mvvmmo-shi/ 影片
阿里懶交會AngularJS專場http://www.imooc.com/view/203?utm_source=jobboleweibo大漠窮秋講的AngularJS實戰http://www.imooc.com/learn/156codeschool上的angular影片教學http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro方案,效能
使用AngularJS建立大型Web應用程式http://www.infoq.com/cn/news/2013/02/angular-web-app優化1200=>35(建議去看看官方站點,從文章來看,感觸不深ps:個人觀點) :http://blog.jobbole.com/51180/模式指導:https://github.com/mgechev/angularjs-style-guideangularjs-performance-with-large-listshttp: //tech.small-improvements.com/2013/09/10/angularjs-performance-with-large-lists/angularjs-my-solution-to-the-ng-repeat-performance-problemhttp://www.williambrownstreet .net/blog/2013/07/angularjs-my-solution-to-the-ng-repeat-performance-problem/angularjs-pitfalls-using-scopes http://thenittygritty.co/angularjs-pitfalls-using-scopespes 只綁定一次https://github.com/Pasvaz/bindonce天豬的angular-lazyload利用require.js動態載入路由檔案的庫angularAMD https://github.com/marcoslin/angularAMD事件代理angularular -delegate-eventangular最佳實踐http://www.lovelucy.info/angularjs-best-practices.html如何組織大型JavaScript應用程式中的程式碼? http://kb.cnblogs.com/page/176541/databinding-in-angularjs http://stackoverflow.com/questions/9682092/databinding-in-angularjs/9693933#9693933AngularJS Best Practices http://wwwctices http://www .artandlogic.com/blog/2013/05/ive-been-doing-it-wrong-part-1-of-3/Best Practice Recommendations for Angular App Structure https://docs.google.com/document/d /1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pubSuperspeed your angularjs apps http://orangevolt.blogspot.com/2013/08/ers; 為什麼我們的angular應用總是很慢http://www.zhex.me/blog/2013/11/22/why-out-angular-app-is-slow/angular效能優化心得http://atian25. github.io/2014/05/09/angular-performace/angular-debounce https://github.com/shahata/angular-debounce基於AngularJS的企業軟體前端架構http://www.infoq.com/cn /news/2014/05/angularjs-front-end-architectureangular data http://angular-data.pseudobry.com/AngularJS風格指南(包含各翻譯版本) https://github.com/johnpapa/angular -styleguide快速建立app angular-kickstart https://github.com/vesparny/angular-kickstart動態載入controller https://github.com/DanWahlin/CustomerManager透過少使用ng-controller來提升ng效能http: //teropa.info/blog/2014/10/24/how-ive-improved-my-angular-apps-by-banning-ng-controller.html以及該站其他關於ng文章AngularJS風格指南2 https:/ /github.com/toddmotto/angularjs-styleguideangularjs的資料綁定https://github.com/rchee/translation/blob/master/angularJS/databinding-in-angularjs.mdCreate, read, update, delete MDB collections via AngularJS. https://github.com/Unitech/angular-bridgeToken-based AngularJS Authentication https://github.com/sahat/satellizerVirtual Scroll for AngularJS ngRepeat directive https://github.com/kamilkpub. /angular-vs-repeat元件(UI|module)類別
angular UI https://github.com/angular-uiBootstrap directives for Angular:https://github.com/mgcrea/angular-strapMaterial design for Angular https://github.com/angular/material angular lib,包含了“事件代理、dialog、上傳flow、圖片預覽imageViewer、進化版keydown(支持傳入keycode)、mousewheel、滾動加載、選擇內容selection”, https://github.com/dolymood/angularLib xufei大神的ng-controlfind modules for angular http://ngmodules.org/原始碼分析
MVVM大比拼之AngularJS原始碼精析http://www.cnblogs.com/sskyy/p/3709649.html前端原始碼分析http://www.html-js.com/article/column/693xuwenmin的原始碼分析http://www.ifeenan.com/categories.html#angularjs-ref其他精華
一個資源集錦:https://github.com/jmcunningham/AngularJS-Learning2013年AngularJS學習資源精選http://blog.jobbole.com/54716/2013年度最強AngularJS資源合集http://ngularJS資源合集www.iteye.com/news/28651-AngularJS-Google-resourcexuwenmin的angular合集http://www.ifeenan.com/categories.html#angularjs-ref可以複製AngularJS資源集合http://www.csdn .net/article/2014-12-10/2823058-AngularJSangular2
angular2 學習資源集錦:https://github.com/timjacobi/angular2-education
如果只是簡單的想拿一個單頁應用的話。你只要不用a跳轉頁面就好了,所有頁面內容的更換都用Ajax來取得。
我沒學過angularJS,不能給你關於angularJS的建議
這裡可以給你一個其他建議:http://www.zhile.name/2.html
範例:http://m.shihj.com/
不借用框架的話,使用模板引擎是必要的,其次需要封裝一堆常用操作,還有就是內存問題稍微注意一下。
URL,SEO最好提前設計,否則之後會蛋痛。 url涉及瀏覽器前進後退,seo涉及你之後網站的訪問量
SPA說好做也好做,說難做也難做,SPA應用最重要的起點就是js邏輯架構,想要做出一個可以支撐起完整網站的單頁應用,架構的合理性和易用性是重點,網路上很多demo都不一定適用,建議先看一些backbone的單頁SPA應用,再回頭架構angular會輕鬆很多,起碼不會一頭霧水,附上我做過的backbone:無賊
還是得看你的需求,你有多少地方真的需要angular這麼複雜的東西嗎其實一個東西怎麼實現都可以還是看適合不適合Angular門檻不高建議你看Lynda - Up and Running with AngularJS網路找找可以下載到
1.對於如果你是初學
Angular
那么希望你可以先把Angular
的基本功掌握好了,對於你接下來的開發是有極大的幫助的。2.推薦給你一些網站:
國內的ngnice
國內的AngularJS中文社群
3.國外的網站:
AngularJS官網
scotch
ng-newsletter
4.關於你想使用的
yeoman
+Angular
,可以看看下面的網站:yeoman
generator-angular你用
yeoman
会用到的一个generator
,幫你組織文件結構,相當方便。5.一點建議,學習
Angular
还是要多看看国外的资料,国内的一些讲解有些是旧版本的,有些讲解与Angular
的思想根本不一樣,當然最好是照著官網上的例子,還有文檔走一遍,你就大概知道是怎麼回事了。6.如果是看書的話,推薦看AngularJS權威指南,雖然書中也有一些印刷的錯誤,總體感覺還是可以的。
前人整理我只是藉花獻佛
http://www.html-js.com/article/Angular-learning-angularjs-learning-resource-collection%203059
GitHub網址 https://github.com/dolymood/AngularLearning
基礎
官方:http://docs.angularjs.org angularjs官方網站已被牆,可參閱 http://www.ngnice.com/;
官方zip下載包https://github.com/dolymood/angular-packages ,已增加docs服務,輸入位址即可,例如:http://blog.aijc.net/angular-packages/angular-1.3.15/docs/
jquery?ag? : http://stackoverflow.com/questions /14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background
ag note:https://github.com/joeylin/angular-note
angularjs book:https:/ /github.com/shyamseshadri/angularjs-book
learning-angular:https://github.com/zafarali/learning-angular 以及我的翻譯版本(ing)https://github.com/dolymood/learning-angular
angular與require結合方式:https://github.com/tnajdek/angular-requirejs-seed
利用angular開發下一代Web應用(angular js) 【書】
Lcllao的ag筆記:http://www.cnblogs. com/lcllao/archive/2012/10/18/2728787.html
angular-service-or-factory ? 傻傻分不清楚? http://iffycan.blogspot.com.ar/2013/05/angular-service-or-factory.html 以及https://github.com/tylermcginnis/AngularServices
angular-injection http://iffycan.blogspot.com .ar/2013/07/angular-injection.html
利用angular開發下一代Web應用(angular js) 書https://github.com/aztack/AngularJS-translation
破狼的angular文章集合http://www .cnblogs.com/whitewolf/category/404298.html
鄒業盛angular的學習筆記http://zouyesheng.com/angular.html
呂大豹的angular文章合集http://www.cnblogs.com/lvdabao/tag/AngularJstag /
塵封の煙雨的angular文章合集http://wangjiatao.diandian.com/?tag=angularjs
黑暗線程的angular文章(繁體)http://blog.darkthread.net/blogs/darkthreadtw/archive/tagsreadtw/archive/tagsread /AngularJS/default.aspx
AngularJS 資料建模http://blog.jobbole.com/54817/
AngularJS 中的一些坑http://blog.jobbole.com/52857/
版中文guide http://angangular .duapp.com/guide
angular tips http://angular-tips.com/
ng-newsletter http://www.ng-newsletter.com/
AngularJS 開發者最常犯的10 個錯誤http:// www.oschina.net/translate/top-10-mistakes-angularjs-developers-make
AngularJS 指令實踐指南(二) http://blog.jobbole.com/62999/
fse.guru http://www.fse .guru/angular-core-components-roles 以及作者其他相關的ng文章
深入理解AngularJS 的Scope http://www.lovelucy.info/understanding-scopes-in-angularjs.html
angularjs中文社群關於angular.js文章、教學http://angularjs.cn/tag/AngularJS
xufei的部落格https://github.com/xufei/blog/issues 一直在更新,薦,講得很好!
angularjs-internals-in-depth http://www.smashingmagazine.com/2015/01/22/angularjs-internals-in-depth/
introduction-to-unit-testing-in-angularjs http://www. smashingmagazine.com/2014/10/07/introduction-to-unit-testing-in-angularjs/
AngularJS Unit Testing – For Real, Though https://quickleft.com/blog/angularjs-unit-testing-for-real -though/
Quick Starter Repository for Angular Material https://github.com/angular/material-start
angular cheat sheet https://dncmagazine.blob.core.windows.net/downloads/AngularCheatSheet-DNCMagazine.pdf
-translate https://github.com/angular-translate/angular-translate
推薦15 個Angular.js 應用擴充指令http://www.oschina.net/translate/15-directives-to-extend-your-angular -js-apps
A Guide To Transclusion in AngularJS http://teropa.info/blog/2015/06/09/transclusion.html
範例
我自己的angular example
angular影片教學http://www.kittencup.com/category/video/angularjs/7步驟從菜鳥到專家(建議原文,可以直接看程式碼範例):http://blog.jobbole.com /46779/”
強大的ToDoMVC:https://github.com/tastejs/todomvc
angular-ajax-upload 指導性質的http://iffycan.blogspot.com.ar/2013/08/angular-ajax-upload .html
angular app https://github.com/angular-app/angular-app
Fun with AngularJS! http://devgirl.org/2013/03/21/fun-with-angularjs/
Angular指令及元件的全面範例https://github.com/angular-cn/ng-showcase
angular中的MVVM模式http://greengerong.github.io/blog/2015/06/16/angularzhong-de-mvvmmo-shi/
影片
阿里懶交會AngularJS專場http://www.imooc.com/view/203?utm_source=jobboleweibo
大漠窮秋講的AngularJS實戰http://www.imooc.com/learn/156
codeschool上的angular影片教學http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro
方案,效能
使用AngularJS建立大型Web應用程式http://www.infoq.com/cn/news/2013/02/angular-web-app
優化1200=>35(建議去看看官方站點,從文章來看,感觸不深ps:個人觀點) :http://blog.jobbole.com/51180/
模式指導:https://github.com/mgechev/angularjs-style-guide
angularjs-performance-with-large-listshttp: //tech.small-improvements.com/2013/09/10/angularjs-performance-with-large-lists/
angularjs-my-solution-to-the-ng-repeat-performance-problemhttp://www.williambrownstreet .net/blog/2013/07/angularjs-my-solution-to-the-ng-repeat-performance-problem/
angularjs-pitfalls-using-scopes http://thenittygritty.co/angularjs-pitfalls-using-scopespes
只綁定一次https://github.com/Pasvaz/bindonce
天豬的angular-lazyload
利用require.js動態載入路由檔案的庫angularAMD https://github.com/marcoslin/angularAMD
事件代理angularular -delegate-event
angular最佳實踐http://www.lovelucy.info/angularjs-best-practices.html
如何組織大型JavaScript應用程式中的程式碼? http://kb.cnblogs.com/page/176541/
databinding-in-angularjs http://stackoverflow.com/questions/9682092/databinding-in-angularjs/9693933#9693933
AngularJS Best Practices http://wwwctices http://www .artandlogic.com/blog/2013/05/ive-been-doing-it-wrong-part-1-of-3/
Best Practice Recommendations for Angular App Structure https://docs.google.com/document/d /1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub
Superspeed your angularjs apps http://orangevolt.blogspot.com/2013/08/ers;
為什麼我們的angular應用總是很慢http://www.zhex.me/blog/2013/11/22/why-out-angular-app-is-slow/
angular效能優化心得http://atian25. github.io/2014/05/09/angular-performace/
angular-debounce https://github.com/shahata/angular-debounce
基於AngularJS的企業軟體前端架構http://www.infoq.com/cn /news/2014/05/angularjs-front-end-architecture
angular data http://angular-data.pseudobry.com/
AngularJS風格指南(包含各翻譯版本) https://github.com/johnpapa/angular -styleguide
快速建立app angular-kickstart https://github.com/vesparny/angular-kickstart
動態載入controller https://github.com/DanWahlin/CustomerManager
透過少使用ng-controller來提升ng效能http: //teropa.info/blog/2014/10/24/how-ive-improved-my-angular-apps-by-banning-ng-controller.html以及該站其他關於ng文章
AngularJS風格指南2 https:/ /github.com/toddmotto/angularjs-styleguide
angularjs的資料綁定https://github.com/rchee/translation/blob/master/angularJS/databinding-in-angularjs.md
Create, read, update, delete MDB collections via AngularJS. https://github.com/Unitech/angular-bridge
Token-based AngularJS Authentication https://github.com/sahat/satellizer
Virtual Scroll for AngularJS ngRepeat directive https://github.com/kamilkpub. /angular-vs-repeat
元件(UI|module)類別
angular UI https://github.com/angular-ui
Bootstrap directives for Angular:https://github.com/mgcrea/angular-strap
Material design for Angular https://github.com/angular/material
angular lib,包含了“事件代理、dialog、上傳flow、圖片預覽imageViewer、進化版keydown(支持傳入keycode)、mousewheel、滾動加載、選擇內容selection”, https://github.com/dolymood/angularLib
xufei大神的ng-control
find modules for angular http://ngmodules.org/
原始碼分析
MVVM大比拼之AngularJS原始碼精析http://www.cnblogs.com/sskyy/p/3709649.html
前端原始碼分析http://www.html-js.com/article/column/693
xuwenmin的原始碼分析http://www.ifeenan.com/categories.html#angularjs-ref
其他精華
一個資源集錦:https://github.com/jmcunningham/AngularJS-Learning
2013年AngularJS學習資源精選http://blog.jobbole.com/54716/
2013年度最強AngularJS資源合集http://ngularJS資源合集www.iteye.com/news/28651-AngularJS-Google-resource
xuwenmin的angular合集http://www.ifeenan.com/categories.html#angularjs-ref
可以複製AngularJS資源集合http://www.csdn .net/article/2014-12-10/2823058-AngularJS
angular2
angular2 學習資源集錦:https://github.com/timjacobi/angular2-education
什麼是單頁應用程式
如果只是簡單的想拿一個單頁應用的話。你只要不用a跳轉頁面就好了,所有頁面內容的更換都用Ajax來取得。
我沒學過angularJS,不能給你關於angularJS的建議
這裡可以給你一個其他建議:
http://www.zhile.name/2.html
範例:http://m.shihj.com/
不借用框架的話,使用模板引擎是必要的,其次需要封裝一堆常用操作,還有就是內存問題稍微注意一下。
URL,SEO最好提前設計,否則之後會蛋痛。
url涉及瀏覽器前進後退,seo涉及你之後網站的訪問量
SPA說好做也好做,說難做也難做,SPA應用最重要的起點就是js邏輯架構,想要做出一個可以支撐起完整網站的單頁應用,架構的合理性和易用性是重點,網路上很多demo都不一定適用,建議先看一些backbone的單頁SPA應用,再回頭架構angular會輕鬆很多,起碼不會一頭霧水,附上我做過的backbone:無賊
還是得看你的需求,你有多少地方真的需要angular這麼複雜的東西嗎
其實一個東西怎麼實現都可以還是看適合不適合
Angular門檻不高
建議你看
Lynda - Up and Running with AngularJS
網路找找可以下載到