Angular

驗證

<form ... novalidate> //禁用瀏覽器默認驗證

表單控件要有name屬性

<p>Username:<br>
  <input type="text" name="user" ng-model="user" required>
  <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
  <span ng-show="myForm.user.$error.required">Username is required.</span>
  </span>
</p>

required　　//<input type="text" required/>

ng-minlength　　//<input type="text" ng-minlength="5"/> ng-maxlength

ng-pattern　　//<input type="text" ng-pattern="/[a-zA-Z]/"/> 正則

<input type="email" />

<input type="number" />

<input type="url" />

表單屬性能夠在$scope中訪問到：

formName.inputName.$pristine　　//true 沒有修改過表單

formName.inputName.$dirty　　//true 修改過表單

formName.inputName.$valid　　//true 輸入內容合法

formName.inputName.$invalid　　//true 輸入內容非法

formName.inputName.$error　　//true 驗證失敗

 $setViewValue()>$parsers

ngModel值變化>$parsers>$formatters

 

 

 

指令(生命週期始於$compile方法結束於link方法,DOM調用指令時,$compile服務會用工廠方法返回對象)

不會運行同一元素的低優先級指令

生命週期：編譯(能夠用compile函數修改DOM)>(ng-repeat,ng-transclude)>連接(數據綁定)

angular建立指令時的執行順序 link>controller>link中watch的事件>controller中watch的事件

.directive('',function()

{

return {

restrict:'EACM'，

priority:100,      //優先級，ngRepeat優先級最高最早執行

replace:true,　　//true模板內容替換當前指令，false當前指令做爲容器

scope:false，　　//false使用當前做用域,true建立新的繼承父做用域的做用域(相似controller)，{}隔離做用域

transclude:true，　　//嵌入,克隆元素操做dom元素$transclude

controller:'controllerName'　　//指令能夠共享controller

compile:function(element,attrs,transcludeFn){}　　//編譯函數對DOM轉換，設置後會忽略link,經過angular.element(''), element.replaceWith()修改DOM

link:function(scope,element,attrs){}　　//連接函數把做用域和DOM連接，能夠設置事件綁定

};

})

scope:{}  //隔離做用域，用於建立可複用組件,綁定策略,@綁定dom屬性值（用於綁定賦給屬性的靜態值），=雙向綁定(用於綁定父做用域變量)，&父級做用域綁定(調用父做用域函數)

ngModelController

ngModel.$setViewValue()設置視圖值　　//值的流向 $viewValue>$parser>$render??>$modelValue>$viewChangeListeners, 不會觸發digest循環需手動調用scope.$apply(function(){})

 $viewValue>$parser>$modelValue

$formatters(數據模型改變時執行)

$viewChangeListeners（視圖值改變時執行）

$error,$valid,$invalid

$pristine(true 沒修改過控件)

$dirty(true 修改過控件)

ngRoutes

視圖切換時，移除上一個視圖和他的做用域，爲當前視圖建立新做用域並和模板綁定，若是路由定義了控制器則一樣綁定到當前做用域，觸發$viewContentLoaded事件，調用onload屬性對應的函數

angular.module('myApp', ['ngRoute']);　　//模塊引用 

<div ng-view></div>　　//優先級1000

$location　　//不會刷新頁面 path('')獲取修改當前路徑 replace()阻止後退 absUrl()獲取編碼後的url host() search({name:'abc'})獲取修改查詢字串

$window.location.href=""　　//刷新頁面

$routeProvider.when('/inbox/:name',　　//$routeParams.name讀取參數 /inbox/all {name:'all'}

{templateuRL:'views/home.html',

controller:'homeController',

resolve:{'data':['$http',function($http){　　//data會在控制器加載以及$routeChangeSuccess觸發前設個值，並注入到控制器中

return $http.get('/api').then(function success(resp){return response.data;},function error(reason){return false;})

}]},

reloadOnSearch:true　　//$location.search()變化時從新加載路由

}).when(...).otherwise({redirectTo:'/'});

$routeParams

angular.module('myApp', ['ngRoute'])
.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(false); 　　//false 標籤模式 <a href="#/view1">view1</a>(單擊頁面不跳轉，內容變化) true html5模式(會在編譯時重寫 <a href="")
}]);

$routeChangeSuccess　　//事件發生時視圖會更新

$routeChangeStart　　//路由加載依賴項，模板和resolve鍵中的promise會被resolve

angular.module('myApp', [])
.run(['$rootScope', '$location', function($rootScope, $location) {
$rootScope.$on('$routeChangeStart', function(evt, next, current) {
});
}]);

$routeChangeError　　//promise reject時會發生此事件

$routeupdate　　//reloadOnSearch 爲false時，從新使用某個控制器實例是會觸發

 

 

 

 

 

 

ng-app //DOM加載完後自動啓動angular,手動啓動angular.bootstrap(element,['myApp']);

