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);  }