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