AngularJS 最常用的八種功能

第一 迭代輸出之ng-repeat標(biāo)簽

ng-repeat讓table ul ol等標(biāo)簽和js里的數(shù)組完美結(jié)合

<ul>
<li ng-repeat="person in persons">
{{person.name}} is {{person.age}} years old.
</li>
</ul>

你甚至可以指定輸出的順序：
<li ng-repeat="person in persons | orderBy:'name'">

第二 動(dòng)態(tài)綁定之ng-model標(biāo)簽

任何有用戶(hù)輸入缠劝，只要是有值的html標(biāo)簽告私，都可以動(dòng)態(tài)綁定js中的變量碎捺，

而且是動(dòng)態(tài)綁定坛梁。

<input type="text" ng-model='password'>

對(duì)于綁定的變量典徊，你可以使用{{}} 直接引用

<span>you input password is {{password}}</span>

如果你熟悉filter沟使，你可以很容易的按你的需要格式輸出

<span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>

第三 綁定點(diǎn)擊事件之ng-click事件

使用ng-click你可以很容易的為一個(gè)標(biāo)簽綁定點(diǎn)擊事件青扔。
<button ng-click="pressMe()"/>

當(dāng)然前提是你要在$scope域中定義的自己的pressMe方法晓猛。

和傳統(tǒng)的onclick方法不同栽连，你甚至可以為ng-click方法傳遞一個(gè)對(duì)象险领，就像這樣：

<ul>
<li ng-repeat="person in persons">
<button ng-click="printf(person)"/>
</li>
</ul>

當(dāng)然還有ng-dblclick標(biāo)簽

第四 分支語(yǔ)句之ng-switch on侨舆、ng-if/ng-show/ng-hide/ng-disabled標(biāo)簽

分支語(yǔ)句讓你在界面上都可以寫(xiě)邏輯判斷。

<ul>
<li ng-repeat="person in persons">
<span ng-switch on="person.sex">
<span ng-switch-when="1">you are a boy</span>
<span ng-switch-when="2">you are a girl</span>
</span>
<span ng-if="person.sex==1">you may be a father</span>
<span ng-show="person.sex==2">you may be a mother</span>
<span>
please input your baby's name:<input type="text" ng-disabled="!person.hasBaby"/>
</span>
<span>
</li>
</ul>

第五 校驗(yàn)語(yǔ)法之ng-trim ng-minlength ng-maxlength required ng-pattern 等標(biāo)簽

表單中的輸入框绢陌，你可以使用上面的標(biāo)簽來(lái)實(shí)現(xiàn)對(duì)用戶(hù)輸入的校驗(yàn)挨下。

從字面意思上你已經(jīng)知道了它們的意思。

<form name="yourForm">
<input type="text" name="inputText" required ng-trim="true" ng-model="userNum" ng-pattern="/^[0-9]*[1-9][0-9]*$/" ng-maxlength="6" maxlength="6"/>
</form>

你可以通過(guò)$scope.yourForm.inputText.$error.required 來(lái)判斷輸入框是否為空
你可以通過(guò) $scope.yourForm.inputText.$invalid 來(lái)判斷輸入的內(nèi)容是否滿(mǎn)足ng-pattern脐湾，ng-maxlength臭笆，maxlength
你通過(guò)$scope.userNum獲得的輸入內(nèi)容是去掉前后空白的，因?yàn)閚g-trim的存在秤掌。

第六 下拉框之ng-options標(biāo)簽

ng-options是為下拉框專(zhuān)門(mén)打造的標(biāo)簽愁铺。

<select ng-model="yourSelected" ng-options="person.id as person.name in persons"></select>
下拉框中顯示的是person.name，當(dāng)你選中其中一個(gè)的時(shí)候闻鉴，你可以通過(guò)yourSelected得到你選中的person.id.

第七 控制css之ng-style標(biāo)簽

ng-style幫你輕松控制你的css屬性

