angularJS學習筆記

最近公司項目需求中包含前端的部分，而我又是一個JAVA開發者，因此只能學一學所謂的angularJS。（學習框架關鍵在於學習思想）

將本身的學習總結寫在這裏，但願對廣大的開發者有做用。

一、angularJS其實嚴格來說，屬於angular 1.x版本。屬於angular的老版本前端框架。而2.x以上一般被稱爲angular，兩者沒有必然的父子集關係。

2.x版本採用TypeScript編寫。而1.x版本採用javascript編寫。

 

二、前端框架和函數庫（好比：jquery有）有什麼區別呢？

前端框架：定義了一種全局性的，結構型的解決方案。（使用起來結構緊湊，標準化）

函數庫：只是提供了一些工具，方便程序員使用而已。（結構鬆散，靈活）

 

三、angularJS的使用場景：Simple Page Application。單頁面應用。（好比，XXX後臺管理系統等）

 

四、如何使用：

（1）頁面中要引入angular.js。

（2）在html中使用ng-app指令標記angular控制的最大範圍。

（3）使用ng-bind指令或者{{}}表達式將模型中數據綁定到頁面中。

（4）使用ng-controller指令來劃定子範圍。

（5）編寫本身的js文件。（註冊模塊，註冊service，factory，value，provider，controller）

 

五、我相信看完上面的（1）~（5）的使用過程，對於初學者來講，你已經暈了，我會一項一項的來解讀。

（1）引入js，這個不須要解釋。

（2）在html中使用ng-app指令標記angular控制的最大範圍：

首先要理解，指令是angular對html的擴展，通常會以元素的屬性存在，angular會自動去讀取html，而後解析出這些指令。

因此ng-app指令是用來表示一個angular應用的最大做用範圍，若是你的操做不在這個範圍內，angularJS也沒法檢測到。

（3）使用ng-bind，ng-model指令或者{{}}表達式將模型中數據綁定到頁面中：

理解這一點，關鍵在於理解模型的概念。模型（$scope對象），是一個js對象，有angularJS建立，該對象的屬性和視圖（html）中

使用ng-bind或{{}}表示的地方進行雙向數據綁定，其中一方改變，則另外一方跟着改變。

（4）使用ng-controller指令來劃定子範圍：

例如：

// 如下代碼其實只是向angular註冊了模塊和控制器

var app = angular.module("myapp",[]);

app.controller("myCtrl1",["$scope",function($scope){

　　$scope.name = "zhaoyang";

}]);

// 而這個註冊的控制器匿名函數，將會被angular來進行new操做，產生一個控制器對象。

其實$scope就是模型，該對象是angular本身建立傳入到函數中的，因此也叫依賴注入。

（5）編寫本身的js文件。（註冊模塊，註冊service，factory，value，provider，controller）：

value註冊就是提供原始值或者原始對象的。

app.value("myValue",1000);

app.controller("myCtrl1",["$scope","myValue",function($scope,myValue){

　　$scope.name = "zhaoyang";

　　console.log(myValue);  //  打印出1000

}]);

factory註冊就是提供函數的返回值。

app.factory("myFactory",function(){

　　// 該函數將會被angular調用　　

　　return {

　　　　.....

　　};

　　// 這裏只是作了個演示，讓其返回一個對象。

});

service註冊就是提供函數做爲構造函數的返回對象。（也就是說其註冊的函數會被angular進行new操做產生一個對象）

app.service("myService",function(){

　　var obj = {};   // 造成返回對象中函數的閉包

　　.....

　　this.value = "1000";

　　.... 

});

 

provider註冊（比較特殊）

app.provider("myProvider",function(){

　　this.$get = function(){

　　　　return {}; // 相似於 factory的返回狀況

　　}

});