Angula.js

最新推荐文章于 2023-12-04 20:31:38 发布

feng_lilan

最新推荐文章于 2023-12-04 20:31:38 发布

阅读量1.4k

点赞数

分类专栏： js 文章标签： js

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

原文链接：https://docs.angularjs.org/guide/$location

1.$location

（1）$location用法：

$loction服务用于服务器端的URL，为apps提供URL。

Slocation服务：

对于当前brower地址栏中的URL，可进行watch、observe、change

与browser的URL同步，当user 进行如下操作：改变browsers的地址，单击browser中的back或forward按钮，单击页面上的某一个link时</p><p>将URL对象当作一系列的方法（protocol、host、port、search、hash）

当需要对当前的URL的改变作出反应或更改当前的URL时，用到$location

$location service configuration

$locationProvide

（2）Getter and setter methods

$location服务：对于getter方法，可用于URL中的只读部分（absUrl,protocol,host,port）

getter /setter方法用于url、path、search、hash

eg:

// get the current path
$location.path();

// change the path
$location.path('/newValue')

所有的setter方法返回的是$location相同的对象来获得链接

eg:

$location.path('/newValue').search({key: value});

（3）Replace method

改变当前的URL而不创建新的browser history record

$location.path('/someNewPath');
  $location.replace();
  // or you can chain these as: $location.path('/someNewPath').replace();

（4）Setters and character encoding

依据RFC 3986中的规则，进行编码

传值给$location的setter 方法：path（）、search（）、hash（）

getters返回的值用于path（）、search（）、hash（）

当调用 absUrl（）方法时，返回的值经部分编码的的全部url

当调用url（）方法时，返回的是path和hash，以这种形式：/path?search=a&b=c#hash

（5）Dependencies

$rootElement

（6）Methods

absUrl（）：getter

url（）：getter/setter 取得url或重新设定url

protocol（）： getter 返回当前url的protocol

host（）： getter 返回当前url的host

port（）：getter 返回当前url的port

path（）：getter/setter 返回或设定路径

search（）：getter/setter

hash（）：getter/setter 带参数的时候是用参数改变hash部分，返回$location

replace（）：

（7）Events

$locationChangeStart：在URL改变前进行broadcasted，可调用该事件中的preventDefault方法，事件成功改变后释放$locationChangeSuccess

$locationChangeSuccess：在URL改变后broadcasted

2. Controllers

（1）设定$scope对象的初始状态

var myApp = angular.module('myApp',[]);

myApp.controller('GreetingController', ['$scope', function($scope) {
  $scope.greeting = 'Hola!';
}]);

<pre name="code" class="javascript"><div ng-controller="GreetingController">
  {{ greeting }}
</div>

（2）向一个$scope对象中添加行为

var myApp = angular.module('myApp',[]);

myApp.controller('DoubleController', ['$scope', function($scope) {
  $scope.double = function(value) { return value * 2; };
}]);

</pre><pre code_snippet_id="449140" snippet_file_name="blog_20140818_8_9028233" name="code" class="javascript"><div ng-controller="DoubleController">
  Two times <input ng-model="num"> equals {{ double(num) }}
</div>

（3）作用域和事件系统

层级关系中的作用域可以使用event bus（一种事件系统）

事件可以从任何一个作用域中发出，然后向上（$emit）和向下（$broadcast）四处传播

每一个作用域对象都会有这个 $on 方法，可以用来注册一个作用域事件的侦听器。这个函数所扮演的侦听器在被调用时会有一个 event 对象作为第一个参数。后面的参数会根据事件类型的不同与事件本身的配备一一对应。

在整个 AngularJS 框架中，一共只发出（$emit）了三个事件（$includeContentRequested,$includeContentLoaded,$viewContentLoaded）和七个广播（$broadcast）（$locationChangeStart, $locationChangeSuccess, $routeUpdate, $routeChangeStart, $routeChangeSuccess, $routeChangeError, $destroy）。

3.Working With CSS

（1）ng-scope

（2）ng-binding：{{}} ，ng-bind

（3）ng-invalid，ng-valid：应用于输入元素，当输入的元素未能通过验证

（4）ng-pristineng-dirty：当与用户没有交互时，angular的input directive将ng-pristine类应用于一个新的input元素中

4.Directives

（1）normalizes

Angular中的normalizes一个元素标记及属性名称

包括：

x- ， data- + element/attributes

：， - ， _ +delimited name

eg：

ngBind、ng-bind、ng:bind、ng_bind、data-ng-bind、x-ng-bind均等同

