AngularJS简介
AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事。
通常,我们是通过以下技术来解决静态网页技术在构建动态应用上的不足:
类库 - 类库是一些函数的集合,它能帮助你写WEB应用。起主导作用的是你的代码,由你来决定何时使用类库。类库有:jQuery等
框架 - 框架是一种特殊的、已经实现了的WEB应用,你只需要对它填充具体的业务逻辑。这里框架是起主导作用的,由它来根据具体的应用逻辑来调用你的代码。框架有:knockout、sproutcore等。
AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为标识符(directives)的结构,让浏览器能够识别新的语法。例如:
1)使用双大括号{{}}语法进行数据绑定;
2)使用DOM控制结构来实现迭代或者隐藏DOM片段;
3)支持表单和表单的验证;
4)能将逻辑代码关联到相关的DOM元素上;
5)能将HTML分组成可重用的组件。
以上摘自百度百科。
了解了下AngularJS对IE8+,google,firefox等浏览器支持的比较好,对IE8需要引入专门的包去解决。
AngularJS版Hello World!
<!doctype html>
<html ng-app>
<!-- ng-app标记告诉AngularJs处理整个HTML页并引导应用
并且标记了AngularJs脚本的作用域,是这个html
可以将ng-app添加到任何标签上,作用域就是该标签之间运行
-->
<head>
<meta charset="UTF-8"/>
<title>AngularJs 版 HelloWord</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
</head>
<body>
Hello{{'World'}}!<br/>
以上World的作为一个常量值来显示
<input type="text" ng-model="yxkong" placeholder="yxkong"></br>
<!--
ng-model="yxkong" 绑定一个叫yxkong的模型变量上
placeholder="World" 文本框显示默认值
{{}}标记将模型变量添加到目的地
|| 相当于判断语句,或者说是默认值,如果{{}}绑定的变量没有值的话,目标地默认显示||后面的值yxk,如:刚开始显示 Hello 鱼翔空!
在输入的时候输入框的任何更改会立即反映到模型变量上
模型变量上的任何更改都会立即反映到目的地上
-->
Hello {{yxkong||'鱼翔空'}}!<br>
</body>
</html>
ng案例
演示效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app>
<head>
<meta charset="UTF-8"/>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
<script src="http://yxkong.com/demo/myController.js"></script>
</head>
<body ng-controller="BookController">
我有{{bookList.length}}本书<input type="search" ng-model='s' placeholder="要找的关键词"/>
<ul ng-repeat="book in bookList | filter:s">
<li >
<!--
ngRepeat 指令 是一个迭代指令 类似于foreach 和struts2中的迭代器差不多
每次从集合中拿到一个item实例,在各自的作用域中,每个实例都有一个独立的内存空间
$index 是索引
filter 过滤器 s 是ng-model定义的filter模型,使用filter必须使用type="search"的文本框
-->
[{{$index+1}}] {{book.name}} {{book.price}} {{book.desc}} {{book}}
</li>
</ul>
<table>
<tr><th>行</th></tr>
<tr ng-repeat="i in [0,1,3,4,5,6,7,8]"><td>{{$i+i}}</td></tr>
</table>
</body>
</html>
myController.js
BookController=function($scope){
$scope.bookList=[{"name":"深入浅出Ext Js ","price":"44元","desc":"一本介绍ExtJs的书"},
{"name":"数据结构与算法分析","desc":"买来就没怎么看过,感觉好深奥","price":"55元"},
{"name":"mongoDB 权威指南","desc":"觉的要学下nosql数据库了,就买来了","price":"22元"},
{"name":"深入学习mongoDB","desc":"和mongoDb配套买的","price":"21元"},
{"name":"spring 技术内幕","desc":"这个也没怎么看过,没有达到预期值","price":"50元"}];
$scope.s="mongo";//给search文本框的模型赋初始值
}