您的位置：首页 > Web前端 > AngularJS

AngularJS learning01

2016-04-11 00:00 639 查看

第一个angularJS程序：

<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
Hello {{'World'}}!
</body>
</html>

＝》Hello World！

<html ng-app>:

ng-app

指令标记了AngularJS脚本的作用域，在

<html>

中添加

ng-app

属性即说明整个

<html>

都是AngularJS脚本作用域。开发者也可以在局部使用

ng-app

指令，如

<div ng-app>

，则AngularJS脚本仅在该

<div>

中运行。

{{'World'}}：这部分为应用的模版，使用双大括号标记

{{}}

的内容是问候语中绑定的表达式，这个表达式是一个简单的字符串‘World’

AngularJS的双向数据绑定（bi-directional data binding）：

<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
Your name: <input type="text" ng-model="yourname" placeholder="World">
<hr>
Hello {{yourname || 'World'}}!
</body>
</html>

文本输入指令

<input ng-model="yourname" />

绑定到一个叫

yourname

的模型变量。

双大括号标记将

yourname

模型变量添加到问候语文本。

输入框的任何更改会立即反映到模型变量（一个方向），模型变量的任何更改都会立即反映到问候语文本中（另一方向）。从而不需要为该应用设置另一个事件监听器。

AngularJS的mvc映射原理：

AngularJS通过作用域来保持数据模型与视图界面UI的双向同步。一旦模型状态发生改变，AngularJS会立即刷新反映在视图界面中，反之亦然。

AngularJS与标准AJAX应用程序不同，不需要另外编写侦听器或DOM控制器，因为它们已经内置到AngularJS中了。

模板（Templates）：

你可以使用HTML和CSS编写模板，展现应用的界面，对应于MVC的视图。您可给HTML添加新的标记元素和属性，AngularJS编译器把它们理解为指令。

AngularJS种子项目:

由angularJS种子项目构建自己的项目，git地址：https://github.com/angular/angular-seed.git
$ npm install 安装依赖

$npm start 启动服务器
http://localhost:8000/app/index.html 访问angular应用测试页面

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： AngularJS

相关文章推荐

新的分享

章节导航