（2）文本及属性绑定

eg：

<a ng-href="img/{{username}}.jpg">Hello {{username}}!</a>

<svg>
  <circle cx="{{cx}}"></circle>
</svg>

（3）模板扩充directive

eg：

script.js

angular.module('docsSimpleDirective', [])
  .controller('Controller', ['$scope', function($scope) {
    $scope.customer = {
      name: 'Naomi',
      address: '1600 Amphitheatre'
    };
  }])
  .directive('myCustomer', function() {
    return {
      template: 'Name: {{customer.name}} Address: {{customer.address}}'
    };
  });

index.html

<div ng-controller="Controller">
  <div my-customer></div>
</div>

注：最好是将template放到对应的HTML文件中，用templateUrl选项进行加载进来

eg：

<strong>script.js</strong>

angular.module('docsTemplateUrlDirective', [])
  .controller('Controller', ['$scope', function($scope) {
    $scope.customer = {
      name: 'Naomi',
      address: '1600 Amphitheatre'
    };
  }])
  .directive('myCustomer', function() {
    return {
      templateUrl: 'my-customer.html'
    };
  });

<strong>index.html</strong>

<div ng-controller="Controller">
  <div my-customer></div>
</div>

my-customer.html

Name: {{customer.name}} Address: {{customer.address}}

注：当创建一个directive时，默认的是只限制于attribute使用，为了使directives能被element或class name触发，需使用restrict选项

restrict选项的设定：

"A"：只匹配attribute名称

"E"：仅匹配element名称

"C"：仅匹配class名称

“AEC”：三者均可

（4）isolate scope

eg：

<strong>script.js</strong>

angular.module('docsIsolateScopeDirective', [])
  .controller('Controller', ['$scope', function($scope) {
    $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
    $scope.igor = { name: 'Igor', address: '123 Somewhere' };
  }])
  .directive('myCustomer', function() {
    return {
      restrict: 'E',
      scope: {
        customerInfo: '=info'
      },
      templateUrl: 'my-customer-iso.html'
    };
  });

index.html

<div ng-controller="Controller">
  <my-customer info="naomi"></my-customer>
  <hr>
  <my-customer info="igor"></my-customer>
</div>

my-customer-iso.html

Name: {{customerInfo.name}} Address: {{customerInfo.address}}

（5）创建一个Directive管理DOM

Directives使用link选项来更改DOM

function link(scope, element, attrs) { ... }

scope是Angular中的scope对象

element是jqLite包装的元素，与directives相匹配

attrs是一个键值型的hash对象

</pre><pre code_snippet_id="449140" snippet_file_name="blog_20140818_32_3517953" name="code" class="javascript">eg:

script.js

<pre name="code" class="javascript">angular.module('docsTimeDirective', [])
  .controller('Controller', ['$scope', function($scope) {
    $scope.format = 'M/d/yy h:mm:ss a';
  }])
  .directive('myCurrentTime', ['$interval', 'dateFilter', function($interval, dateFilter) {

    function link(scope, element, attrs) {
      var format,
          timeoutId;

      function updateTime() {
        element.text(dateFilter(new Date(), format));
      }

      scope.$watch(attrs.myCurrentTime, function(value) {
        format = value;
        updateTime();
      });

      element.on('$destroy', function() {
        $interval.cancel(timeoutId);
      });

      // start the UI update process; save the timeoutId for canceling
      timeoutId = $interval(function() {
        updateTime(); // update DOM
      }, 1000);
    }

    return {
      link: link
    };
  }]);

index.html

<pre name="code" class="javascript"><div ng-controller="Controller">
  Date format: <input ng-model="format"> <hr/>
  Current time is: <span my-current-time="format"></span>
</div>

注：当directive被移除时，可使用element.on("$destroy", ……)或scope.$on("$destroy"，……)来清除一个function

（6）创建可以封装其他elements的Directive

要用到transclude选项，即ng-transclude选项

transclude选项改变了scopes的交互方式，它可以让一个transcluded directive的contents获得外部任意一个directive的scope，而不是获得内部的scope。因此，transclude可让contents获得外部的scope。

只需使用transclude:true

eg

angular.module('docsTransclusionExample', [])
  .controller('Controller', ['$scope', function($scope) {
    $scope.name = 'Tobias';
  }])
  .directive('myDialog', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {},
      templateUrl: 'my-dialog.html',
      link: function (scope, element) {
        scope.name = 'Jeff';
      }
    };
  });

