AngularJS介绍

发布时间：2020-12-17 09:56:22 所属栏目：安全来源：网络整理

导读：AngularJS 是什么? google动态web应用设计的一个js框架，是为了克服HTML在构建应用上的不足而设计的。 AngularJS 的四个核心思想 1. 依赖注入（MVC） 2. 模块化 3. 双向数据绑定 4. 语义化标签（指令系统） 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

资料下载

代码：

https://github.com/JeromeSuz/demo_angularjs

参考：

http://www.jikexueyuan.com/course/angularjs/【链接： http://pan.baidu.com/s/1i5wMaZb 密码：ekwm 】

http://www.imooc.com/learn/156

AngularJS包：

angular-1.5.8.zip 【 http://pan.baidu.com/s/1i4EgTaX 】

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!