AngularJs学习笔记(1)--简介和数据绑定

来源：互联网发布：芒果tv会员账号淘宝编辑：程序博客网时间：2024/06/15 03:08

http://xlows.blog.51cto.com/5380484/1425136

最近一个多月在公司开发angular之于公司的模板，在网上看了各种资料，这套笔记主要是在学习了小猫杯的视频后的学习笔记。

视频地址：

http://www.kittencup.com/angularjs-%E4%B8%AD%E6%96%87%E5%85%8D%E8%B4%B9%E8%B6%85%E6%B8%85%E8%A7%86%E9%A2%91%E7%9B%AE%E5%BD%95/

(1)简介

AngularJS是谷歌公司写的一套JavaScript框架，最炫的功能在于实现了双向绑定，他主要是为了减轻开发人员在开发AJAX应用中的痛苦。

(2)概念

客户端模板
angular中，模板和数据都会被发送到浏览器中，然后在客户端进行装配
MVC
MVC是指把model,view,controller清晰的分离开，在angular中视图就是DOM，控制器就是javascript类，数据模型则存储在对象的属性中
数据绑定(MVVM)
数据绑定可以自动将model和view间的数据同步。
angular实现数据绑定的方式，可以让我们把model当做程序中唯一可信的数据来源。view始终是model的投影。当model发送变化时，会自动反应到view上。
依赖注入

angular的依赖注入只是简单的获取它所需要的东西，而不需要创建那些他们所依赖的东西

(3)数据绑定

首先介绍几个angular自带的指令和表达式

1.ng-app

ng-app指令告诉angular应该管理页面中的哪一块，如果要管理整个页面可以现在html里或者body里，如果只管理一块地方可以写在div里

2.在angular中表达式通过$parse服务解析执行，所有属性的求值是对于scope的，而且对于undefined和null，angular是宽容的。{{}}是最常见的angular表达式。

3.ng-model

简单的说，可以理解为当前组件的value值为ng-model对应的值。

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body ng-app>
 
    <!--
        view => 12131
        model => 12131
        3个 view
        数据是双向绑定的
 
    -->
    <input type="text" ng-model="name" value=""/>
 
    <!--angular的表达式-->
    {{ name }}
 
    <input type="text" ng-model="name" value=""/>
 
    <script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
 
</body>
</html>

在这里通过ng-model进行绑定，在页面中改变任意一个输入框,另外一个输入框和label都会相应改变，这就是数据的双向绑定。

0 0