ng-init //啓動時運行的函數,初始化變量，<b ng-init='name = "Ari Lerner";age=12'>Hello, {{ name }}</b>

ng-click //註冊事件監聽器，可調用表達式可函數

<button ng-click= "counter = counter + 1" >Add one</button>

Current counter: {{ counter }}

ng-show/ng-hide //布爾表達式，ng-show="shouldShow"

ng-disabled

ng-repeat //可遍歷集合，<ul><li ng-repeat="person in roommates | orderBy:'name'"">{{ person.name }}</li> </ul>,$index產生序號

ng-model //把輸入域的值綁定到應用程序變量, <input type="text" ng-model="name">

ng-bind //把應用程序變量綁定到某個段落的 innerHTML,相似於輸出表達式, 能夠綁定有返回值的函數，<p ng-bind="name"></p>

$http //$http.get("http://www.w3cschool.cc/try/angularjs/data/Customers_JSON.php").success(function(response) {$scope.names = response;});

ng-click //可用表達式，<button ng-click="count = count + 1">點我！</button>,$event

ng-include //包含html代碼， <div ng-include="'myUsers_List.htm'"></div>

$exceptionHandler

 $digest循環 

遍歷$$watchers($watch列表)，執行$$asyncQueue,此次有dirty下次還執行

視圖綁定是會在$watch列表添加一個函數

髒值檢查會檢查$watch列表

$watch

var unregisterWatch=$scope.$watch('full_name',
function(newVal, oldVal, scope) {
if(newVal === oldVal) {
// 只會在監控器初始化階段運行
} else {
// 初始化以後發生的變化
}
});

unregisterWatch() //註銷監視

$watchCollection

$scope.$watchCollection('names',
function(newNames, oldNames, scope) {
// names集合已經發生了變化
});

$apply

觸發因此scope的$digest循環

全部ng-[event]指令（好比ng-click、ng-keypress）都會調用$apply()

$digest

只觸發current scope以及current's sub scope的$digest循環

$evalAsync

指令中使用，代碼執行是發生在angular處理完dom,瀏覽器渲染以前。

controller中使用，代碼發生在angular處理完dom以前。

$timeout

在瀏覽器渲染以後執行

$p 建立promise,$q.defer()

ng-href (url是動態綁定是用ng-href代替href,ng-href會等待綁定值完成後執行click事件)

ng-include(應用ng-controller指明做用域，不然會建立新做用域)

ng-switch on ng-switch-default ng-switch-when

ng-if(和ng-show,ng-hide區別是真正的添加移除html元素，做用域會重建)//能夠解決待數據加載完後再綁定的問題

ng-cloak

ng-bind-template（綁定多個表達式）

ng-change

 

$timeout

$log 

$translate

$watch

ng-class

 

1.

var app = angular.module('myApp', []);//建立 angular模塊

 

<* ng-app="myApp"> //在那一塊實例化angular模塊

 

2.

$scope //存儲數據和函數(MVVM中的VM)

ng-app //對應一個$rootScope(默認的數據存儲)

app.run( function ($rootScope) {

   $rootScope.name = "Ari Lerner" ;

});//設置屬性

 

{{ name }}//輸出屬性

 

3.

app.controller( 'MyController' , function ($scope) {

   $scope.person = {

     name: "Ari Lerner"

   };

});//建立一個controller 會對應產生一個$scope,和外部的$rootScope組成scope chain

< div ng-controller = "MyController" >

   {{ person.name }}

</ div >//使用controller

 

app.controller('DemoController', function($scope) {
  $scope.counter = 0;
  $scope.add = function(amount) { $scope.counter += amount; };
  $scope.subtract = function(amount) { $scope.counter -= amount; };
});//方法綁定

<div ng-controller= "DemoController" >

   <h4>The simplest adding machine ever</h4>

   <button ng-click= "add(1)" class= "button" >Add</button>

   <button ng-click= "subtract(1)" class= "button" >Subtract</button>

   <h4>Current count: {{ counter }}</h4>

</div>

 

4.

<div ng-controller= "MyController" >

   <input type= "text" ng-model= "person.name" placeholder= "Enter your name" />//輸入值綁定到$scope中的model  $watch函數

   <h5>Hello {{ person.name }}</h5>

</div>//建立model雙向綁定

5.

services 整個應用程序生命週期保存數據，controller之間共享數據。都是單例

 

angular.module( 'myApp.services' , [])

   .factory( 'githubService' , function () {

     var serviceInstance = {};

     return serviceInstance;

   });

 

 

methods:

 

1.

angular.foreach

 function button1(){   var values = {name: 'misko', gender: 'male'};   var log = [];   angular.forEach(values, function(value, key) {   this.push(key + ': ' + value);   }, log);   alert(log);  }   function button2(){   var values = {name: 'misko', gender: 'male'};   var log = [];   angular.forEach(values, function(value, key) {   log.push(key + ': ' + value);   });   alert(log);  }