AngularJS 实例

自己尝试一下

您可以在线编辑示例，然后单击按钮查看结果。

AngularJS 实例

<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p>You wrote: {{ name }}</p>
</div>

亲自试一试

AngularJS 基础

• 我的第一个 AngularJS 指令
• 我的第一个 AngularJS 指令（符合 HTML5 标准）
• 我的第一个 AngularJS 表达式
• 一个简单的 AngularJS 表达式，使用变量
• 我的第一个 AngularJS 控制器

基本 AngularJS 介绍

AngularJS 表达式

• 一个简单的表达式
• 没有 ng-app 的表达式
• 包含数字的表达式
• 使用 ng-bind 绑定数字
• 包含字符串的表达式
• 使用 ng-bind 绑定字符串
• 包含对象的表达式
• 使用 ng-bind 绑定对象
• 包含数组的表达式
• 使用 ng-bind 绑定数组

表达式介绍

AngularJS 模块

• AngularJS 控制器
• 文件中的模块和控制器
• 何时加载 AngularJS

模块介绍

AngularJS 指令

• AngularJS 指令
• ng-model 指令
• ng-repeat 指令（用于数组）
• ng-repeat 指令（用于对象）
• 创建一个新指令
• 将新指令用作元素
• 将新指令用作属性
• 将新指令用作类
• 将新指令用作注释
• 带有限制的指令

指令介绍

AngularJS 模型

• AngularJS 模型
• 具有双向绑定的模型
• 具有验证的模型
• 表单及其当前验证状态
• 字段无效时设置 CSS 类

模型介绍

AngularJS 控制器

• AngularJS 控制器
• 控制器属性
• 控制器函数
• JavaScript 文件中的控制器 I
• JavaScript 文件中的控制器 II

控制器介绍

AngularJS 作用域

• AngularJS 作用域
• 作用域是同步的
• 不同的作用域
• 根作用域

作用域介绍

AngularJS 过滤器

• 表达式过滤器 uppercase
• 表达式过滤器 lowercase
• 表达式过滤器 currency
• 指令过滤器 orderBy
• 输入过滤器

过滤器介绍

AngularJS XMLHttpRequest

• 读取静态 JSON 文件

XMLHttpRequest 介绍