AngularJS学习笔记一AngularJS简介
AngularJS是一款来自Google的前端JS框架,它的核心特性有:MVC、双向数据绑定、指令和语义化标签、模块化工具、依赖注入、HTML模板、以及对常用工具的封装,例如$http、$cookies、$location等。我们可以到http://www.angularjs.org/下载AngularJS。
AngularJS框架的体积非常小,但是设计理念和功能却非常强大,值得前端开发者深入学习。
先来看一个小例子:
1: <!DOCTYPE html>
2: <html>
3: <head lang="en">
4: <meta charset="UTF-8">
5: <title></title>
6: </head>
7: <body ng-app>
8: <div ng-controller="HelloController">
9: <p>{{greeting.text}},Word</p>
10: </div>
11: <script type="text/javascript" src="angular.min.js"></script>
12: <script type="text/javascript">
13: function HelloController($scope){
14: $scope.greeting={text:"Hello"};
15: }
16: </script>
17: </body>
18: </html>
用任意浏览器打开可以看到:”Hello,Word“。
我们没有在输入框注册任何事件,也没有输入任何内容,就可以让UI自动刷新了。这一机制对于来自服务器的数据同样有效,
在我们控制器(HelloController )中,可以向服务器发起一次请求,获取响应,然后把$scope.greeting.text设置为服务器端返回的内容。
Angular就会自动把花括号的文本更新为新的值。
<body ng_app>
ng-app属性将用来告诉Angular页面中的哪一部分需要接受它的管理。我们把ng-app放在<body>标签上,就是告诉
Angular,我们希望他管理body里面的所有标签,你也可以把它放到单独的标签上比如<div>上。
<div ng-controller=”HelloController ”>
在Angular中,你将会使用一种叫控制器的JavaScrip类来管理页面中的区域。在div标签中引入一个控制器,就是在声明
HelloController 将会管理介于<div>和</div>之间的所有内容。<p>{{greeting.text}}</p>通过{{}}进行数据绑定让我们可以把变量的值插入到页面的一部分中,同时能保证它会自动同步。Angular还有ng-repeat指令:<div ng-repeat=”item in items”></div>它可以让div重复items。ng-model:<input ng-model=”greeting.text”>会在输入框和greeting.text之间创建数据绑定关系。{{}}与ng-model的区别是:前者为单向关系,只是输入到界面上;后者为双向绑定保持变更与模型同步,用户输入了新值就会自动更新greeting.text的值。Angular还有很多指令,我们还能自己编写指令,稍后几篇我们会详细介绍。
与其他方法相比,需要注意:
1:HTML里面没有class或者ID来标记在那里添加时间监听器。
2:当HelloController 把greeting.text设置成hello的时候,我们没有必要注册任何事件监听器或者编写任何回调函数。
3:HelloController 只是一个普通的JavaScript类,并且不需要继承Angular所提供的任何东西。
4:HelloController 可以获取到他需要的$scope对象,而没必要去创建它。
5:没有必要自己调用HelloController 的构造方法,或者指定何时去调用它。