AngularJS理论基础
AngularJS理论基础
AngularJs是一个用于设计动态web应用的结构框架。
它是一个框架,不是类库,是像EXT一样提供一整套方案用于设计web应用。它不仅仅是一个javascript框架,因为它的核心其实是对HTML标签的增强。使你能够用标签完成一部分页面逻辑,具体方式就是通过自定义标签、自定义属性等,这些HTML原生没有的标签/属性在ng中有一个名字:指令(directive)。web应用能为用户提供丰富的操作,能够随用户操作不断更新视图而不进行url跳转。ng官方也声明它更适用于开发CRUD应用,即数据操作比较多的应用,而非是游戏或图像处理类应用。为了实现这些,它引入了一些非常棒的特性,包括模板机制、数据绑定、模块、指令、依赖注入、路由。通过数据与模板的绑定,能够让我们摆脱繁琐的DOM操作,而将注意力集中在业务逻辑上。
AngularJS的四大核心特性:
1.MVC:Model(数据模型层)-Controller(业务逻辑和控制逻辑)-View(视图层 负责展示)
为什么需要MVC:职责清晰,代码模块化,有利于代码的复用,有利于后期维护(修改一块功能不影响其他模块)。
前端MVC的困难:操作DOM的代码必须等待整个页面全部加载完成才可以执行;多个JS文件之间如果出现互相依赖,程序员必须自己解决;JS的原型继承也给前端编程带来很多困难。
AngularJS中的controller:
controller使用过程中的注意点:
1:不要试图去复用controller,一个控制器一般只负责一小块的视图;
2:不要在controller中操作DOM,这不是控制器的职责所在;
3:不要在controller里面做数据格式化,ng有很好用的表单控件;
4:不要在controller里面做数据过滤操作,ng有$filter服务;
5:一般来说,controller是不会互相调用,控制器之间的交互通过事件进行。
AngularJS中的Module:
2.模块化
<!doctype html>
<html ng-app>
<head>
<mate charset="utf-8">
</head>
<body>
<div ng-controller="HelloAngularJs">//控制器controller
<p>{{greeting.text}},Angular</p>//P标签:视图view ;{{}}:数据模型module
</div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script>
//非模块化
function HelloAngular($scope){
$scope.grerting={
text:'hello'
};
}
//模块化
var myMoudel=angular.module("HelloAngular",[]);
myMoudel.controller("hellorAngular",['$scope',//依赖注入
function HelloAngular($scope){
$scope.grerting={
text:'hello'
};
}
])
</script>
</html>
AngularJS依赖注入:和主动获取相反,是对数据的被动接收
关于$scope
1.$scope是POJO(Plain Old Javascript Object);
2.$scope是有层次关系的;
3.$scope是表达式的执行环境(作用域);
4.$scope是树形结构,与DOM标签平行;
5.$scope对象会继承父$scope的属性和方法;
6.每一个Angular应用只有一个根$scope对象(一般位于ng-app上);
7.$scope可以传播事件,类似于DOM事件,可以向上也可以向下;
8.$scope不仅是MVC的基础,也是后面是想双向数据绑定的基础;
9.在主模块加载时就有一个默认的$scope,称为$rootscope(根scope),是所有scope的父作用空间,
在没有其他指定的scope时都是默认的rootscope,有指定的scope时,运行它本身;
10.$scope提供了一些工具方法$watch()、$apply();
11.其他指定的scope时,各自也是在指定的作用空间内起作用。
3.指令系统(特有)
<!doctype html>
<html ng-app="MyModule">//ng-app在一个单页应用中只能出现一个
<head>
<mate charset="utf-8">
</head>
<body>
<hello></hello>
</body>
<script src="js/angular-1.3.0.js"></script>
<script>
var myMoudel=angular.module("myModule",[]);
myMoudel.directive("hello",function(){//hello是directive的名称
return{
restrict:'E',
template:'<div>Hi everyone!</div>'
replace:true
};
});
</script>
</html> //利用Directive实现View的复用
指令(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
4.双向数据绑定(特有)
<!doctype html>
<html ng-app>
<head>
<mate charset="utf-8">
</head>
<body>
<input ng-module="greeting.text"/>
<p>{{greeting.text}},AngularJS</p>
</body>
<script src="js/angular-1.3.0.js"></script>
</html> //复用module
表达式
1.可以做比较;
2.同时逻辑运算都可以使用;
3.加减乘除等等。
过滤器
currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)
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理论基础的更多相关文章
- AngularJS 初学笔记(理论基础)
AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库. AngularJS 通过 ng-directives 扩展了 HTML. ng-app 指令定义一 ...
- 通过AngularJS实现前端与后台的数据对接(二)——服务(service,$http)篇
什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...
- AngularJs之九(ending......)
今天继续angularJs,但也是最后一篇关于它的了,基础部分差不多也就这些,后续有机会再写它的提升部分. 今天要写的也是一个基础的选择列表: 一:使用ng-options,数组进行循环. <d ...
- AngularJS过滤器filter-保留小数,小数点-$filter
AngularJS 保留小数 默认是保留3位 固定的套路是 {{deom | number:4}} 意思就是保留小数点 的后四位 在渲染页面的时候 加入这儿个代码 用来精确浮点数,指定小数点 ...
- Angular企业级开发(1)-AngularJS简介
AngularJS介绍 AngularJS是一个功能完善的JavaScript前端框架,同时是基于MVC(Model-View-Controller理念的框架,使用它能够高效的开发桌面web app和 ...
- 模拟AngularJS之依赖注入
一.概述 AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的. 依赖注入,简而言之,就是解除硬编码,达到解偶的目的 ...
- 步入angularjs directive(指令)--点击按钮加入loading状态
今天我终于鼓起勇气写自己的博客了,激动与害怕并存,希望大家能多多批评指导,如果能够帮助大家,也希望大家点个赞!! 用angularjs 工作也有段时间了,总体感觉最有挑战性的还是指令,因为没有指令的a ...
- 玩转spring boot——结合AngularJs和JDBC
参考官方例子:http://spring.io/guides/gs/relational-data-access/ 一.项目准备 在建立mysql数据库后新建表“t_order” ; -- ----- ...
- 玩转spring boot——结合jQuery和AngularJs
在上篇的基础上 准备工作: 修改pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&q ...
随机推荐
- 6.Type and Member Basics
1.The Different Kinds of Type Members 1.Constants:a symbol that identifies a never-changing data val ...
- So easy Webservice 5.WSDL 文件说明
WSDL – WebService Description Language – Web服务描述语言 通过XML形式说明服务在什么地方-地址. 通过XML形式说明服务提供什么样的方法 – 如何调用. ...
- 是时候改变你的开发方式了-XAF信息系统快速框架介绍
我是一名.Net开发者,从DOS时代Turbo c 算起(1996年),马上满20年了.想想写过的代码真是不少,却做了很多重复反复的编码工作.当然中间也带过团队做过几个大项目,但是代码仍没写够,还是每 ...
- [转载] 读《UNIX网络编程 卷1:套接字联网API》
原文: http://cstdlib.com/tech/2014/10/09/read-unix-network-programming-1/ 文章写的很清楚, 适合初学者 最近看了<UNIX网 ...
- default(T)的含义
default(T)是泛型中初始化的用法.因为对于泛型T你不知道是值类型还是引用类型,所以传参数是可能会出错.这里就要用到default(T). T t=default(T),就是初始化,值类型的话, ...
- css+js实现兼容性select的样式
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...
- maven常见问题问答
1.前言 Maven,发音是[`meivin],"专家"的意思.它是一个很好的项目管理工具,很早就进入了我的必备工具行列,但是这次为了把project1项目完全迁移并应用maven ...
- (十)makefile
一.Makefile的作用和意义(1)工程项目中c文件太多管理不方便,因此用Makefile来做项目管理,方便编译链接过程.(2)uboot和linux kernel本质上都是C语言的项目,都由很多个 ...
- Wincap安装出现“error opening file for writing wpcap.dll”之解决办法
Wincap安装出现"error opening file for writing wpcap.dll"之解决办法 安装Wireshark时,一直出现下面的错误,选择忽略这个错误, ...
- Oracle一个用户查询另一个用户的表数据
1.两个用户是在不同的库,需要建立dblink 2.属于同一个库的不同用户 1)方法一:使用"用户名."的方式访问 例如:要从USER1账号访问USER2中的表TABLE2 A. ...