<strong>index.html</strong>

<pre style="box-sizing: border-box; overflow: auto; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; padding: 9.5px; margin-top: 0px; margin-bottom: 10px; line-height: 1.42857143; word-break: normal; word-wrap: break-word; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; white-space: pre-wrap; background-color: rgb(245, 245, 245);"><code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:undefined; padding: 0px; color: inherit; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; background-color: transparent;"><span class="tag" style="box-sizing: border-box; color: navy;"><div</span><span class="pln" style="box-sizing: border-box;"> </span><span class="atn" style="box-sizing: border-box; color: teal;">ng-controller</span><span class="pun" style="box-sizing: border-box;">=</span><span class="atv" style="box-sizing: border-box; color: rgb(221, 17, 68);">"Controller"</span><span class="tag" style="box-sizing: border-box; color: navy;">></span><span class="pln" style="box-sizing: border-box;">
  </span><span class="tag" style="box-sizing: border-box; color: navy;"><my-dialog></span><span class="pln" style="box-sizing: border-box;">Check out the contents, {{name}}!</span><span class="tag" style="box-sizing: border-box; color: navy;"></my-dialog></span><span class="pln" style="box-sizing: border-box;">
</span><span class="tag" style="box-sizing: border-box; color: navy;"></div></span></code>

my-dialog.html

<pre style="box-sizing: border-box; overflow: auto; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; padding: 9.5px; margin-top: 0px; margin-bottom: 10px; line-height: 1.42857143; word-break: normal; word-wrap: break-word; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; white-space: pre-wrap; background-color: rgb(245, 245, 245);"><code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:undefined; padding: 0px; color: inherit; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; background-color: transparent;"><span class="tag" style="box-sizing: border-box; color: navy;"><div</span><span class="pln" style="box-sizing: border-box;"> </span><span class="atn" style="box-sizing: border-box; color: teal;">class</span><span class="pun" style="box-sizing: border-box;">=</span><span class="atv" style="box-sizing: border-box; color: rgb(221, 17, 68);">"alert"</span><span class="pln" style="box-sizing: border-box;"> </span><span class="atn" style="box-sizing: border-box; color: teal;">ng-transclude</span><span class="tag" style="box-sizing: border-box; color: navy;">></span><span class="pln" style="box-sizing: border-box;">
</span><span class="tag" style="box-sizing: border-box; color: navy;"></div></span></code>

输出的结果仍为:Check out the contents, Tobias!

原因是，我们设定了scope{}

5. Angular Expressions

	JavaScript	Angular
Context	window	scope
Forgiving	ReferenceError 或 TypeError	undefined 或null
No Control Flow Statements		不能使用conditions、loops或exceptons
Filters

<strong>eg</strong>

index.html

<div ng-controller="ExampleController" class="expressions">
  Expression:
  <input type='text' ng-model="expr" size="80"/>
  <button ng-click="addExp(expr)">Evaluate</button>
  <ul>
   <li ng-repeat="expr in exprs track by $index">
     [ <a href="" ng-click="removeExp($index)">X</a> ]
     <tt>{{expr}}</tt> => <span ng-bind="$parent.$eval(expr)"></span>
    </li>
  </ul>
</div>

</pre><pre code_snippet_id="449140" snippet_file_name="blog_20140819_45_6768494" name="code" class="javascript">script.js

