第一章． 初識Angular——Angular是MVW的Js框架。
第二章． 數據綁定——ViewModel中不僅可以含有變量，還可以還有事件。可以通過事件來控制變量的值改變。視圖綁定着VM中的變量和事件。
第三章． 模塊——可以使用angular.module()來聲明模塊。
如angular.module(‘myApp’,[])相當於Setter；angular.module(‘myApp’)相當於Getter。
第四章． 作用域——作用：監聽變化，通知變化，隔離數據，提供環境。
$scope的生命周期：
- 創建：當創建控制器和指令時。通過$inject創建新的作用域。並在新建控制器和指令運行時傳進去。
- 鏈接：把作用域添加到自己的視圖上，並創建事件，以便檢測作用域變量的變化。
- 更新：每個子作用域會進行臟值檢測。當檢測到變化時，會回調指定的函數。
- 銷毀：不使用的時間，銷毀。
第五章． 控制器——是可以嵌套的，所以作用域包含作用域。demohttp://jsbin.com/URuyoG/1/edit
第六章． 表達式——手動和自動解析。自動通過$digest.如{{}}。手動可以在控制器中控制,讓表達式不按套路出牌。
$parse用來訪問作用域的數據和函數。
第七章． 過濾器——內置自帶過濾器，自定義過濾器，表單驗證。
-
-
- 內置過濾器的兩種使用方法{{name|uppercase}}和$filter(‘lowercase’)(“ACb”)
- 時間過濾器 {{ time | date:'y-MM-dd HH:mm:ss' }}2014-09-29 17:04:05
- filter 后面可以跟字符串，對象，函數
-
{{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }}
<!-- ["Lerner","Likes","Eat"] -->
{{ [{
'name': 'Ari',
'City': 'San Francisco',
'favorite food': 'Pizza'
},{
'name': 'Nate',
'City': 'San Francisco',
'favorite food': 'indian food'
}] | filter:{'favorite food': 'Pizza'} }}
<!-- [{"name":"Ari","City":"SanFrancisco","favoritefood":"Pizza"}] -->
4.通過過濾器對象轉成json
var person={};
person.age=12;
person.name="hehe";
var p=$filter('json')(person);
5.limitTo截取字符串，正從頭開始負從尾開始。
6.number 保留n位小數
7.orderBy 下面的例子不僅給出了如何按對象的字段排序還給出了如何使用兩個參數的過濾器。
{{ [{ 'name': 'Ari', 'status': 'awake' },{ 'name': 'Q', 'status': 'sleeping' },{ 'name': 'Nate', 'status': 'awake' }] | orderBy:'name':true }} <!-- [ {"name":"Q","status":"sleeping"}, {"name":"Nate","status":"awake"}, {"name":"Ari","status":"awake"} ] -->
8. uppercase lowercase
自定義過濾器：
下面是自定義函數 angular.module('myApp', []) .filter('capitalize', function(){ return function(input){ if (input) { return input[0].toUpperCase() + input.slice(1); } }; }).controller('MyController',function(){}); 引用方式 {{ 'ginger loves dog treats' | lowercase | capitalize }}
7.2表單
可以驗證的Input選項：required, ng-minlength, ng-pattern, name="email",type="number",自定義.
表單中控制變量formName.inputFieldName.propertyy.
1. 未修改：formName.inputFieldName.$pristine
2. 修改過：formName.inputFieldName.$dirty
3. 合法表單：formName.inputFieldName.$valid
4. 不合法表單：formName.inputFieldName.$invalid
5. 錯誤：formName.inputfieldName.$error
以上對應的css類
.ng-pristine {}
.ng-dirty {}
.ng-valid {}
.ng-invalid {}
$parsers通常配合指令來用。當ngModelController中的$setViewValue()方法時。會逐個調用$parser.
demo：
angular.module('myApp')
.directive('oneToTen', function() {
return {
require: '?ngModel',
link: function(scope, ele, attrs, ngModel) {
if (!ngModel) return;
ngModel.$parsers.unshift(
function(viewValue) {
var i = parseInt(viewValue);
if (i >= 0 && i < 10) {
ngModel.$setValidity('oneToTen', true);
return viewValue;
} else {
ngModel.$setValidity('oneToTen', false);
return undefined;
}
$formatters
當綁定的ngModel值發生了變化，並經過$parsers數組中解析器的處理后，這個值會被傳遞給$formatters流水線
Demo
angular.module('myApp')
.directive('oneToTen', function() {
return {
require: '?ngModel',
link: function(scope, ele, attrs, ngModel) {
if (!ngModel) return;
ngModel.$formatters.unshift(function(v) {
return $filter('number')(v);
});
}
};
});
7.3下面是關於表單驗證的常見例子：
1.異步驗證
app.directive('ensureUnique', function ($http) {
return {
require: 'ngModel',
link: function (scope, ele, attrs, c) {
scope.$watch(attrs.ngModel, function (n) {
if (!n) return;
$http({
method: 'POST',
url: '/api/check/' + attrs.ensureUnique,
data: {
field: attrs.ensureUnique,
value: scope.ngModel
}
}).success(function (data) {
c.$setValidity('unique', data.isUnique);
}).error(function (data) {
c.$setValidity('unique', false);
});
});
}
};
});
<button type="submit" ng-disabled="signup_form.$invalid" class="button radius">Submit</button>
在失焦后顯示驗證信息
app.directive('ngFocus', [function () {
var FOCUS_CLASS = "ng-focused";
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ctrl) {
ctrl.$focused = false;
element.bind('focus', function (evt) {
element.addClass(FOCUS_CLASS);
scope.$apply(function () {
ctrl.$focused = true;
});
}).bind('blur', function (evt) {
element.removeClass(FOCUS_CLASS);
scope.$apply(function () {
ctrl.$focused = false;
});
});
}
};
}]);
如果使用1.3可以使用ngMessage.
第八章、指令
1.指令通過關鍵字directive來定義。參數1.名字，參數2函數（返回值是個對象）。
2.向指令傳遞數據，創建隔離作用域指令對象有個Scope變量。
第九章 、內置指令
1.使用ng-include時AngularJS會自動創建一個子作用域
2.ng-switch when on配合使用。
<div ng-switch on="person.name"> <p ng-switch-default>And the winner is</p> <h1 ng-switch-when="Ari">{{ person.name }}</h1> </div>
3.ng-class動態設置元素類。
<div ng-class="{red: x > 5,blue:x<=5}" >或<div ng-class="{true: 'active', false: 'inactive'}[isActive]">
第十章、指令的詳解
10.1.定義：名字和函數（返回值為對象。對象屬性如下）
restrict: String, priority: Number, terminal: Boolean, template: String or Template Function: function(tElement, tAttrs) (...}, templateUrl: String, replace: Boolean or String, scope: Boolean or Object, transclude: Boolean, controller: String or function(scope, element, attrs, transclude, otherInjectables) { ... }, controllerAs: String, require: String, link: function(scope, iElement, iAttrs) { ... },
1.restrict類型
2.priority優先級 默認為0 越大越先
3.terminal是否停止優先級比較低的
4.template（字符串或函數）
5templateUrl（字符串或函數）
6replace 是否替換原來的標簽。默認為不替換，即插入。
7.scope
<input type="text" ng-model="to"/> <!-- 調用指令 --> <div scope-example ng-model="to" on-send="sendMail(email)" from-name="ari@fullstack.io" />
scope: { ngModel: '=', // 將ngModel同指定對象綁定 onSend: '&', // 將引用傳遞給這個方法 fromName: '@' // 儲存與fromName相關聯的字符串 }
8.transclude（看不懂用到時再去理解吧）
9.controller（字符串或函數）看不懂用到時再去理解吧
10.controllerAs（字符串）看不懂用到時再去理解吧
11.require（字符串或數組）用到的Controller名稱集合。
12.compiled和link互斥，如果兩個都有compiled函數當link的函數使用。
viewValue通過驗證后才會賦值給modelValue。
13.ngModel屬性$viewValue，$modelValue，$parsers，$formatters，$viewChangeListeners….form相似的一些屬性$error.$dirty等。
在控制器中定義$render方法可以定義視圖具體的渲染方式。這個方法會在$parser流水線
完成后被調用。