最近對AngularJs產生了濃厚的學習興趣，於是便搜羅所有資料，開始學習起來，也希望把學習過程記錄下來。
首先學習之前，需要對AngularJs進行個大概的了解：
AngularJS[1] 誕生於2009年，由Misko Hevery 等人創建，后為Google所收購。是一款優秀的前端JS框架，已經被用於Google的多款產品當中。AngularJS有着諸多特性，最為核心的是：MVVM、模塊化、自動化雙向數據綁定、語義化標簽、依賴注入等等。
AngularJS使用了不同的方法，它嘗試去補足HTML本身在構建應用方面的缺陷。AngularJS通過使用我們稱為標識符(directives)的結構，讓瀏覽器能夠識別新的語法。例如：
使用雙大括號{{}}語法進行數據綁定；
使用DOM控制結構來實現迭代或者隱藏DOM片段；
支持表單和表單的驗證；
能將邏輯代碼關聯到相關的DOM元素上；
能將HTML分組成可重用的組件。
AngularJS主要考慮的是構建CRUD應用，不適合游戲，圖形界面編輯器，這種DOM操作很頻繁也很復雜的應用。
就不寫hello world的程序例子，直接先展現一個項目目錄，這樣對一個項目的構建才有所眉目，不至於無從下手，覺得angular.js官方給的phonecat項目是值得學習的，js文件目錄主要如下圖：
js文件目錄：
一、app.js 項目的配置文件，路由的配置，模塊的依賴可以寫在這里。demo：
var phonecatApp = angular.module('phonecatApp', [ 'ngRoute', 'phonecatAnimations',
'phonecatControllers', 'phonecatFilters', 'phonecatServices','phonecatDirectives']);
//路由
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',//模板的相對路徑
controller: 'PhoneListCtrl' //使用的控制器名
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);
//使用angular.moudle('
phonecatApp',[...])進行模塊化，
phonecatApp 就是ng－app的值，ng－app指的是從擁有該指令的html標簽開始，將整個控制權交給angular.js去管理，［...］是對模塊的依賴，通俗地講，就比如［］里面的 'phonecatControllers'，那么之后在controller.js（后面有講）就可以直接
var phonecatControllers = angular.module('phonecatControllers', []); //'phonecatControllers'此處在app.js有進行模塊依賴了，所以這里就這樣寫
phonecatControllers.controller("控制器名",function($scope){...})
以往的套路是這樣的，
var phonecatApp = angular.moudle("phonecatApp",[]);
然后phonecatApp.controller("控制器名",function(){...})，這樣的話那么我們指令、服務、過濾器都需要寫在同一個js文件。當然也是可以沒有錯的，但是把所有js代碼寫在同一個js文件里面，太臃腫了，管理起來也難！
路由的設置也在這里寫，路由的知識以后再詳細講，這里只是講整個項目的目錄。
二、controller.js 項目的控制器文件，所有控制器寫在這里。demo：
var phonecatControllers = angular.module('phonecatControllers', []);
phonecatControllers.controller("控制器名",['$scope' ,'$http',function($scope,$http){...}]);
三、services.js 項目的服務文件，根據angualr的依賴注入機制，可以自己寫服務，然后在寫控制器代碼時傳入，如：phonecatControllers.controller("控制器名",['$scope' ,'myservice',function($scope,myservice){...}]);
myservice是自定義的服務，這樣就可以注入，在不同控制器調用同個業務（引入$http等來異步獲取數據，因為不同控制器操作的源是一樣的，所以可以封裝成一個服務供調用），可以使用自定義服務來進行封裝，供不同控制器注入調用，盡量不要使用$命名，以免沖突出現錯誤。demo：
var phonecatServices = angular.module('phonecatServices', [...]); //同上所述，［...］為依賴
phonecatServices.factory('Phone', function(){
return ['1882345555','123453222'];
});
編寫服務js，分別有factory、provider、service方法，這里使用factory，這樣的話在controller.js寫控制器的時候，就可以注入使用了，上面有闡述了。
四、filters.js 項目過濾器文件，看過大概看了一下angular.js內置的一些過濾器（如date、curreny等，因為是初學，所有只是大概看了一下，之后會繼續學習深入的），那往往是不夠用的，往往我們需要自己自定義一些過濾器，這樣的話我們就可以在我們的模板文件（.html）中引入了，如<input ng-model='xxx' type="text"
onlyNum />或是<span>{{XxXX |
touuper }}</span>,onlyNum（限制只能輸入數字）、touuper（轉換成大寫字母）就是我們自定義的過濾器。demo：
var phonecatFilter = angular.module('phonecatFilters', []); //同上所述，［...］為依賴
phonecatFilter.filter('touuper', function() {
return function(input) {
return input.toUpperCase();
};
});
五、directives.js 項目的指令文件，這里寫的是項目中，我們自己自定義的標簽，制定的標簽可以引入到模板文件里面使用，其代表含義，我們在directives.js中去定義，這個也是angualr.js比較有特點的功能，原本的html標簽已經很豐富的了，但是這樣的自定義標簽可以使htmldom結構中更能自定義話，ng-*就是指令，可以去打開源碼去看，它們都會被編譯我們熟悉的屬性、html標簽，而指令有着四種形式AEMC,分別是attrs、element、注釋、class，demo：
angular.module('phonecatDirectives', []).directive("hello", function() {
return {
scope: {} ,//是否具有獨立作用域
restrict: 'AEMC', //定義類型
template: '<div>Hi everyone!</div>', //模板
replace: true //是否替換原來的節點
link: function(scope,element,attrs,[controller]){
//定義指令的行為，如果不需要則不需引入
}
compile:function(){
//編譯指令時的函數
}
templateUrl: "" //模版路徑
}
});
總結：這里主要講了，一個angualr項目的基本目錄，方便之后去創建一個項目，不會說沒有思路，這里的js文件主要有，app.js、controllers.js、services.js、filters.js、directives.js，分別是基本配置、控制器、服務、過濾器、指令，在配合模版（.html）使用,實現mvc模式的設計思路，之后每一分塊會繼續學習，繼續深入，然后記錄下來，在這里先講目錄。這確實是一門很有前途的技術，會好好學習的！