<pre style="box-sizing: border-box; overflow: auto; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; padding: 9.5px; margin-top: 0px; margin-bottom: 10px; line-height: 1.42857143; word-break: normal; word-wrap: break-word; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; white-space: pre-wrap; background-color: rgb(245, 245, 245);"><code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:undefined; padding: 0px; color: inherit; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; background-color: transparent;"><span class="pln" style="box-sizing: border-box;">angular</span><span class="pun" style="box-sizing: border-box;">.</span><span class="kwd" style="box-sizing: border-box;">module</span><span class="pun" style="box-sizing: border-box;">(</span><span class="str" style="box-sizing: border-box; color: rgb(221, 17, 68);">'expressionExample'</span><span class="pun" style="box-sizing: border-box;">,</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" style="box-sizing: border-box;">[])</span><span class="pln" style="box-sizing: border-box;">
  </span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">controller</span><span class="pun" style="box-sizing: border-box;">(</span><span class="str" style="box-sizing: border-box; color: rgb(221, 17, 68);">'ExampleController'</span><span class="pun" style="box-sizing: border-box;">,</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" style="box-sizing: border-box;">[</span><span class="str" style="box-sizing: border-box; color: rgb(221, 17, 68);">'$scope'</span><span class="pun" style="box-sizing: border-box;">,</span><span class="pln" style="box-sizing: border-box;"> </span><span class="kwd" style="box-sizing: border-box;">function</span><span class="pun" style="box-sizing: border-box;">(</span><span class="pln" style="box-sizing: border-box;">$scope</span><span class="pun" style="box-sizing: border-box;">)</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" style="box-sizing: border-box;">{</span><span class="pln" style="box-sizing: border-box;">
    </span><span class="kwd" style="box-sizing: border-box;">var</span><span class="pln" style="box-sizing: border-box;"> exprs </span><span class="pun" style="box-sizing: border-box;">=</span><span class="pln" style="box-sizing: border-box;"> $scope</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">exprs </span><span class="pun" style="box-sizing: border-box;">=</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" style="box-sizing: border-box;">[];</span><span class="pln" style="box-sizing: border-box;">
    $scope</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">expr </span><span class="pun" style="box-sizing: border-box;">=</span><span class="pln" style="box-sizing: border-box;"> </span><span class="str" style="box-sizing: border-box; color: rgb(221, 17, 68);">'3*10|currency'</span><span class="pun" style="box-sizing: border-box;">;</span><span class="pln" style="box-sizing: border-box;">
    $scope</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">addExp </span><span class="pun" style="box-sizing: border-box;">=</span><span class="pln" style="box-sizing: border-box;"> </span><span class="kwd" style="box-sizing: border-box;">function</span><span class="pun" style="box-sizing: border-box;">(</span><span class="pln" style="box-sizing: border-box;">expr</span><span class="pun" style="box-sizing: border-box;">)</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" style="box-sizing: border-box;">{</span><span class="pln" style="box-sizing: border-box;">
      exprs</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">push</span><span class="pun" style="box-sizing: border-box;">(</span><span class="pln" style="box-sizing: border-box;">expr</span><span class="pun" style="box-sizing: border-box;">);</span><span class="pln" style="box-sizing: border-box;">
    </span><span class="pun" style="box-sizing: border-box;">};</span><span class="pln" style="box-sizing: border-box;">

    $scope</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">removeExp </span><span class="pun" style="box-sizing: border-box;">=</span><span class="pln" style="box-sizing: border-box;"> </span><span class="kwd" style="box-sizing: border-box;">function</span><span class="pun" style="box-sizing: border-box;">(</span><span class="pln" style="box-sizing: border-box;">index</span><span class="pun" style="box-sizing: border-box;">)</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" style="box-sizing: border-box;">{</span><span class="pln" style="box-sizing: border-box;">
      exprs</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">splice</span><span class="pun" style="box-sizing: border-box;">(</span><span class="pln" style="box-sizing: border-box;">index</span><span class="pun" style="box-sizing: border-box;">,</span><span class="pln" style="box-sizing: border-box;"> </span><span class="lit" style="box-sizing: border-box; color: rgb(68, 85, 136);">1</span><span class="pun" style="box-sizing: border-box;">);</span><span class="pln" style="box-sizing: border-box;">
    </span><span class="pun" style="box-sizing: border-box;">};</span><span class="pln" style="box-sizing: border-box;">
  </span><span class="pun" style="box-sizing: border-box;">}]);</span></code>

protractor.js

