隨說：
筆者只是將 《AngularJS權(quán)威教程》這本書讀了一遍报辱，并且將里面能列舉的內(nèi)容用自己的話理解了一遍然后整理出來，編寫順序是按書本順序作整理
1、 AngularJS數(shù)據(jù)綁定#
- 引入angular.js
- 在某個DOM元素上，明確設(shè)置ng-app屬性（只有被ng-app屬性的DOM元素區(qū)域才會受AngularJS影響）
- ng-model屬性是AngularJS的一個指令，將內(nèi)部數(shù)據(jù)模型對象的name綁定到文本輸入字段上
- 數(shù)據(jù)綁定的格式{{ name }}
<!DOCTYPE html>
// 設(shè)置ng-app屬性
<html ng-app>
<head>
<title>Simple app</title>
// 引入JS
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</script>
</head>
<body>
// 可以這樣理解紊婉，設(shè)置該DOM元素value值的KEY為name,然后可以通過{{ key }} , 獲取該value
<input ng-model="name" type="text" placeholder="Your name">
// 綁定數(shù)據(jù)
<h1>Hello {{ name }}</h1>
</body>
</html>
再看一個例子
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
</head>
<body>
// DOM元素上 ng-controller 聲明所有被它包含的元素都屬于某個控制器。
<div ng-controller="MyController">
// 這里的{{clock}} 就是相當(dāng)于這個值 $scope.clock 辑舷， 也就是Date()函數(shù)的范圍值
<h1>Hello {{ clock }}!</h1>
</div>
<script type="text/javascript">
// MyController 函數(shù)接收了兩個參數(shù)喻犁， $scope , $timeout
function MyController($scope, $timeout) {
var updateClock = function() {
$scope.clock = new Date();
$timeout(function() {
updateClock();
}, 1000);
};
updateClock();
};
</script>
</body>
</html>
2、AngularJS模塊#
AngularJS模塊是定義應(yīng)用的最主要方式何缓，模塊包含了主要的應(yīng)用代碼株汉，一個應(yīng)用可以包含多個模塊，每一個模塊都包含了定義具體功能的代碼
模塊定義代碼 ：
// 第一個參數(shù) ： 模塊名稱
// 第二個參數(shù) ： 依賴列表
angular.module('name', []);
3歌殃、AngularJS作用域 - $scope#
4乔妈、AngularJS控制器#
AngularJS的控制器是一個函數(shù)，用來向視圖的作用域$scope中添加額外的功能氓皱。我們用它來給作用域?qū)ο笤O(shè)置初始狀態(tài)路召，并添加自定義行為。
新建一個js文件波材。（一般以業(yè)務(wù)命名）
例如下面 app.js
在app.js下寫上以下代碼
// 定義一個名字為app的 模塊股淡。
var app = angular.module('app', []);
// 創(chuàng)建一個新的控制器，AngularJS會生成并傳遞一個新的$scope給這個控制器廷区，
app.controller('FirstController', function($scope) {
// 定義一個成員message并初始化值為“hello”
$scope.message = "hello";
});
AngularJS允許在$scope上升至包括對象在內(nèi)的任何類型的數(shù)據(jù)唯灵，并且在視圖中還可以展示對象的屬性。
例如 ：
var app = angular.module('myApp', []);
// 創(chuàng)建一個名字叫MyController的控制器
app.controller('MyController', function($scope) {
// 在MyController上創(chuàng)建一個person對象隙轻，并為這個對象創(chuàng)建一個名字為name 的屬性埠帕，初始化值為Ari Lerner
$scope.person = {
name: 'Ari Lerner'
};
});
<div ng-app="myApp">
// 在擁有ng-controller="MyController"的DOM元素內(nèi)，或者任何子緣故中玖绿，都可以訪問person對象敛瓷，因為它是定義在$scope上的。
<div ng-controller="MyController">
<h1>{{ person }}</h1>
and their name: <h2>{{ person.name }}</h2>
</div>
</div>
控制器之間還可以嵌套斑匪，請看以下例子###
先創(chuàng)建兩個控制器
app.controller('ParentController', function($scope) {
$scope.person = {greeted: false};
});
app.controller('ChildController', function($scope) { $scope.sayHello = function() {
$scope.person.name = 'Ari Lerner'; };
});
下面是實現(xiàn)呐籽，將ChildController嵌套于ParentController內(nèi)部，那childController的$scope對象的父級作用域就是ParentController的$scope對象。
我們可以在子作用域中狡蝶，訪問ParentController父作用域的內(nèi)容庶橱。
<div ng-controller="ParentController">
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say hello</a>
</div>
{{ person }}
</div>
在ChildController并沒有定義person對象，可是卻可以訪問出對象贪惹，這就是控制器的嵌套關(guān)系苏章，當(dāng)子作用域中不存在對象時，會自動往上找馍乙，根作用域是rootScope
關(guān)于嵌套作用域之間，對象中的值的關(guān)系
// HTML代碼
<div ng-controller="SomeController">
{{ someBareValue }}
<button ng-click="someAction()">Communicate to child</button>
<div ng-controller="ChildController">
{{ someBareValue }}
<button ng-click="childAction()">Communicate to parent</button>
</div>
</div>
// JavaScript代碼
angular.module('myApp', [])
.controller('SomeController', function($scope) {
$scope.someBareValue = 'hello computer';
$scope.someAction = function() {
$scope.someBareValue = 'hello human, from parent';
};
})
.controller('ChildController', function($scope) {
$scope.childAction = function() {
$scope.someBareValue = 'hello human, from child';
};
});
例子分析垫释。
點擊AAAA 丝格，執(zhí)行someAction() 函數(shù)，someBareValue的值這個時候是屬于SomeController這個作用域下的棵譬，修改為'hello human, from parent',下面是點擊AAAA后的執(zhí)行結(jié)果
可以看到显蝌，在ChildController作用域下的someBareValue也改變了。由于繼承關(guān)系订咸，在ChildController作用域下的someBareValue實際上是通過父級對象從而獲取出來的曼尊。
那這個時候，如果點擊BBBBB脏嚷，則會執(zhí)行childAction()函數(shù)骆撇，也會修改someBareValue的值。效果如下
ChildController作用域下的someBareValue改變了父叙，可是父級對象中someBareValue并沒有改變神郊，這說明
子控制器是復(fù)制而非引用someBareValue的值的,JavaScript對象要么是值復(fù)制，要么是引用復(fù)制趾唱。字符竄涌乳、數(shù)字、和布爾型變量是值復(fù)制甜癞，數(shù)組夕晓、對象、和函數(shù)則是引用復(fù)制####
5悠咱、AngularJS表達(dá)式#
例如前面用到的 {{}} 也是一個表達(dá)式
用 {{}} 符號將一個變量綁定到$scope上的寫法本質(zhì)上就是一個表達(dá)式 ：{{ expression }}
AngularJS在執(zhí)行$digest臟循環(huán)的過程中蒸辆，會自動解釋表達(dá)式，那如何手動解析表達(dá)式析既？
$parse服務(wù)####
在控制器中注入$parse服務(wù)（就是在創(chuàng)建contriller的時候吁朦，將$parse作為參數(shù)傳入去。）
angular.module("myApp", [])
.controller('MyController', function($scope,$parse) {
// $watch的使用渡贾，就是逗宜，監(jiān)測ng-model="expr",的輸入，并且將新值，舊值纺讲，作用域返回
$scope.$watch('expr', function(newVal, oldVal, scope) {
if (newVal !== oldVal) {
// 注入$parse后就可以使用擂仍，用$parse設(shè)置parseFun，就等于利用了$parse服務(wù)解釋了得到的新值熬甚。
var parseFun = $parse(newVal);
// 定義parsedValue逢渔，并且調(diào)用parseFun，以此實現(xiàn)手動解析表達(dá)式
$scope.parsedValue = parseFun(scope);
}
});
});
HTML代碼
<div ng-controller="MyController"> <input ng-model="expr"
type="text"
placeholder="Enter an expression" />
<h2>{{ parseValue }}</h2>
</div>
$interpolate服務(wù)
字符竄模板中做插值操作乡括，利用了AngularJS 插值字符竄
<div ng-app="MyApp">
<div ng-controller="MyController">
<input ng-model="myName" type="text" placeholder="Type Your Name">
<textarea ng-model="myTextarea" cols="30" rows="10"></textarea>
<div ng-bind="interpolatedValue"></div>
</div>
</div>
angular.module("MyApp", [])
// 在控制器中肃廓，我們設(shè)置了$watch來監(jiān)視郵件正文的變化，并將myTextarea屬性的值诲泌，進行字符插值后的結(jié)果賦值給myName屬性
.controller("MyController", function($scope, $interpolate){
$scope.$watch("myTextarea", function(newVal, oldVal, scope){
var interpolatedFunc = $interpolate(' templeat : ' + newVal);
// 將input綁定的值盲赊，傳入myName中
// interpolatedValue就是經(jīng)過插值后的新值。
$scope.interpolatedValue = interpolatedFunc({myName: $scope.myName});
});
});
標(biāo)識替換
假如你不想用 {{ }} 標(biāo)識開始與結(jié)束敷扫，你可以通過$inter polateProvider 進行配置
startSymbol() 方法修改標(biāo)識開始的符號
endSymbo() 方法修改標(biāo)識結(jié)束的符號
angular.module('emailParser', [])
.config(['$interpolateProvider', function($interpolateProvider) {
$interpolateProvider.startSymbol('__');
$interpolateProvider.endSymbol('__');
}])
6哀蘑、AngularJS過濾器#
過濾器就是用來過濾數(shù)據(jù)，使數(shù)據(jù)以你希望的形式展示出來葵第，AngularJS有許多實用的內(nèi)置過濾器绘迁。
使用過濾器有兩種形式，HTML中調(diào)用過濾器卒密，與JavaScript中調(diào)用過濾器
在HTML中的模板綁定符號{{}}內(nèi)通過 | 符號來調(diào)用過濾器
例如 ：
{{ name | uppercase }}
在JavaScript代碼中可以通過$filter 來調(diào)用過濾器缀台。
例如 ：
app.controller('DemoController', ['$scope', '$filter',
function($scope, $filter) {
$scope.name = $filter('uppercase')('Ari');
}]);
注意，可以用 | 符號作為分隔符來同時使用多個過濾器####
更多過濾器使用用法請參考這里
7哮奇、AngularJS指令#
創(chuàng)建自定義元素的函數(shù)稱作指令将硝，用.directive()方法創(chuàng)建，
.directive() 指令的使用屏镊。
例如依疼，我們自己定義一個標(biāo)簽 <myDir></myDir>
<div>
<my-dir></my-dir>
</div>
angular.module('myApp', [])
.directive('myDir', function() {
return { restrict: 'E',
replace: true,
template: '<a };
});
結(jié)果，<my-dir></my-dir>被替換掉
<html ng-app>
<head>
<title>Simple app</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</script>
</head>
<body>
<div>
<a >簡單來說而芥，你在上面看到的<my-dir>表情已經(jīng)沒了</a>
</div>
</body>
</html>
放一個自己的整理的例子
angular.module('myApp', [])
.directive('myDirective', function() {
return {
//字符竄律罢， 可選，在DOM中以何種形式被聲明棍丐，E（元素）误辑，A（屬性） , C （類名）, M（注釋）可單獨或者混合使用
restrict: String,
//
priority: Number,
// 布爾型參數(shù)，告訴AngularJS停止運行當(dāng)前元素上比本指令優(yōu)先級低的指令歌逢。
terminal: Boolean,
// 字符串或函數(shù)巾钉，可選，模板替換秘案。
template: String or Template Function:
// 字符竄貨函數(shù)砰苍，可選潦匈，一個可以接受兩個參數(shù)的函數(shù)，并返回一個外部HTML文件路徑的字符竄
function(tElement, tAttrs) (...},
// 模板的URL
templateUrl: String,
// 布爾型赚导，可選 茬缩，默認(rèn)為false , 如果設(shè)置必須為true，
// false代表模板會被當(dāng)作子元素插入到調(diào)用此指令的元素內(nèi)部
replace: Boolean or String,
// 布爾型或?qū)ο蠛鹁桑蛇x凰锡，默認(rèn)為false
// 為true時，會自動從父作用域中繼承并創(chuàng)建一個新的作用域
//
scope: Boolean or Object,
transclude: Boolean,
controller: String or
function(scope, element, attrs, transclude, otherInjectables) { ... }, controllerAs: String,
require: String,
link: function(scope, iElement, iAttrs) { ... },
compile: //
function(tElement, tAttrs, transclude) {
return {
pre: function(scope, iElement, iAttrs, controller) { ... },
post: function(scope, iElement, iAttrs, controller) { ... }
}
// 或者
return function postLink(...) { ... }
}
};
});
指令是AngularJS中用的最多圈暗，最常用的功能掂为，更多詳細(xì)請看這里
