AngularJS 是一個 JavaScript 架構，它是一個以 JavaScript 編寫的庫。
原文連結
Angular 簡介
- AngularJS 把應用程式資料綁定到 HTML 元素。
- AngularJS 可以克隆和重複 HTML 元素。
- AngularJS 可以隐藏和顯示 HTML 元素。
- AngularJS 可以在 HTML 元素”背後”添加代碼。
- AngularJS 支援輸入驗證。
一般應用組成
- View（視圖），即HTML
- Model（模型），目前視圖中綁定的資料
- Controller（控制器），即Javascript函數，可以添加或修改屬性
Angular 表達式
Angular 表達式寫在雙大括号内{{expression}}，具有雙向綁定功能，不過在架構未加載之前頁面會顯示出源碼，可以使用ng-bind替代需要渲染的資料。
類似于Javascript表達式，Angular表達式可以包含字元串、變量和運算符。
與JavaScript 表達式不同，AngularJS 表達式可以寫在 HTML 中。
與JavaScript 表達式不同，AngularJS 表達式不支援條件判斷，循環及異常。
與JavaScript 表達式不同，AngularJS 表達式支援過濾器。
<p>Angular 表達式：{{'express :'+ 'Angular'}}</p>
Angular 指令
Angular通過指令拓展HTML
ng-app
指令告訴AngularJS該元素是AngularJS應用程式根元素。
<div ng-app="app"></div>
ng-model
雙向綁定元素值與變量
<div ng-app="app" ng-init="name='bestvist'">
<input type="text" ng-model="name">
<p><b>名字：</b> {{ name }}</p>
</div>
ng-repeat
重複一個HTML元素
<div ng-app="app" ng-init="category=[{name:'picture',count:10},{name:'video',count:11},{name:'text',count:50}]">
<p>循環對象：</p>
<ul>
<li ng-repeat="item in category">
{{ x.name + ', ' + x.count }}
</li>
</ul>
</div>
自定義指令
<body ng-app="app">
<my-directive></runoob-directive>
<script>
var app = angular.module("app", []);
app.directive("myDirective", function() {
scope: false,
restrict: 'EA',
return {
template : "<h1>這是一個自定義指令!</h1>"
};
});
</script>
</body>
scope表明指令的作用域
- false 共享父級作用域
- true 繼承父級作用域并建立自己的作用域
- {} 建立自己的作用域，與父級無關
restrict可以指定指令的調用方式
- E 作為元素名使用
- A 作為屬性名使用
- C 作為類名使用
- M 作為注釋使用
Angular 作用域（scope）
Scope 是應用在HTML和JavaScript之間的紐帶。
Scope 是一個對象，有可用的方法和屬性。
Scope 可應用在視圖和控制器上。
所有的應用都有一個 rootScope，它可以作用在ng−app指令包含的所有HTML元素中。 rootScope可作用于整個應用中。是各個controller中scope的橋梁。用rootscop，定義的值，可以在各個controller中使用。
Angular 控制器
ng-controller 指令定義了應用程式控制器。
控制器是JavaScript對象，由标準的JavaScript對象的構造函數 建立。
<div ng-app="app" ng-controller="myCtrl">
name: <input type="text" ng-model="name"><br>
age: <input type="number" ng-model="age"><br>
<br>
描述: {{"名字："+name + "，年齡：" + age}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "bestvist";
$scope.age = 24;
});
</script>
ng-controller 指令定義一個控制器，名稱為myCtrl。
$scope是控制器内的作用域對象，具有name，age兩個屬性，可以在控制器中指派。
Angular 過濾器
過濾器可用于轉換資料，使用一個管道字元 | 添加到表達式和指令中
| 過濾器 | 描述 |
|---|---|
| currency | 格式化數組為貨币格式 |
| filter | 從數組項中選擇一個子集 |
| lowercase | 格式化字元串為小寫 |
| uppercase | 格式化字元串為大寫 |
| orderBy | 根據某個表達式排列數組 |
姓名為 {{ name | uppercase }}
自定義過濾器
var app = angular.module('app', []);
app.controller('myCtrl', function($scope) {
$scope.msg = "bestvist";
});
app.filter('reverse', function() { //可以注入依賴
return function(text) {
return text.split("").reverse().join("");
}
});
Angular 服務
服務是一個函數或對象，可在你的 AngularJS 應用中使用。
在很多服務中，比如 location服務，它可以使用DOM中存在的對象，類似window.location對象，但window.location對象在AngularJS應用中有一定的局限性。AngularJS會一直監控應用，處理事件變化，AngularJS使用 location服務比使用 window.location 對象更好。
但服務需要在控制器中引入
var app = angular.module('app', []);
app.controller('myCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
常用内置服務
- $http 資料請求服務
- $location url處理服務，對應于window.location
- $timeout 定時服務，對應于window.setTimeout
自定義服務
var app = angular.module('app', []);
app.service('myService', function() {
this.add = function (x, y) {
return x + y;
}
});
app.controller('myCtrl', function($scope, myService) {
var a= 10;
var b= 20;
$scope.sum = myService.add(a, b);
});
Angular 依賴注入
依賴注入（Dependency Injection，簡稱DI）是一種軟體設計模式，
在這種模式下，一個或更多的依賴（或服務）被注入（或者通過引用傳遞）到一個獨立的對象（或用戶端）中，然後成為了該用戶端狀态的一部分。
該模式分離了用戶端依賴本身行為的建立，這使得程式設計變得松耦合，
并遵循了依賴反轉和單一職責原則。與服務定位器模式形成直接對比的是，它允許用戶端了解用戶端如何使用該系統找到依賴
一句話 — 沒事你不要來找我，有事我會去找你。
Angular 提供了5個核心元件作為依賴注入
- value 簡單值注入，可以是Javascript對象
- factory 工廠注入，在service和controller需要時建立
- service 服務注入，在controller中引入
- provider 可以建立factory和service
- constant 常量注入，定義一些常量值使用
總結
Angular的雙向綁定使用非常友善，整體架構的MVC結構很清晰，
但是成也蕭何敗也蕭何，髒值檢測和渲染機制的複雜也使得在大量資料處理時造成頁面卡頓，性能方面還有待改善。
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)