<pre style="box-sizing: border-box; overflow: auto; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; padding: 9.5px; margin-top: 0px; margin-bottom: 10px; line-height: 1.42857143; word-break: normal; word-wrap: break-word; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; white-space: pre-wrap; background-color: rgb(245, 245, 245);"><code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:undefined; padding: 0px; color: inherit; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; background-color: transparent;"><span class="pln" style="box-sizing: border-box;">it</span><span class="pun" style="box-sizing: border-box;">(</span><span class="str" style="box-sizing: border-box; color: rgb(221, 17, 68);">'should allow user expression testing'</span><span class="pun" style="box-sizing: border-box;">,</span><span class="pln" style="box-sizing: border-box;"> </span><span class="kwd" style="box-sizing: border-box;">function</span><span class="pun" style="box-sizing: border-box;">()</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" style="box-sizing: border-box;">{</span><span class="pln" style="box-sizing: border-box;">
  element</span><span class="pun" style="box-sizing: border-box;">(</span><span class="kwd" style="box-sizing: border-box;">by</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">css</span><span class="pun" style="box-sizing: border-box;">(</span><span class="str" style="box-sizing: border-box; color: rgb(221, 17, 68);">'.expressions button'</span><span class="pun" style="box-sizing: border-box;">)).</span><span class="pln" style="box-sizing: border-box;">click</span><span class="pun" style="box-sizing: border-box;">();</span><span class="pln" style="box-sizing: border-box;">
  </span><span class="kwd" style="box-sizing: border-box;">var</span><span class="pln" style="box-sizing: border-box;"> lis </span><span class="pun" style="box-sizing: border-box;">=</span><span class="pln" style="box-sizing: border-box;"> element</span><span class="pun" style="box-sizing: border-box;">(</span><span class="kwd" style="box-sizing: border-box;">by</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">css</span><span class="pun" style="box-sizing: border-box;">(</span><span class="str" style="box-sizing: border-box; color: rgb(221, 17, 68);">'.expressions ul'</span><span class="pun" style="box-sizing: border-box;">)).</span><span class="pln" style="box-sizing: border-box;">all</span><span class="pun" style="box-sizing: border-box;">(</span><span class="kwd" style="box-sizing: border-box;">by</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">repeater</span><span class="pun" style="box-sizing: border-box;">(</span><span class="str" style="box-sizing: border-box; color: rgb(221, 17, 68);">'expr in exprs'</span><span class="pun" style="box-sizing: border-box;">));</span><span class="pln" style="box-sizing: border-box;">
  expect</span><span class="pun" style="box-sizing: border-box;">(</span><span class="pln" style="box-sizing: border-box;">lis</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">count</span><span class="pun" style="box-sizing: border-box;">()).</span><span class="pln" style="box-sizing: border-box;">toBe</span><span class="pun" style="box-sizing: border-box;">(</span><span class="lit" style="box-sizing: border-box; color: rgb(68, 85, 136);">1</span><span class="pun" style="box-sizing: border-box;">);</span><span class="pln" style="box-sizing: border-box;">
  expect</span><span class="pun" style="box-sizing: border-box;">(</span><span class="pln" style="box-sizing: border-box;">lis</span><span class="pun" style="box-sizing: border-box;">.</span><span class="kwd" style="box-sizing: border-box;">get</span><span class="pun" style="box-sizing: border-box;">(</span><span class="lit" style="box-sizing: border-box; color: rgb(68, 85, 136);">0</span><span class="pun" style="box-sizing: border-box;">).</span><span class="pln" style="box-sizing: border-box;">getText</span><span class="pun" style="box-sizing: border-box;">()).</span><span class="pln" style="box-sizing: border-box;">toEqual</span><span class="pun" style="box-sizing: border-box;">(</span><span class="str" style="box-sizing: border-box; color: rgb(221, 17, 68);">'[ X ] 3*10|currency => $30.00'</span><span class="pun" style="box-sizing: border-box;">);</span><span class="pln" style="box-sizing: border-box;">
</span><span class="pun" style="box-sizing: border-box;">});</span></code>

One-time binding

: :是一次绑定表达式

6. Filter

可用于tempalte、controllers、services、directives等

参数：将要格式化的对象作为第一个参数，之后的作为filter参数。

7.Forms

controls输入数据：input、select、textarea

form与controls提供了validation服务

有效性验证的关键在于：ng-model，同时它琮提供了一个API用于其他的directives

（1）Simple Form

index.html

<div ng-controller="ExampleController">
  <form novalidate class="simple-form">
    Name: <input type="text" ng-model="user.name" /><br />
    E-mail: <input type="email" ng-model="user.email" /><br />
    Gender: <input type="radio" ng-model="user.gender" value="male" />male
    <input type="radio" ng-model="user.gender" value="female" />female<br />
    <button ng-click="reset()">RESET</button>
    <button ng-click="update(user)">SAVE</button>
  </form>
  <pre>form = {{user | json}}</pre>
  <pre>master = {{master | json}}</pre>
</div>

<script>
  angular.module('formExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.master = {};

      $scope.update = function(user) {
        $scope.master = angular.copy(user);
      };

      $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
      };

      $scope.reset();
    }]);
</script>

（2）CSS classes

ngMode中的一些CSS classes：

ng-valid

ng-invalid

ng-pristine

ng-dirty

ng-touched

ng-untouched

（3）Binding to form and control state

form是FormController的一个实例，可通过name 属性，将form放入到scope中

ngModel是NgModelController的一个实例，跟form一样，可以使用name属性作

eg:

<strong>index.html</strong>