<span ng-style="myColor">your color</span>
你可以通過(guò)給myColor賦值的形式來(lái)改變你想要的效果茵乱，就像這樣：

$scope.myColor={color:'blue'};
$scope.myColor={cursor: 'pointer',color:'blue'};

第八 異步請(qǐng)求之$http對(duì)象。

AngularJS 提供了一個(gè)類(lèi)似jquery的$.ajax的對(duì)象孟岛，用于異步請(qǐng)求瓶竭。
在AngularJS中對(duì)異步操作是推崇至極的，所以$http的操作都是異步的不像jquery.ajax里還提供了async參數(shù)渠羞。

$http({method : 'POST',params : { id:123}, data:{name:'john',age:27}, url : "/mypath"})
.success(function(response, status, headers, config){
//do anything what you want;
})
.error(function(response, status, headers, config){
//do  anything what you want;
});

如果你是GET請(qǐng)求斤贰，params里的數(shù)據(jù)會(huì)幫你拼到url后面，data里的數(shù)據(jù)會(huì)放到請(qǐng)求體中次询。

Angular 七步走

AngularJS是一個(gè)MV*框架荧恍，最適合開(kāi)發(fā)客戶(hù)端的單頁(yè)面應(yīng)用。

• 不是功能庫(kù)屯吊，而是用來(lái)開(kāi)發(fā)動(dòng)態(tài)網(wǎng)頁(yè)的框架块饺。
• 專(zhuān)注于擴(kuò)展HTML的功能，提供動(dòng)態(tài)數(shù)據(jù)綁定（data binding）雌芽，而且它能跟其它框架（如jQuery）合作融洽授艰。

$scope

$scope是一個(gè)把view(一個(gè)DOM元素)鏈接到controller上的對(duì)象。
它將成為model,提供一個(gè)綁定到DOM元素上的excecution context.
是一個(gè)Javascript對(duì)象世落，controller和view都可以訪(fǎng)問(wèn)淮腾，利用它在兩者間傳遞信息。在$scope對(duì)象里屉佳，既存儲(chǔ)數(shù)據(jù)谷朝，又存儲(chǔ)將要運(yùn)行在view上的函數(shù)。

ng-controller

明確創(chuàng)建一個(gè)$scope 對(duì)象武花，就要給DOM元素安上一個(gè)controller對(duì)象圆凰，使用的是ng-controller 指令屬性：

<div ng-controller="MyController"> 
  {{ person.name }} 
</div> 

給所在的DOM元素創(chuàng)建了一個(gè)新的$scope 對(duì)象，并將這個(gè)$scope 對(duì)象包含進(jìn)外層DOM元素 的$scope 對(duì)象里体箕。

scope

這是個(gè)可以從DOM元素內(nèi)部直接訪(fǎng)問(wèn)的$scope 對(duì)象

app.controller('MyController', function($scope) { 
  $scope.person = { 
    name: "Ari Lerner" 
  }; 
}); 

<div ng-controller="MyController"> 
  {{ person.name }} 
</div> 

數(shù)據(jù)綁定

雙向數(shù)據(jù)綁定

“雙向”意味著如果view改變了屬性值专钉，model就會(huì)“看到”這個(gè)改變挑童，而如果model改變了屬性值，view也同樣會(huì)“看到”這個(gè)改變跃须。

文本輸入框綁定到person.name屬性——數(shù)據(jù)綁定的一個(gè)方向：從view到model

<div ng-controller="MyController"> 
  <input type="text" ng-model="person.name" placeholder="Enter your name" /> 
  <h5>Hello {{ person.name }}</h5> 
</div> 

客戶(hù)端后臺(tái)改變model站叼，這個(gè)改變自動(dòng)在view體現(xiàn)出來(lái)

app.controller('MyController', function($scope) {  
   $scope.person = { name: "Ari Lerner" };  
    var updateClock = function() {    $scope.clock = new Date();  };  
    var timer = setInterval(function() {    $scope.$apply(updateClock);  }, 1000);  
    updateClock();
}); 

