Angularjs 初步使用總結
背景
在最近的一個管理后臺的項目中，決定用angularjs去試一下水，后臺采用express4.0的node來寫，前端就直接用angularjs來實現。第一次邊學邊用，這里記錄下使用過程中的心得。
開發思路
1、首先url的定位到了指定的html頁面。
Angularjs比較適合做SPA，所以在express中只需要把地址指導制定的html頁面就好，其余的接口，全部都是面向數據即可。
router.get('/', (req, res) => res.sendfile(path.join('public', 'views', 'index.html'))); 在index.html頁面中首先引入angularjs，之后再根據需要，將對應的js文件引入。
2、定義Anguarjs module。
- 依賴注入已經初始化好的對象。
var myMod = angular.module('myMod',['ngRoute', 'ngAnimate']); Angularjs依賴注入機制對應的服務都需要唯一的名字，上述的舉例的兩個一個是路由管理，一個是動畫實現，這些都需要我們單獨引入 angular-animate.js , angular-route.js 文件。有很多服務都是已經實現的，也比較通用的，例如關于angularjs ui的模塊，可以去 Angularjs ui 查找對應的服務。
Angularjs中建議我們一個app對應一個module，而module將會對應很多controller （controller 只在需要的時候才會初始化，一旦不需要就會被拋棄），所以這里的module就像一個全局變量一樣，將屬于angularjs的內容全部控制在module之下。
3、定義service, controller
- 單單向moudule中注入已經存在的對象，顯然無法滿足我們的需求，我們需要依賴注入我們自定義的service 。
- controller就是不同的業務的邏輯代碼處理存放的位置。這里建議一個子頁面對應一個controller
//用factory定義service
myMod.factory('formatDate', function() {
var service = {};
service.method1 = function(){};
return service;
});
//定義controller，并在其中使用上面定義的service
myMod.controller('CtrlName', function($scope, formatDate) {
$scope.data = {};
formatDate.method1();
}); angularjs不同頁面的邏輯，都會集中在頁面所對應的controller中，但是有很多是公用的邏輯，就需要我們抽象出來。這里，Angularjs提供了三種方法創建并注冊我們自己的 service： Factory , Service , Provider 。 Factory , Service , Provider 區別其實并不大，Providers 是唯一一種你可以傳進 .config() 函數的 service。當你想要在 service 對象啟用之前，先進行模塊范圍的配置，那就應該用 provider 。關于具體的區別，感興趣的可以查詢下。
4、定義filter
- 過濾器，angularjs自帶了很多過濾器，使用的時候只需要在模版中類似于 {{ 5.6 | currency }} ,顯示的就是$5.60，這里currency是自帶的過濾器，用來給數字加上美元符號，開發中我們用到最多的就是date過濾器。
//定義filter，這里同樣可以注入我們自己定義的服務
myMod.filter('filterName', function(){
//返回函數，參數就是壓力過濾的值
return function(input){
var a = {
1:"帥哥",
2:"美女",
3:"未知"
};
return a[input];
}
}) 這樣我們使用的時候 {{ 1 | filterName }} 返回的值就是帥哥了。所以有很多操作我們就可以定義在filter中，會大大的精簡模版的代碼量，也便于代碼的管理。
5、定義route
- 之前提到過，controller就是不同的業務的邏輯代碼處理存放的位置。這里建議一個子頁面對應一個controller。
mymod..config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/page1', {
templateUrl: 'views/page1.html',
controller: 'CtrlName'
})
.otherwise({
redirectTo: '/page1'
});
}); 這里when中的第一個參數代表路徑，例如訪問localhost/index，則當地址為localhost/index#/page1的時候，就會匹配到第一條路由，進而通過page1.html 和 CtrlName生成頁面，返回給瀏覽器。當所有的when中的地址都無法匹配時，觸發otherwise中的地址。 這里when中的地址可以加上 /page1/:id ，則就可以匹配 #/page/2 的請求了，這時候2的值就存在了 $routeParams.id 中了。
6、寫頁面
- 頁面的寫法，因為是單頁面應用，所以必然入口就是index頁面，在index.html中引用自己需要的各個js文件。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>秩序管理后臺</title>
<script src="/assets/js/angularjs/angular.js"></script>
<!--這里后續再把之前定義的moudle，route，service，filter， controller引用進來，注意要首先引用moudle定義的js文件。>
</head>
<body ng-app="myMod">
<div ng-view></div>
</body>
</html> 頁面加載的同時，就會生成對應的moudle對象，已經定義的各個route，service，filter， controlle。當我們訪問地址的時候，會根據 ng-app 中的moudle，就會根據匹配到route中的地址，來填充 <div ng-view></div> 中，觸發對應的controller，生成html。
7、文件布局
- 寫到這里，文件的布局也就基本明了了。
整個前端的目錄放在public中：
- assets，用于存放使用的靜態資源，比如引入的各個angularjs服務，bootstrap等。
- controllers，用于存放定義的controller。
- data，用于存放配置的數據。
- filter，用于存放自定義的過濾器。
- routers， 用于存放定義的路由器。 -views，用于存放模版的html文件。
寫在最后
很多時候我們必須要在寫代碼前就清晰的把握好該如何架構。清晰的目錄和代碼思路會讓我們無論是新開發還是添加修改功能都事半功倍。 此文章主要是簡單的介紹了自己在使用angularjs的時候整個的開發思路，很多細節上的東西并沒有去介紹，總的來說angularjs在面對比較多的數據操作的單頁面還是很方便的很強大的，這也是MVVM框架自身的優勢。 end~