AngularJS学习笔记一AngularJS简介
2014-04-07 19:51
435 查看
AngularJS是一款来自Google的前端JS框架,它的核心特性有:MVC、双向数据绑定、指令和语义化标签、模块化工具、依赖注入、HTML模板、以及对常用工具的封装,例如$http、$cookies、$location等。我们可以到http://www.angularjs.org/下载AngularJS。
AngularJS框架的体积非常小,但是设计理念和功能却非常强大,值得前端开发者深入学习。
先来看一个小例子:
[/code]
用任意浏览器打开可以看到:”Hello,Word“。
我们没有在输入框注册任何事件,也没有输入任何内容,就可以让UI自动刷新了。这一机制对于来自服务器的数据同样有效,
在我们控制器(HelloController )中,可以向服务器发起一次请求,获取响应,然后把$scope.greeting.text设置为服务器端返回的内容。
Angular就会自动把花括号的文本更新为新的值。
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 的构造方法,或者指定何时去调用它。
AngularJS框架的体积非常小,但是设计理念和功能却非常强大,值得前端开发者深入学习。
先来看一个小例子:
<!DOCTYPE html>
[code]<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app>
<div ng-controller="HelloController">
<p>{{greeting.text}},Word</p>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
function HelloController($scope){
$scope.greeting={text:"Hello"};
}
</script>
</body>
</html>
[/code]
用任意浏览器打开可以看到:”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 的构造方法,或者指定何时去调用它。
相关文章推荐
- angularjs学习笔记二——代码结构简介
- angularjs学习笔记1-angular总体简介及其特点
- angularjs学习第六天笔记(指令简介学习)
- angularjs学习第六天笔记(指令简介学习)
- 机器学习笔记(1)-简介监督学习与无监督学习
- angularjs学习笔记之三(变量及过滤器Filter的使用)
- Lucene 学习笔记 01 —— Lucene 的使用简介和开发步骤
- USB2.0学习笔记连载(二):USB基础知识简介
- Guava学习笔记:Google Guava 类库简介
- HTML5学习笔记三 HTML元素、属性、标题、段落简介
- Guava学习笔记:Google Guava 类库简介
- SSM框架学习笔记(一)简介以及Spring框架介绍
- Redis学习笔记——简介及配置
- Angularjs 学习笔记(一)基础
- AngularJS学习笔记1
- C++学习笔记(三)STL简介(二)
- (原创)c#学习笔记08--面向对象编程简介01--面向对象编程的含义01--对象的含义02--方法
- ECMAScript6-学习笔记(简介)
- NIO学习笔记——操作系统与I/O交互简介
- JAVA学习笔记47——其他容器简介4:guava之MulitiSet、MultiMap、BiMap、Table