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

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

转载最新推荐文章于 2023-06-04 10:23:37 发布 · 445 阅读

JS 同时被 2 个专栏收录

122 篇文章

订阅专栏

AngularJS

10 篇文章

订阅专栏

本文介绍了AngularJS框架的核心特性之一——数据绑定。AngularJS由谷歌开发，旨在简化AJAX应用程序的开发过程。文章详细解释了AngularJS如何实现数据与视图的双向绑定，并通过实例展示了如何使用ng-model等指令来实现这一功能。

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
        >