<div ng-controller="ExampleController">
  <form name="form" class="css-form" novalidate>
    Name:
      <input type="text" ng-model="user.name" name="uName" required /><br />
    E-mail:
      <input type="email" ng-model="user.email" name="uEmail" required/><br />
    <div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid:
      <span ng-show="form.uEmail.$error.required">Tell us your email.</span>
      <span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
    </div>

    Gender: <input type="radio" ng-model="user.gender" value="male" />male
    <input type="radio" ng-model="user.gender" value="female" />female<br />

    <input type="checkbox" ng-model="user.agree" name="userAgree" required />
    I agree: <input ng-show="user.agree" type="text" ng-model="user.agreeSign"
              required /><br />
    <div ng-show="!user.agree || !user.agreeSign">Please agree and sign.</div>

    <button ng-click="reset()" ng-disabled="isUnchanged(user)">RESET</button>
    <button ng-click="update(user)"
            ng-disabled="form.$invalid || isUnchanged(user)">SAVE</button>
  </form>
</div>

</pre><pre code_snippet_id="449140" snippet_file_name="blog_20140819_53_539672" name="code" class="javascript"><strong>script.js</strong>

<pre style="box-sizing: border-box; overflow: auto; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; padding: 9.5px; margin-top: 0px; margin-bottom: 10px; line-height: 1.42857143; word-break: normal; word-wrap: break-word; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; white-space: pre-wrap; background-color: rgb(245, 245, 245);"><code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:undefined; padding: 0px; color: inherit; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; background-color: transparent;"><span class="pln" style="box-sizing: border-box;">angular</span><span class="pun" style="box-sizing: border-box;">.</span><span class="kwd" style="box-sizing: border-box;">module</span><span class="pun" style="box-sizing: border-box;">(</span><span class="str" style="box-sizing: border-box; color: rgb(221, 17, 68);">'formExample'</span><span class="pun" style="box-sizing: border-box;">,</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" style="box-sizing: border-box;">[])</span><span class="pln" style="box-sizing: border-box;">
  </span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">controller</span><span class="pun" style="box-sizing: border-box;">(</span><span class="str" style="box-sizing: border-box; color: rgb(221, 17, 68);">'ExampleController'</span><span class="pun" style="box-sizing: border-box;">,</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" style="box-sizing: border-box;">[</span><span class="str" style="box-sizing: border-box; color: rgb(221, 17, 68);">'$scope'</span><span class="pun" style="box-sizing: border-box;">,</span><span class="pln" style="box-sizing: border-box;"> </span><span class="kwd" style="box-sizing: border-box;">function</span><span class="pun" style="box-sizing: border-box;">(</span><span class="pln" style="box-sizing: border-box;">$scope</span><span class="pun" style="box-sizing: border-box;">)</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" style="box-sizing: border-box;">{</span><span class="pln" style="box-sizing: border-box;">
    $scope</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">master </span><span class="pun" style="box-sizing: border-box;">=</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" style="box-sizing: border-box;">{};</span><span class="pln" style="box-sizing: border-box;">

    $scope</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">update </span><span class="pun" style="box-sizing: border-box;">=</span><span class="pln" style="box-sizing: border-box;"> </span><span class="kwd" style="box-sizing: border-box;">function</span><span class="pun" style="box-sizing: border-box;">(</span><span class="pln" style="box-sizing: border-box;">user</span><span class="pun" style="box-sizing: border-box;">)</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" style="box-sizing: border-box;">{</span><span class="pln" style="box-sizing: border-box;">
      $scope</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">master </span><span class="pun" style="box-sizing: border-box;">=</span><span class="pln" style="box-sizing: border-box;"> angular</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">copy</span><span class="pun" style="box-sizing: border-box;">(</span><span class="pln" style="box-sizing: border-box;">user</span><span class="pun" style="box-sizing: border-box;">);</span><span class="pln" style="box-sizing: border-box;">
    </span><span class="pun" style="box-sizing: border-box;">};</span><span class="pln" style="box-sizing: border-box;">

    $scope</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">reset </span><span class="pun" style="box-sizing: border-box;">=</span><span class="pln" style="box-sizing: border-box;"> </span><span class="kwd" style="box-sizing: border-box;">function</span><span class="pun" style="box-sizing: border-box;">()</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" style="box-sizing: border-box;">{</span><span class="pln" style="box-sizing: border-box;">
      $scope</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">user </span><span class="pun" style="box-sizing: border-box;">=</span><span class="pln" style="box-sizing: border-box;"> angular</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">copy</span><span class="pun" style="box-sizing: border-box;">(</span><span class="pln" style="box-sizing: border-box;">$scope</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">master</span><span class="pun" style="box-sizing: border-box;">);</span><span class="pln" style="box-sizing: border-box;">
    </span><span class="pun" style="box-sizing: border-box;">};</span><span class="pln" style="box-sizing: border-box;">

    $scope</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">isUnchanged </span><span class="pun" style="box-sizing: border-box;">=</span><span class="pln" style="box-sizing: border-box;"> </span><span class="kwd" style="box-sizing: border-box;">function</span><span class="pun" style="box-sizing: border-box;">(</span><span class="pln" style="box-sizing: border-box;">user</span><span class="pun" style="box-sizing: border-box;">)</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" style="box-sizing: border-box;">{</span><span class="pln" style="box-sizing: border-box;">
      </span><span class="kwd" style="box-sizing: border-box;">return</span><span class="pln" style="box-sizing: border-box;"> angular</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">equals</span><span class="pun" style="box-sizing: border-box;">(</span><span class="pln" style="box-sizing: border-box;">user</span><span class="pun" style="box-sizing: border-box;">,</span><span class="pln" style="box-sizing: border-box;"> $scope</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">master</span><span class="pun" style="box-sizing: border-box;">);</span><span class="pln" style="box-sizing: border-box;">
    </span><span class="pun" style="box-sizing: border-box;">};</span><span class="pln" style="box-sizing: border-box;">

    $scope</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">reset</span><span class="pun" style="box-sizing: border-box;">();</span><span class="pln" style="box-sizing: border-box;">
  </span><span class="pun" style="box-sizing: border-box;">}]);</span></code>

