AngularJS介绍

前端之家收集整理的这篇文章主要介绍了AngularJS介绍前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
AngularJS 是什么?

google动态web应用设计的一个js框架,是为了克服HTML在构建应用上的不足而设计的。

AngularJS 的四个核心思想

1. 依赖注入(MVC)
2. 模块化
3. 双向数据绑定
4. 语义化标签(指令系统)

AngularJS 的优点

利用依赖注入和双向绑定,让你不用写大量代码,从而实现非常复杂的功能可以不用向jquery那样操作复杂的dom代码,我们只需要改变数据模型就可以了,极大简化了我们的开发。

下面体验的小例子,比jquery和js代码简单很多:
<!DOCTYPE html>
<html ng-app=""<head lang="en" <Meta charset="UTF-8" <link rel="stylesheet" href="css/foundation.min.css"/>
<title></title>
</head>
<body style="padding:10px;" <input type="text" ng-model="data.msg" <div ng-show="1==1" class="{{data.msg}}">我是一个{{data.msg}}</div>
</body>
<script src="js/angular.min.js"></script>
</html>
当输入button的时候,下面就变成一个button图标了。

MVC

MVC实现方式
Controller使用过程中的注意点 :
1. 不要试图去复用Controller,一个控制器一般只负责一小块视图
2. 不要在Controller操作DOM,这不是控制器的职责
3. 不要在Controller里面做数据格式化,ng有很好用的表单控件
4. 不要在Controller做数据过滤操作,ng有$filter服务
5. 一般来说,Controller是不会互相调用的,控制器之间的交互会通过事件进行。

AngularJS的MVC是借助于$scope实现的
1. $scope是一个POJO(Plain Old JavaScript Object)
2. $scope提供了一些工具方法$watch()/$apply()
3. $scope是表达式的执行环境(或者叫作用域)
4. $scope是一个树形结构,与DOM标签平行
5. 子$scope对象会继承父$scope的属性方法
6. 每一个Angular应用只有一个根$scope对象(一般位于ng-app上)
7. $scope可以传播事件,类似DOM事件,可以向上也可以向下
8. $scope不仅是MVC的基础,也是后面实现双向数据绑定的基础

一切都是从模块开始的

AngularJS运行的过程

一个完整项目结构

前端开发环境

开发工具

1. sublime
2. webStrom(推荐)

推荐使用webStorm,安装 AngularJS 插件,可以提示 AngularJS 代码,加大开发速度。

断点调试工具

chrome插件Batarang

代码合并和混淆工具

grunt
1. JS文件合并
2. JS代码自动压缩
3. 自动运行单元测试、集成测试
http://gruntjs.com/(安装node.js,然后安装grunt)

依赖管理工具

bower
1. 自动安装依赖的组件
2. 组件之间的依赖检测
3. 版本兼容性自动检测
https://bower.io/


单元测试

Karma、Jasmine
Karma只是用来跑测试用例的runner,需要配合Jasmine,Jasmine类似Java的Junit,提供一套语法用来编写测试用例。
Jasmine四个核心概念:分组(describe(string,function))、用例(it(string,function))、期望(expect(expression))、匹配(to***(arg))
通过node.js npm安装;

集成测试
Protractor
Protractor是专门为AngularJS应用设计,基于WebDriverJS 。
原理:利用WebDriverJS,可以借助于NodeJS直接调用浏览器(IE、FF、Chrome)的接口;
https://github.com/angular/protractor

@H_173_403@
@H_173_403@ 资料下载
@H_173_403@
@H_173_403@ 代码
@H_173_403@ https://github.com/JeromeSuz/demo_angularjs
@H_173_403@
@H_173_403@ 参考:
@H_173_403@ http://www.jikexueyuan.com/course/angularjs/链接 http://pan.baidu.com/s/1i5wMaZb 密码:ekwm
@H_173_403@ http://www.imooc.com/learn/156

AngularJS包:
angular-1.5.8.zip http://pan.baidu.com/s/1i4EgTaX

猜你在找的Angularjs相关文章