码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS理论基础

时间:2015-10-09 00:29:30      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:

                                AngularJS理论基础

AngularJs是一个用于设计动态web应用的结构框架。

 

它是一个框架,不是类库,是像EXT一样提供一整套方案用于设计web应用。它不仅仅是一个javascript框架,因为它的核心其实是对HTML标签的增强。使你能够用标签完成一部分页面逻辑,具体方式就是通过自定义标签、自定义属性等,这些HTML原生没有的标签/属性在ng中有一个名字:指令(directive)。web应用能为用户提供丰富的操作,能够随用户操作不断更新视图而不进行url跳转。ng官方也声明它更适用于开发CRUD应用,即数据操作比较多的应用,而非是游戏或图像处理类应用。为了实现这些,它引入了一些非常棒的特性,包括模板机制、数据绑定、模块、指令、依赖注入、路由。通过数据与模板的绑定,能够让我们摆脱繁琐的DOM操作,而将注意力集中在业务逻辑上。

 

AngularJS依赖注入:和主动获取相反,是对数据的被动接收

 

关于$scope
1.scope是有层次关系的;

 

2.在主模块加载时就有一个默认的$scope,称为$rootscope(根scope),是所有scope的父作用空间,在没有其他指定的scope时都是默认的rootscope,有指定的scope时,运行它本身;

 

3.其他指定的scope时,各自也是在指定的作用空间内起作用。

表达式
1.可以做比较;

2.同时逻辑运算都可以使用;

3.加减乘除等等。

过滤器
currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)

指令(directive)
模板中可以使用的东西包括以下四种:

1.指令(directive):ng提供的或者自定义的标签和属性,用来增强HTML表现力;

2.标记(markup):即双大括号{{}},可将数据单向绑定到HTML中;

3.过滤器(filter):用来格式化输出数据;

4.表单控制:用来增强表单的验证功能。

5.样式相关的指令:ng-class

<div ng-class=”{redtext:{{red}}, boldtext:{{bold}}, striketext:{{strike}}}” ></div>
ng-style

<div ng-style="{color:‘red‘}">ng-style测试</div>
6.对于常用的表单控件功能,ng也做了封装,方便灵活控制。

  <1>.ng-checked控制radio和checkbox的选中状态

  <2>.ng-selected控制下拉框的选中状态

  <3>.ng-disabled控制失效状态

  <4>.ng-multiple控制多选

  <5>.ng-readonly控制只读状态

7.事件绑定相关指令

 <1>.ng-click

 <2>.ng-change

 <3>.-dblclick

 <4>.-mousedown

 <5>.-mouseenter

 <6>.-mouseleave

 <7>.-mousemove

 <8>.-mouseover

 <9>.-mouseup

 <10>.ng-submit

Angularjs与jQuery之间的区别:
Ng:它是一种基于MVVM理念的前端框架,模型与视图相互绑定的方法,利用$scope把模型内的东西显示在视图上,完成相应的双向绑定,不需要对DOM进行任何操作。依赖注入是Ng中的重要理念:想要的东西不需要自己去创建,只需要申明后接收注入。
jQ:它是对js的一种封装,本质上还是js的方法,还是对DOM进行了大量的操作。

$watch:
$scope的监听列表,是一个队列。只有和视图绑定的才会添加到监听列表,监听列表不断检测数据的改变,但他会不断的马上响应检测和改变,所以引出$digest。

$digest:
专门循环监听列表$watch。如果$watch的某一个元素的数据不一样,就对该元素数据的改变进行暂时保存,再用回调函数循环检测下一个改变,直到队列中所有的改变停止后再发送。但是在$digest中不能过多的引起改变。

$digest循环的启动条件:$scope的数据的改变必须在Anglurjs的上下文范围。如何保持在Anglurjs的上下文范围,就有了$apply。

$apply:
Anglurjs的上下文中的一个对象,可以把不在Anglurjs上下文范围的元素放在$apply中,给他形成一个Anglurjs上下文。

 

AngularJS理论基础

标签:

原文地址:http://www.cnblogs.com/shanhaihong/p/4862640.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!