<div ng-controller="MyController"> 
  <h5>{{ clock }}</h5> 
</div> 

Ajax

$http({
    method: 'JSONP',  
    url: 'http://api.openbeerdatabase.com/v1/beers.json?callback=JSON_CALLBACK'
})
.success(function(data, status, headers, config) {  
// data contains the response  
// status is the HTTP status  
// headers is the header getter function  
// config is the object that was used to create the HTTP request
})
.error(function(data, status, headers, config) {}); 

$http 服務(wù)是Angular.js的核心服務(wù)之一，它幫助我們通過(guò)XMLHttpRequest對(duì)象或JSONP與遠(yuǎn)程HTTP服務(wù)進(jìn)行交流菇民。
callback=JSON_CALLBACK 尽楔，Angular.js就會(huì)負(fù)責(zé)為你處理JSONP請(qǐng)求，將 JSON_CALLBACK 替換成一個(gè)合適的回調(diào)函數(shù)第练。

$http 服務(wù)是這樣一個(gè)函數(shù)：它接受一個(gè)設(shè)置對(duì)象阔馋，其中指定了如何創(chuàng)建HTTP請(qǐng)求；它將返回一個(gè)承諾（*參考JavaScript異步編程的promise模式）娇掏，其中提供兩個(gè)方法： success方法和error方法呕寝。

指令屬性——指令標(biāo)簽

“指令屬性”就是綁定在DOM元素上的函數(shù)，它可以調(diào)用方法驹碍、定義行為、綁定controller及$scope對(duì)象凡恍、操作DOM志秃，等

當(dāng)瀏覽器啟動(dòng)、開(kāi)始解析HTML（像平時(shí)一樣）時(shí)嚼酝，DOM元素上的指令屬性就會(huì)跟其他屬性一樣被解析浮还。
當(dāng)一個(gè)Angular.js應(yīng)用啟動(dòng)，Angular編譯器就會(huì)遍歷DOM樹(shù)（從有ng-app指令屬性的那個(gè)DOM元素開(kāi)始闽巩，如我們?cè)诒鞠盗械谝黄锼徇^(guò)的）钧舌，解析HTML，尋找這些指令屬性函數(shù)涎跨。
當(dāng)在一個(gè)DOM元素上找到一個(gè)或多個(gè)這樣的指令屬性函數(shù)洼冻，它們就會(huì)被收集起來(lái)、排序隅很，然后按照優(yōu)先級(jí)順序被執(zhí)行撞牢。

• ng-app
• ng-controller
• ng-model
• ng-bind
• ng-repeat
• {{ 表達(dá)式 }}
• <b ng-init='name = "Ari Lerner"'>Hello, {{ name }}</b>

