什么是augular?
--augular是一个前台的mvc框架
--可以建立单页面应用
--对html进行拓展
先上个例子
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div ng-app="">
<input ng-model="name" type="text"/>
<p ng-bind="name"></p>
</div>
</body>
</html>
<script src="lib/angular-1.2.5.min.js"></script>
<script>
</script>
使用ng-model 来建立model ng是ng的关键词
augular表达式
<div ng-app="" ng-init="tt=1;gg=4">{{ tt * gg }}</div>
//output 4
<div ng-app="" ng-init="tt=1;gg=4">
<div ng-bind="tt * gg"></div>
</div>
//output 4
<div ng-app="" ng-init="tt='my name';gg='gjc9620'">
<div ng-bind="tt+' '+ gg"></div>
</div>
//output
my name gjc9620
<div ng-app="" ng-init="tt='my name';gg='gjc9620'">
<div>{{tt + '' + gg}}</div>
</div>
//output
my name gjc9620
augular 对象
<div ng-init=' child={name:"adas",age:12} '>
<div ng-bind="child.name"></div>
</div>
//output
adas
同样的
<div ng-init =' pp={name:"44",age:14}'>
<div >{{pp.name}}</div>
</div>
/output 44
augular 数组
<div ng-init=' child=[1,23,4] '>
<div ng-bind="child[0]"></div>
</div>
//output 1
<div ng-init =' pp=[3,4,5,1]'>
<div >{{pp[2]}}</div>
</div>
//output 5
AngularJS 指令
AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把应用程序数据绑定到 HTML 元素。
<div ng-app="" ng-init="tom={name:'alice',age18}">
<input type="text" ng-model="tom.name"/>
<div >{{tom.name}}</div>
</div>
结果
ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者"。 |
一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。 |
数据绑定
上面实例中的 {{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。
AngularJS 中的数据绑定,同步了 AngularJS 表达式与 AngularJS 数据。
{{ firstName }} 是通过 ng-model="firstName" 进行同步。
在下一个实例中,两个文本域是通过两个 ng-model 指令同步的:
<div ng-app="" ng-init="time=0;range=0">
<input ng-model="time"/>
<input ng-model="range"/>
<div>{{range/time}}</div>
</div>
输出
使用ng-init并不是最好的声明方式 |
重复 HTML 元素
ng-repeat 指令会重复一个 HTML 元素:
<div ng-init="person=['tom','jam','aaa']">
<div ng-repeat=" x in person ">
{{x}}
</div>
</div>
//output
<div ng-init="person=[{name:'good',age:123},{name:'bad',age:456},{name:'tt',age:12}]">
<div ng-repeat=" x in person ">
{{x.name+" "+x.age}}
</div>
</div>
//output
AngularJS 完美支持数据库的 CRUD(增加Create、读取Read、更新Update、删除Delete)应用程序。 把实例中的对象想象成数据库中的记录。 --与backbone的逻辑基本一致属于数据库映射模型 |
小总结
ng-app 指令
ng-app 指令定义了 AngularJS 应用程序的 根元素。
ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序。
ng-app 通过设置值(比如 ng-app="myModule")连接到代码模块。
ng-init 指令
ng-init 指令为 AngularJS 应用程序定义了 初始值。
通常情况下,不使用 ng-init。一般使用一个控制器或模块来代替。
ng-model 指令
ng-model 指令 绑定 HTML 元素 到应用程序数据。
ng-model 指令也可以:
- 为应用程序数据提供类型验证(number、email、required)。
- 为应用程序数据提供状态(invalid 无效的、dirty 污染的、touched 涉及的、error 错误的)。
- 为 HTML 元素提供 CSS 类。
- 绑定 HTML 元素到 HTML 表单。
ng-repeat 指令
ng-repeat 指令对于集合中(数组中)的每个项会 克隆一次 HTML 元素。