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模块完美的实现了很多表单验证的常用功能,简化你的开发流程。

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

在右边文本框输入"world",是否看到了神奇的一幕。没错,这就是AngularJS的双向数据绑定。

现在让我们仔细看看代码,看看到底怎么回事。

首先引入AngularJS的头文件。

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

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

<html ng-app>

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

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

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