赞
踩
主要介绍AngularJs的特性、应用骨架、应用剖析、与服务器的交互、及简单的Demo
AngularJS是一款来自Google的前端JS框架。简称其为 ng 。这款框架最核心特性有:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。
AngularJS框架通过TDD(测试驱动)的方式开发的,从这个角度看,AngularJS是敏捷开发的一次成功实践。
使用了指令的概念,AngularJS对DOM操作进行了彻底的封装。
AngularJS框架是完全免费开源的。
关于 ng 的几点:
第一个Demo,HelloDynamic.html
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller='HelloController'>
<input ng-model='greeting.text'>
<p>{
{
greeting.text}}, World</p>
</div>
</body>
</html>
controllers.js
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
我们没有在输入框中注册任何change事件监听器就可以让UI自动刷新,AngularJs会自动把输入框和花括号中的文本更新为所获得值。
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
当然
这种神奇的效果是通过Angular的依赖注入机制实现的。
我们在模板中看到一些新的属性,这些属性不属于HTML规范。我们引进了花括号用来实现数据的绑定;引入了ng-controller用来指定每个控制器负责监视视图的哪个部分;引入了ng-model,用来把输入数据绑定到模型中的以部门属性上。我们把这些叫做HTML扩展命令。
<html ng-app>
<head>
<title>Your Shopping Cart</title>
</head>
<body ng-controller='CartController'>
<h1>Your Shopping Cart</h1>
<div ng-repeat='item in items'>
<span>{
{
item.title}}</span>
<input ng-model='item.quantity'>
<
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。