模块名 | 描述 |
---|---|
ng |
AngularJS的默认模块,包含AngularJS的所有核心组件。 |
ngRoute |
AngularJS是一套前端的MVC框架。那么,为了实现视图的中转,肯定会涉及到路由的概念。 |
ngAnimate | AngularJS的动画模块,使用 |
ngAria | 使用 |
ngResource | 当查询和发送数据到一个REST 服务器时,使用 |
ngCookies |
|
ngTouch |
|
ngSanitize |
|
ngMessages | AngularJS表单验证模块。 |
Hello word
程序<!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}}
就解析出来了。这个过程是同步的,而且是双向的。