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

最新推荐文章于 2023-06-04 10:23:37 发布

简单的绿竹

最新推荐文章于 2023-06-04 10:23:37 发布

阅读量398

点赞数

分类专栏： AngularJS JS

JS 同时被 2 个专栏收录

122 篇文章 0 订阅

订阅专栏

AngularJS

10 篇文章 0 订阅

订阅专栏

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对应的值。

例如：

 
        <!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

收藏

觉得还不错? 一键收藏
0
评论
AngularJs学习笔记(1)--简介和数据绑定

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%
复制链接

扫一扫

专栏目录