很久以前就聽人說起angularjs，但一直都沒有深入了解過。直到最近才在自己心裏有了一個準確的定義。和相濡以沫多年的函數庫JQuery相比，angular更像一個框架。對，就是一個框架，相比之下的話同樣是前端開發框架的Ext就應該是一個胖子，而angular就是一個瘦子。Ext提供了一套幾乎可以不寫Html和Css就能創造頁面的解決方案，除此之外還包括頁面的邏輯和數據處理方案。angular則只提供了頁面邏輯和數據處理的方案。也許和Ext相比它算是一個“不健全的”前端框架，但這也大大的提高了框架使用的靈活性。

我是怎麽入門的？

　　了解類似框架，最頭疼的是找不到好的突破口。很多時候我們都希望能看到一個簡單的案例，通過案例可以對框架有一個清晰的認識。在github上有個angular-seed的代碼庫，以一個最簡單的案例介紹了angular打開方式。附代碼地址:https://github.com/angular/angular-seed.git

　　悄悄的說一下，如果使用WebStorm做開發，在創建項目的時候可以選擇AngularJs，WebStorm會自動下載angular-seed。就像.Net程序員在創建MVC項目的時候VS會自動填充一些基礎代碼。

　　安裝好的項目結構如下：

　　項目介紹：

　　紅色框選部分是重點，新手可以忽略其他文件。

　　這是一個單頁應用，index.html是頁面入口，app.js是angularjs配置文件。

　　所以在訪問的時候我們應該訪問的是：http://xxx.xxx.xxx/index.html

　　components -- 資源文件夾（強迫癥患者可以重命名或將對應資源移動到其他文件夾下）

　　view -- 存儲視圖（內容頁）和 viewmodel（view.js） 。

　　　　　　view.js包含路由（頁面的訪問路徑配置）和控制器（controller）。

　　　　　　頁面中需要用到的變量等相關信息需要在controller中配置。

　　　　　　目前是空的

　　view1和view2分別存儲的是兩個視圖，運行後訪問index.html即可訪問。

重點照顧對象：

　　app.js

　　　　app.js中angular.model函數的第二參數是一個數組，這個數組裏列舉的內容便是整個項目運行時依賴內容，比如：view1.js，view1.js中定義的angular.model名稱為myApp.view1，可以將其理解為是view1.js這個模塊的命名空間，那麽在設置app.js的時候就需要加入這個命名空間。如果新建一個myApp.view10那麽app.js裏便需要加入對myapp.view10的引用。

　　　　除此之外app.js裏還設置了一個默認地址otherwise,這個有點404的感覺，當找不到對應頁面的時候就會跳轉到這個地址上，這裏默認的是view1。所以在訪問index.html的時候會直接訪問到view1.html。

　　　　請註意，app.js裏$routeProvider.otherwise({redirectTo:‘/view1‘})，這裏的/view1並不是view1.html，而是路由配置表裏的一個路徑/view1,而在view1.js中將這個路徑指向了view1.html。這兩者的對應關系是建立在頁面路由上的。

　　index.html

　　　　這是一個看似簡單卻暗藏玄機的頁面。首先是這一句<div ng-view></div>, ng-view指令表示，所有頁面都將在這裏展示,感覺就像老朋友iframe。

　　　　除此之外頁面上所需要的js資源都需要在這裏加載

關於Hello Word：

　　上效果~~

　　下面是對view1.html的修改和運行結果。

<p>This is the partial for view 1.</p>
<input type="text" ng-model="word">
<h3>{{word}}</h3>

　　js代碼呢？噢，對不起，我沒改js。是的，就這麽簡單，並不需要修改js文件。

　　這一點和knockout有點像（也許是knockout和angular有點像，至於誰先誰後就不去考究了，反正我是先用knockout）。代碼中的word是一個變量，我們將這個變量和input進行了綁定ng-model="word"然後再下面進行輸出{{word}}，如果要在js裏獲取就應該是這樣：

view1.js:

‘use strict‘;

angular.module(‘myApp.view1‘, [‘ngRoute‘])

.config([‘$routeProvider‘, function($routeProvider) {
  $routeProvider.when(‘/view1‘, {
    templateUrl: ‘view1/view1.html‘,
    controller: ‘View1Ctrl‘
  });
}])

.controller(‘View1Ctrl‘, [function() {
    var word= this.word;
}]);

在controller中使用this.word可獲取或設置頁面上的word的值。

接下來再叨叨一個常用的指令ng-repate。這次對view2進行如下修改，上圖文~~

view2.html：

<p>This is the partial for view 2.</p>


<h2>ng-repeat部分</h2>
<div ng-repeat="item in list">
  這是{{item}} 它的index是：{{$index}}
</div>

view2.js：

‘use strict‘;

angular.module(‘myApp.view2‘, [‘ngRoute‘])

.config([‘$routeProvider‘, function($routeProvider) {
  $routeProvider.when(‘/view2‘, {
    templateUrl: ‘view2/view2.html‘,
    controller: ‘View2Ctrl‘
  });
}])

.controller(‘View2Ctrl‘, [‘$scope‘,function($scope) {
    $scope.list=["item1","item2","item3","item4"];
}]);

js:

　　controller中對模塊的引用方式很特殊，在controller的第二個參數裏，前面是要引用的模塊名稱，最後一個元素是一個函數，函數裏的參數代表引用模塊。這裏的$scope(作用域，可以理解為程序上下文）它是angular應用程序中視圖（HTML）和控制器（JavaScript）之間的紐帶 ，主要是在控制器和頁面之間進行數據傳遞。所以我們可以把list傳遞到頁面中使用。 值得一提的是，當list內容發生變化的時候，頁面內容也會自動刷新。

html：

　　item指list中的元素，{{item}}是在頁面打印這個元素，item可以是字符串，對象，數組......，反正它可以很復雜。$index是當前循環的索引編號，等同for(var i=0....中的i。

到這裏大家對angularjs應該是有一個基本概念了。想要了解更多關於angulajs的控制器、內置指令等相關信息，請 百度 或 谷歌 一下。

AngularJs之初