（4）Custom triggers

ngModelOptions directive可用于具体的 events

eg：

ng-model-option= "{ updateOn: 'blur'}"

<strong>index.html</strong>

<div ng-controller="ExampleController">
  <form>
    Name:
    <input type="text" ng-model="user.name" ng-model-options="{ updateOn: 'blur' }" /><br />
    Other data:
    <input type="text" ng-model="user.data" /><br />
  </form>
  <pre>username = "{{user.name}}"</pre>
</div>

</pre><pre code_snippet_id="449140" snippet_file_name="blog_20140819_58_4945708" name="code" class="javascript">script.js

<pre style="box-sizing: border-box; overflow: auto; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; padding: 9.5px; margin-top: 0px; margin-bottom: 10px; line-height: 1.42857143; word-break: normal; word-wrap: break-word; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; white-space: pre-wrap; background-color: rgb(245, 245, 245);"><code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:undefined; padding: 0px; color: inherit; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; background-color: transparent;"><span class="pln" style="box-sizing: border-box;">angular</span><span class="pun" style="box-sizing: border-box;">.</span><span class="kwd" style="box-sizing: border-box;">module</span><span class="pun" style="box-sizing: border-box;">(</span><span class="str" style="box-sizing: border-box; color: rgb(221, 17, 68);">'customTriggerExample'</span><span class="pun" style="box-sizing: border-box;">,</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" style="box-sizing: border-box;">[])</span><span class="pln" style="box-sizing: border-box;">
 </span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">controller</span><span class="pun" style="box-sizing: border-box;">(</span><span class="str" style="box-sizing: border-box; color: rgb(221, 17, 68);">'ExampleController'</span><span class="pun" style="box-sizing: border-box;">,</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" style="box-sizing: border-box;">[</span><span class="str" style="box-sizing: border-box; color: rgb(221, 17, 68);">'$scope'</span><span class="pun" style="box-sizing: border-box;">,</span><span class="pln" style="box-sizing: border-box;"> </span><span class="kwd" style="box-sizing: border-box;">function</span><span class="pun" style="box-sizing: border-box;">(</span><span class="pln" style="box-sizing: border-box;">$scope</span><span class="pun" style="box-sizing: border-box;">)</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" style="box-sizing: border-box;">{</span><span class="pln" style="box-sizing: border-box;">
   $scope</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">user </span><span class="pun" style="box-sizing: border-box;">=</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" style="box-sizing: border-box;">{};</span><span class="pln" style="box-sizing: border-box;">
 </span><span class="pun" style="box-sizing: border-box;">}]);</span></code>

（5）model延迟更新（debounced）

eg：ng-model-options="{ debounce: 500 }"将会在内容改变后半分钟后触发model的更新及form的验证

8. i18n 与 l10n

Angular支持i18n/l10n中的date、number及currency filters

