個人博客搭建完成，歡迎大家來訪問哦
黎默丶lymoo的博客
博主最近了解學習了一下angularJS，記錄一下心得給大家分享一下~
什么是AngularJS
AngularJS是一個為動態WEB應用設計的結構框架，提供給大家一種新的開發應用方式，這種方式可以讓你擴展HTML的語法，以彌補在構建動態WEB應用時靜態文本的不足，從而在WEB應用程序中使用HTML聲明動態內容。
AngularJS有5個主要核心特性
雙向數據綁定
實現了把model與view完全綁定在一起，model變化，view也變化，反之亦然。
模板
在AngularJS中，模板相當于HTML文件被瀏覽器解析到DOM中，AngularJS遍歷這些DOM，也就是說AngularJS把模板當做DOM來操作，去生成一些指令來完成對view的數據綁定。
MVVM
吸收了傳統的MVC設計模式但又不是傳統意義上的MVC，更接近于MVVM(Moodel-View-ViewModel)。
依賴注入
AngularJS擁有內建的依賴注入子系統，可以幫助開發人員更容易的開發，理解和測試應用。
指令
可以用來創建自定義的標簽，也可以用來裝飾元素或者操作DOM屬性。
AngularJS的特點
前后端分離，后端只需提供數據接口，路由，模板渲染等都在前端完成
html和js分離，展示和邏輯分離
減少JS代碼，減少DOM元素查找，事件綁定等代碼
適合API開發
AngularJS的一些簡單使用方式
首先在頁面引入angular.js文件！
AngularJS有一套完整的、可擴展的、用來幫助web應用開發的指令集，它使得HTML可以轉變成“特定領域語言(DSL)”，是用來擴展瀏覽器能力的技術之一，在DOM編譯期間，和HTML關聯著的指令會被檢測到，并且被執行，這使得指令可以為DOM指定行為，或者改變它。
AngularJS通過稱為指令的新屬性來擴展的HTML，帶有前綴ng-，我們也可以稱之為“指令屬性”，它就是綁定在DOM元素上的函數，可以調用方法、定義行為、綁定controller及$scope對象、操作DOM，等等。
AngularJS指令指示的是“當關聯的HTML結構進入編譯階段時應該執行的操作”，它本質上只是一個當編譯器編譯到相關DOM時需要執行的函數，可以寫在元素的名稱里，屬性里，css類名里，注釋里。
當瀏覽器啟動、開始解析HTML時，DOM元素上的指令屬性就會跟其他屬性一樣被解析，也就是說當一個Angular.js應用啟動，AngularJS編譯器就會遍歷DOM樹來解析HTML，尋找這些指令屬性函數，在一個DOM元素上找到一個或多個這樣的指令屬性函數，它們就會被收集起來、排序，然后按照優先級順序被執行。
Angular.js應用的動態性和響應能力，都要歸功于指令屬性，常見的有：ng-app、ng-init、ng-model、ng-bind、ng-repeat等等。
ng-app
ng-app指令來標明一個AngularJS應用程序，并通過AngularJS完成自動初始化應用和標記應用根作用域，同時載入和指令內容相關的模塊，并通過擁有ng-app指令的標簽為根節點開始編譯其中的DOM。
引用方法很簡單，如下所示：
<div ng-app>
</div>
如上引用，一個AngularJS應用程序初始化就完成了并標記了作用域，也就是div元素就是AngularJS應用程序的”所有者”，在它里面的指令也就會被AngularJS編譯器所編譯、解析了。
ng-init
ng-init指令初始化應用程序數據，也就是為AngularJS應用程序定義初始值，通常情況下，我們會使用一個控制器或模塊來代替它，后面我們會介紹有關控制器和模塊的知識。
如下所示，我們為應用程序變量name賦定初始值。
<div ng-app=“” ng-init=“name=‘zhangsan’”>
</div>
我們不僅可以賦值字符串，也可以賦值為數字、數組、對象，而且可以為多個變量賦初始值，如下所示：
<div ng-app=“” ng-init=“width=3;length=5”>
</div>
ng-model
在AngularJS中，只需要使用ng-model指令就可以把應用程序數據綁定到HTML元素，實現model和view的雙向綁定。
如下示例，使用ng-model指令對數據進行綁定。
<div ng-app=“”>
請輸入任意值：<input type=“text” ng-model=“name”>
你輸入的為： {{ name }}
</div>
ng-model把相關處理事件綁定到指定標簽上，這樣我們就可以不用在手工處理相關事件(比如change等)的條件下完成對數據的展現需求。
以上介紹了ng-model的單向綁定(view->model)后面控制器我們會用到它的雙向綁定功能。
ng-model原理
angularJS加載完成之后會啟動，首先找 ng-app指令
找到后認為ng-app里面的所有的內容都歸angularJS來管
找子層標簽里所有的指令，然后就可以找到ng-model
找到后會生成數據模型，然后掛在根作用域上面。
然后下面所有的標簽都可以讀取ng-model的值。
ng-bind
指令ng-bind和AngularJS表達式有異曲同工之妙，但不同之處就在于ng-bind是在angularJS解析渲染完畢后才將數據顯示出來的。
如下使用ng-bind指令綁定把應用程序數據。
<div ng-app=“”>
請輸入一個名字：<input type=“text” ng-model=“name”>
Hello <span ng-bind=“name”></span>
</div>
PS：使用花括號語法時，因為瀏覽器需要首先加載頁面，渲染它，然后AngularJS才能把它解析成你期望看到的內容，所以對于首個頁面中的數據綁定操作，建議采用ng-bind，以避免其未被渲染的模板被用戶看到。
ng-click
AngularJS也有自己的HTML事件指令，比如說通過ng-click定義一個AngularJS單擊事件。
對按鈕、鏈接等，我們都可以用ng-click指令屬性來實現綁定，如下簡單示例：
<div ng-app=“” ng-init=“click=false”>
<button ng-click=“click= !click”>隱藏/顯示</button>
<div ng-hide=“click”>
請輸入一個名字：<input type=“text” ng-model=“name”>
Hello <span ng-bind=“name”></span>
</div>
</div>
PS：ng-hide=“true”，設置HTML元素不可見。
ng-click指令將DOM元素的鼠標點擊事件(即mousedown)綁定到一個方法上，當瀏覽器在該DOM元素上鼠標觸發點擊事件時，AngularJS就會調用相應的方法。
ng-repeat
ng-repeat指令，遍歷一個數據集合中的每個數據元素，并且加載HTML模版把數據渲染出來，當我們要向HTML容器節點中添加更多類似DOM元素的時候，使用ng-repeat是再好不過了。
ng-repeat指令對于集合中(數組中)的每一項都會渲染一次HTML元素。
例1:
<body ng-app=“” ng-init=“arr=[‘3’,’5’,’9’]”>
<ul>
<li ng-repeat=“x in arr”>{{x}}</li>
</ul>
</body>
例2:
<body ng-app=“” ng-init=“obj={‘user’:’zhangsan’,’pass’:’12345’,’sex’:’man’}”>
<table border=“1”>
<tr ng-repeat=“(key,value) in obj”>
<td>{{key}}</td>
<td>{{value}}</td>
</tr>
</table>
</body>
ng-class
ng-class是AngularJS預設的一個指令，用于動態自定義dom元素的css class name
<head>
<meta charset=“utf-8”>
<title></title>
<style type=“text/css”>
.active{
color: red;
}
.inactive{
color: green;
}
</style>
<script src=“angular.min.js” type=“text/javascript” charset=“utf-8”></script>
</head>
<body ng-app=“” ng-init=“isActive=false”>
<input type=“text” ng-model=“name1” />
<input type=“text” ng-model=“name2” />
<div ng-class=“{true:’active’,false:’inactive’}[isActive]”>
{{name1 +” “+ name2}}
</div>
</body>
ng-include
ng-include就是將多個頁面的公共頁面提取出來，如header.html，footer.html等，在每個頁面用
<div ng-include=“’header.html’”></div>
來引入。
**注意: **
必須用web容器打開站點才能成功，用本地文件的模式訪問會報錯
ng-include的值是如果要寫為文件名的話需要加單引號，否則會被當作一個變量來處理。
自定義指令
控制器scope
AngularJS控制器控制AngularJS應用程序的數據，是常規的JavaScript對象。
ng-controller指令就是用來定義應用程序控制器的，并且同時創建了一個新的作用域關聯到相應的DOM元素上。
所謂作用域就是一個指向應用模型的對象，它是表達式的執行環境，作用域有層次結構，這個層次和相應的DOM幾乎是一樣的，作用域能監控表達式和傳遞事件并且可以從父作用域繼承屬性。
每一個AngularJS應用都有一個絕對的根作用域。但也可能有多個子作用域。 一個應用可以有多個作用域，因為有一些指令會生成新的子作用域，當新作用域被創建的時候，他們會被當成子作用域添加到父作用域下，這使得作用域會變成一個和相應DOM結構一個的樹狀結構。
控制器上的屬性
現在我們就用ng-controller指令來創建一個簡單的控制器定義，如下所示：
<div ng-app=“” ng-controller=“MyController”>
請輸入一個名字：<input type=“text” ng-model=“person.name”>
Hello <span ng-bind=“person.name”></span>
</div>
<script>
function MyController ($scope) {
$scope.person = {
name: “zhangsan”
};
}
</script>
如上所述，我們通過ng-controller指令創建了一個JavaScript對象 —— MyController并帶有name屬性，那參數$scope是什么呢，代表什么意思呢。
現在我們就來解答MyController對象參數 —— $scope。
$scope就是把一個DOM元素連結到控制器上的對象，它提供一個綁定到DOM元素(以及其子元素)上的執行上下文。它也是一個JavaScript對象，指向應用程序作用域內的所有HTML元素和執行上下文。
要明確創建一個$scope對象，我們就要給DOM元素安上一個controller對象，使用的是ng-controller 指令屬性。
所有$scope都遵循原型繼承，這意味著它們都能訪問父$scope們,對任何屬性和方法，如果AngularJS在當前$scope上找不到，就會到父$scope上去找，如果在父$scope上也沒找到，就會繼續向上回溯，一直到$rootScope上，這個$rootScope是最頂級的$scope，它對應著含有 ng-app指令屬性的那個DOM元素，也就是說根作用域關聯的DOM就是ng-app指令定義的地方。
也就是說，擁有了$scope，我們就可以操作作用域內任何我們想要獲取的對象數據。
控制器上的方法
控制器不僅聲明屬性也可以聲明方法，如下所示：
<div ng-app=“” ng-controller=“MyController”>
名稱:
<input type=“text” ng-model=“username”>
<button ng-click=“sayHello()”>打招呼</button>
<hr>
{{greeting}}
</div>
<script>
function MyController($scope) {
$scope.username = ‘zhangsan’;
$scope.sayHello = function() {
$scope.greeting= ‘Hello ‘ + $scope.username + ‘!’;
};
}
</script>
注意事項
不要試圖去復用controller,一個控制器一般只負責一小塊視圖
不要在controller中操作DOM，這不是控制器的職責，是指令的職責。
不要在controller里做數據格式化，ng有很好用的過濾器實現此功能。
不要在controller里面做數據過濾操作，ng有$filter服務
一般來說，controller是不會互相調用的，控制器這間的交互是通過事件進行的。
創建指令
指令定義對象的常用屬性如下：
template : string
使用template指定的HTML標記替換指令內容（或指令自身）
restrict : string
用來限定指令在HTML模板中出現的位置。
replace : true|false
使用這個屬性指明template的替換方式。
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body ng-controller="testController">
<text-directive></text-directive>
</body>
AngularJS的服務
AngularJS提供了一些功能的封裝，但是當你試圖通過全局對象angularJS去 訪問這些功能時，卻發現與以往遇到的庫大不相同。
$http
比如，在jQuery中，我們知道它的API通過一個全局對象：$ 暴露出來，當你需要 進行ajax調用時，使用$.ajax()就可以了。這樣的API很符合思維的預期。
AngularJS也暴露了一個全局對象：angularJS，也對ajax調用進行封裝提供了一個 $http對象，但是，但是，當你試圖沿用舊經驗訪問angular.$http時，發現不是 那么回事！在angularJS中是以一個參數的形式傳遞到控制器中，如果要使用它，需要在 controller 中定義。
$http服務
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular-sanitize.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<span ng-bind-html="content"></span>
</div>
</body>
<script type="text/javascript">
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function ($scope, $http) {
$http.get("content.html").success(function (res) {
$scope.content = res;
})
});
</script>
定時器
var app = angular.module(“myApp”,[]);
app.controller(“myCtrl”,function ($scope,$timeout){
$timeout(function (){
alert(‘a’);
},2000);
});
var app = angular.module(“myApp”,[]);
app.controller(“myCtrl”,function ($scope,$interval){
//循環定時器
$interval(function (){
alert(‘a’);
},2000);
});
## 模仿百度搜索功能
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div ng-app="myApp" ng-controller="myController">
<input type="text" ng-model="wd" ng-change="change()">
<ul>
<li ng-repeat="item in query">{{item}}</li>
</ul>
</div>
</body>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-sanitize.js"></script>
<script>
var app = angular.module("myApp", ["ngSanitize"]);
function myControllerCb ($scope, $http) {
$scope.wd = "";
$scope.change = function () {
$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+$scope.wd+"&cb=JSON_CALLBACK").then(function (res) {
console.log(res.data);
$scope.query = res.data.s;
});
}
}
app.controller("myController", myControllerCb);
</script>
</html>
AngularJS過濾器
過濾器可以使用一個管道字符（|）添加到表達式和指令中。
currency——格式化數字為貨幣格式。
filter——從數組項中選擇一個子集。
lowercase——格式化字符串為小寫。
orderBy——根據某個表達式排列數組。
uppercase——格式化字符串為大寫。
例1(格式化數字為貨幣格式):
<body ng-app=“myApp”>
<div ng-controller=“myCtrl”>
<span>相乘</span>
<input type=“text” ng-model=“num1” />
<input type=“text” ng-model=“num2” /><br />
<!—currency:”￥” 中文—>
結果為：{{myFn() | currency}}
</div>
</body>
<script type="text/javascript">
var app = angular.module(“myApp”,[]);
app.controller(“myCtrl”,function ($scope){
$scope.num1=5;
$scope.num2=10;
$scope.myFn = function (){
return $scope.num1*$scope.num2;
}
});
</script>
例2(字體大小轉換):
<body ng-app=“”>
<div>
<!—{{‘HelloWorld’ | lowercase}}—>
{{‘HelloWorld’ | uppercase}}
</div>
</body>
例3(篩選):
<body ng-app=“” ng-init=“arr=[‘tangcaiye’,’zhangsan’,’lisi’]”>
搜索：<input type=“text” ng-model=“name” />
<ul>
<li ng-repeat=“x in arr | filter:name”>{{x}}</li>
</ul>
</body>
例4(篩選加排序):
<body ng-app=“myApp”>
<div ng-controller=“myCtrl”>
<ul>
<li ng-repeat=“x in friends |filter:’a’ | orderBy:order:true”>{{x}}</li>
</ul>
</div>
</body>
<script type=“text/javascript”>
var app = angular.module(“myApp”,[]);
app.controller(“myCtrl”,function ($scope){
$scope.friends = [{name:’John’, phone:’555-1212’, age:21},
{name:’Mary’, phone:’555-9876’, age:19},
{name:’Mike’, phone:’555-4321’, age:10},
{name:’Adam’, phone:’555-5678’, age:35},
{name:’Julie’, phone:’555-8765’, age:29}];
$scope.order=“phone”;
});
</script>
