目錄
- 啰嗦一下
- 你問我答
- 目錄結構
- 壓縮
- 其他
啰嗦一下
最近在開發一個項目時，調研了一下AngularJS，發現這個框架功能很豐富，而且用起來也很方便，所以深入了解了一下，在此分享一下我的感悟。
AngularJS是一個MVVM框架，所謂MVVM框架，即：Model-View-ViewModel，通俗一點的解釋是：當數據發生變化時，框架自動進行數據綁定，自動更新頁面上的數據。
這一點可以說是非常“神奇”的功能，可以減少我們很多的工作量。把我們從復雜的DOM結構中解脫出來，用剩余的時間去干一點有用的事情。
試想一下，當你和女神談天說地，聊得不亦樂乎的時候，你突然發現自己的操作DOM的代碼有點問題，改來改去改了好久才把問題解決掉，再回頭和女神聊天，發現女神的笑容依舊那么美麗，但確是和隔壁使用AngularJS框架的王哥，這是多么悲傷場景啊！也許就在你修改代碼期間，一段美好的姻緣就隨風消逝了。這不能說是你們沒有緣分，而是你選錯了框架啊！
說了很多AngularJS的好話，也要澄清一點，沒有東西是完美的，AngularJS也有一些缺點，比如說，AngularJS自身框架的一些bug，不適合界面頻繁交互的場景（如：游戲類網站）等，好在現在的網站大部分都是CRUD型的應用，你可以放心用了。
下面我們就正式介紹一下AngularJS的相關知識點以及在項目中的應用，先進入到你問我答環節，看看群眾們有哪些疑惑。
你問我答
問： AngularJS 適合構建什么類型的應用？
答： AngularJS 適合做單頁面應用程序（SPA應用），但是需要注意的是，並不是一個項目只能有一個頁面應用，例如：做管理系統時，你可能需要為三種不同的賬戶提供三種不同的頁面入口，master、guest、friend，你可以創建三個頁面入口，每個頁面是一個應用，並提供相應的頁面入口即可。
問： 我以前做前端時，都是使用JQuery開發的，他們有什么區別嗎？
答： 有本質的區別，推薦你看一篇文章 jQuery開發者眼中的AngularJS
問： AngularJS不能做游戲網站，但是Jquery可以啊，這么說來AngularJS沒JQuery好用啊？
答： 如果你要是做游戲網站的話，你確實需要使用偏底層的JQuery，但是卻不能說哪個好不好用，場景不同，需求也就不同，使用的技術也不同。
問： 如果用了AngularJS，我之前使用的JQuery或JS插件是不是就不能用了啊？
答： 是的，他們不能同時使用，有一些JS插件通過修改可以在AngularJS中使用，如滑動插件iScroll，但是大多數插件都不行，如果你想實現一些效果，可以在網上找一找AngularJS的插件，很多插件都有相應的AngularJS實現，或者是兼容AngularJS的方法。
其他問題后期再收集整理，看一下項目規划的目錄結構把！
目錄結構
|-css
|-js
|-controllers
|-index
|-a.controller.js
|-b.controller.js
|--demo
|-directives
|-filters
|-services
|-main.config.js
|-main.route.js
|-templates
|-libs
目錄結構大概就是這樣的，過濾器放在filters中，指令放在directives中，服務放在services中，main.config.js創建本服務的module和監控路由變化的事件等,
angular.module('moduleApp', ["ngRoute", "ngTouch", "ngAnimate"]);
main.route.js中配置路由信息，如：
function Route($routeProvider) {
$routeProvider.when('/demo', {
templateUrl: 'a.html'
}).otherwise({
redirectTo: '/index'
});
}
控制器放在controllers中,在controllers中需要分成具體的功能，這樣防止在一個controllers有很多個js文件。
壓縮
當開發完項目時，你會發現，里面有好多個JS文件，每個文件的大小都不大，但是對於前端來說，會發起很多請求，影響性能，所以我們要對文件進行壓縮，可以使用gulp壓縮，具體的壓縮方法可以自己在網上查找，有很多文檔可以查找，壓縮后最常出現的問題是找不到所對應的依賴，AngularJS是通過參數名稱注入的，如果不手動添加依賴，壓縮之后就找不到對應的以來名稱，如果你按照我前一段時間發的規范Angularjs書寫規范開發的話,壓縮不會有什么問題。
手動添加依賴
angular
.module('app')
.controller('Dashboard', Dashboard);
Dashboard.$inject = ['$location', '$routeParams', 'common', 'dataservice'];
function Dashboard($location, $routeParams, common, dataservice) {
}
其他
一個項目中會遇到很多問題，只有自己一點點去嘗試，過一段時間會把項目中遇到的問題及解決辦法整理一下，供大家參考。
每個人都有自己擅長的做事方法，但是不能因為有一些我們不熟悉就不去接受它的思想