1. 入门

AngularJS 模块

模块名 描述
ng AngularJS的默认模块，包含AngularJS的所有核心组件。
ngRoute AngularJS是一套前端的MVC框架。那么，为了实现视图的中转，肯定会涉及到路由的概念。ngRoute即是AngularJS的路由模块。
ngAnimate AngularJS的动画模块，使用ngAnimate各种核心指令能为你的应用程序提供动画效果。动画可使用css或者JavaScript回调函数。
ngAria 使用ngaria为指令注入共同的可达性属性和提高残疾人用户体验。
ngResource 当查询和发送数据到一个REST 服务器时，使用ngResource模块。
ngCookies ngCookies模块提供了一个方便的包用于读取和写入浏览器的cookies。
ngTouch ngRoute模块提供触摸事件，方便的应用于移动触摸设备。它的实现是实现是基于jQuery移动触摸事件处理。
ngSanitize ngSanitize模块可安全地在你的应用程序中解析和操作HTML数据。
ngMessages AngularJS表单验证模块。ngMessages模块完美的实现了很多表单验证的常用功能，简化你的开发流程。

一 AngularJS的双向数据绑定

  1. <!doctype html>
  2. <html ng-app>
  3.   <head>
  4.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  5.   </head>
  6.   <body>
  7.     <div>
  8.       <label>Name:</label>
  9.       <input type="text" ng-model="yourName" placeholder="Enter a name here">
  10.       <hr>
  11.       <h1>Hello {{yourName}}!</h1>
  12.     </div>
  13.   </body>
  14. </html>

首先引入AngularJS的头文件。

  1. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

或者

  1. <script src="http://code.angularjs.org/1.2.25/angular.min.js"></script>

当加载该页时，标记ng-app告诉AngularJS处理整个HTML页并引导应用：

  1. <html ng-app>

指令ng-model将<input>输入的值绑定到了变量yourname。

  1. <h1>Hello {{yourName}}!</h1>

angularjs表达式用双括号{{ }}形式表示，他会对包裹的yourname变量进行解析。指令ng-model一将<input>输入的值绑定到了变量yourname，{{yourname}}就解析出来了。这个过程是同步的，而且是双向的。