Current counter: {{ counter }} ```

• ng-show和ng-hide指令

服務(wù)Service

每一個(gè)Serice對(duì)象只會(huì)被實(shí)例化一次（用$injector服務(wù))，主要負(fù)責(zé)提供一個(gè)接口把 特定函數(shù)需要的方法放在一起

Angular內(nèi)建了很多服務(wù)供我們?nèi)粘Ｊ褂檬逵@些服務(wù)對(duì)于在復(fù)雜應(yīng)用中建立自己的Services都是相當(dāng)有用的屋彪。
AngularJS讓我們可以輕松的創(chuàng)建自己的services，僅僅注冊(cè)service即可绒尊，一旦注冊(cè)畜挥，Angular編譯器就可以找到并加載他作為依賴(lài)供程序運(yùn)行時(shí)使用

常見(jiàn)的服務(wù):

• $http 服務(wù) AngularJS 中的一個(gè)核心服務(wù)，用于讀取遠(yuǎn)程服務(wù)器的數(shù)據(jù)婴谱。 服務(wù)向服務(wù)器發(fā)送請(qǐng)求蟹但，應(yīng)用響應(yīng)服務(wù)器傳送過(guò)來(lái)的數(shù)據(jù)
• $timeout 服務(wù) 類(lèi)似于window.setTimeout 函數(shù)
• $interval 服務(wù) 類(lèi)似window.setTimeout 函數(shù)
• $location 服務(wù)可以使用 DOM 中存在的對(duì)象躯泰，類(lèi)似 window.location 對(duì)象，但 window.location 對(duì)象在 AngularJS 應(yīng)用中有一定的局限性矮湘。是作為一個(gè)參數(shù)傳遞到 controller 中斟冕。如果要使用它，需要在 controller 中定義缅阳。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});

創(chuàng)建

1.最常見(jiàn)的創(chuàng)建方法就是用angular.module API 的factory模式

angular.module('myApp.services', []) 
  .factory('githubService', function() { 
    var serviceInstance = {}; 
    // 我們的第一個(gè)服務(wù) 
    return serviceInstance; 
  }); 

2.使用內(nèi)建的$provide service來(lái)創(chuàng)建service

即去定義一個(gè)service磕蛇。創(chuàng)建一個(gè)service就是簡(jiǎn)單的返回一個(gè)函數(shù)，這個(gè)函數(shù)返回一個(gè)對(duì)象十办。這個(gè)對(duì)象是在創(chuàng)建應(yīng)用實(shí)例的時(shí)候創(chuàng)建的（記住秀撇，這個(gè)對(duì)象是單例對(duì)象）

app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});

Routing

AngularJS 路由允許我們通過(guò)不同的 URL 訪(fǎng)問(wèn)不同的內(nèi)容。
通過(guò) AngularJS 可以實(shí)現(xiàn)多視圖的單頁(yè)Web應(yīng)用（single page web application向族，SPA）呵燕。
http://runoob.com/first/page
http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third

通過(guò) # + 標(biāo)記 實(shí)現(xiàn)

多視圖實(shí)現(xiàn)

• 通過(guò)ng-include指令把很多的模板整合在視圖中
• 把視圖打散成layout和模板視圖，然后根據(jù)用戶(hù)訪(fǎng)問(wèn)的特定的URL來(lái)顯示需要的視圖
• ng-view指令將告訴$routeProvider在哪里渲染模板
• 將在應(yīng)用中配置$routeProvider
• $routeProvider提供了兩種方法處理路由：when和otherwise件相。 方法when接收兩個(gè)參數(shù)再扭，第一個(gè)設(shè)置$location.path(). （直接用“//”也沒(méi)有問(wèn)題）;第二個(gè)參數(shù)是配置對(duì)象，這個(gè)可以包含不同的鍵

<header> 
  <h1>Header</h1> 
</header> 
<div class="content"> 
  <div ng-view></div> 
</div> 
<footer> 
  <h5>Footer</h5> 
</footer> 

angular.module('myApp', [])
.config(['$routeProvider', function($routeProvider) { 
  $routeProvider.when('/', { 
    controller: 'HomeController', 
    template: '<h2>We are home</h2>' 
  }) 
  .otherwise({redirectTo: '/'}); 
}]); 

AngularJS通過(guò)在$routeProvider($route服務(wù)的提供者)上聲明routes來(lái)實(shí)現(xiàn)上面的構(gòu)想

過(guò)濾器

1.在JavaScript中使用$filter服務(wù)來(lái)調(diào)用過(guò)濾器
2.自帶過(guò)濾器

• currency 格式化數(shù)字為貨幣格式夜矗。{{123 | currency}} 把數(shù)字格式化為貨幣123.00
• filter 從數(shù)組項(xiàng)中選擇一個(gè)子集泛范。
• lowercase 格式化字符串為小寫(xiě)。 {{ lastName | uppercase }}
• orderBy 根據(jù)某個(gè)表達(dá)式排列數(shù)組紊撕。
• uppercase 格式化字符串為大寫(xiě)罢荡。

app.controller('DemoController', ['$scope', '$filter', 
  function($scope, $filter) { 
  
    $scope.name = $filter('lowercase')('Ari'); 
}]); 

<li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
</li>

<li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
</li>