AngularJs之初

　　好久之前就聽人提及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的控制器、內置指令等相關信息，請 百度 或 谷歌 一下。