Angular通过ngPluralize directive支持localizable pluralization

所有的localizable Angular组件均领带于由$locale服务管理的locale-specific规则

locale ：

language code及country code

eg：en-US、en-AU、zh-CN等均有效

给Angular提供locale rules

eg：

（1）Pre-bundled rule sets

eg:

<span class="pln" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13.333333969116211px; line-height: 20.000001907348633px; white-space: nowrap;">cat angular</span><span class="pun" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13.333333969116211px; line-height: 20.000001907348633px; white-space: nowrap;">.</span><span class="pln" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13.333333969116211px; line-height: 20.000001907348633px; white-space: nowrap;">js i18n</span><span class="pun" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13.333333969116211px; line-height: 20.000001907348633px; white-space: nowrap;">/</span><span class="pln" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13.333333969116211px; line-height: 20.000001907348633px; white-space: nowrap;">angular</span><span class="pun" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13.333333969116211px; line-height: 20.000001907348633px; white-space: nowrap;">-</span><span class="pln" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13.333333969116211px; line-height: 20.000001907348633px; white-space: nowrap;">locale_de</span><span class="pun" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13.333333969116211px; line-height: 20.000001907348633px; white-space: nowrap;">-</span><span class="pln" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13.333333969116211px; line-height: 20.000001907348633px; white-space: nowrap;">de</span><span class="pun" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13.333333969116211px; line-height: 20.000001907348633px; white-space: nowrap;">.</span><span class="pln" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13.333333969116211px; line-height: 20.000001907348633px; white-space: nowrap;">js </span><span class="pun" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13.333333969116211px; line-height: 20.000001907348633px; white-space: nowrap;">></span><span class="pln" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13.333333969116211px; line-height: 20.000001907348633px; white-space: nowrap;"> angular_de</span><span class="pun" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13.333333969116211px; line-height: 20.000001907348633px; white-space: nowrap;">-</span><span class="pln" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13.333333969116211px; line-height: 20.000001907348633px; white-space: nowrap;">de</span><span class="pun" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13.333333969116211px; line-height: 20.000001907348633px; white-space: nowrap;">.</span><span class="pln" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13.333333969116211px; line-height: 20.000001907348633px; white-space: nowrap;">js</span>

<span class="pln" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13.333333969116211px; line-height: 20.000001907348633px; white-space: nowrap;">（2）Including a locale script in index.html</span>

<pre class="ng-scope" style="box-sizing: border-box; overflow: auto; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; padding: 9.5px; margin-top: 0px; margin-bottom: 10px; line-height: 1.42857143; word-break: normal; word-wrap: break-word; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; white-space: pre-wrap; background-color: rgb(245, 245, 245);"><code class="lang-html" style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:undefined; padding: 0px; color: inherit; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; background-color: transparent;"><span class="tag" style="box-sizing: border-box; color: navy;"><html</span><span class="pln" style="box-sizing: border-box;"> </span><span class="atn" style="box-sizing: border-box; color: teal;">ng-app</span><span class="tag" style="box-sizing: border-box; color: navy;">></span><span class="pln" style="box-sizing: border-box;">
 </span><span class="tag" style="box-sizing: border-box; color: navy;"><head></span><span class="pln" style="box-sizing: border-box;">
….
   </span><span class="tag" style="box-sizing: border-box; color: navy;"><script</span><span class="pln" style="box-sizing: border-box;"> </span><span class="atn" style="box-sizing: border-box; color: teal;">src</span><span class="pun" style="box-sizing: border-box;">=</span><span class="atv" style="box-sizing: border-box; color: rgb(221, 17, 68);">"angular.js"</span><span class="tag" style="box-sizing: border-box; color: navy;">></script></span><span class="pln" style="box-sizing: border-box;">
   </span><span class="tag" style="box-sizing: border-box; color: navy;"><script</span><span class="pln" style="box-sizing: border-box;"> </span><span class="atn" style="box-sizing: border-box; color: teal;">src</span><span class="pun" style="box-sizing: border-box;">=</span><span class="atv" style="box-sizing: border-box; color: rgb(221, 17, 68);">"i18n/angular-locale_de-de.js"</span><span class="tag" style="box-sizing: border-box; color: navy;">></script></span><span class="pln" style="box-sizing: border-box;">
….
 </span><span class="tag" style="box-sizing: border-box; color: navy;"></head></span><span class="pln" style="box-sizing: border-box;">
</span><span class="tag" style="box-sizing: border-box; color: navy;"></html></span></code>