一些关于angular的总结

阅读量：5115 次

发布时间：2019-06-13

本文共 4169 字，大约阅读时间需要 13 分钟。

1. Angular介绍

1.1. 库和框架的区别

jQuery：库
- 库一般都是封装了一些常用的方法
- 自己手动去调用这些方法，来完成我们的功能
```
$('#txt').val('我是小明');      $('div').text('xx');
```

angular：框架
- 框架都是提供一种规范或者模式,
- 我们却要按照它提供的这种规则去写代码
- 框架会自动帮助我们去执行相应的代码.

其实可以简单的理解为：大而全的是框架，小而精的是库

1.2. AngularJs是什么

一款非常优秀的前端高级 JS 框架

最早由 Misko Hevery 等人创建

2009 年被 Google 公式收购，用于其多款产品

目前有一个全职的开发团队继续开发和维护这个库

其核心就是通过指令扩展了 HTML，通过表达式绑定数据到 HTML。

Angular不推崇DOM操作，也就是说在NG中几乎找不到任何的DOM操作
- angular，几乎不会使用angualr操作dom（但是angular内部肯定是使用dom来改变页面的值）

Angular 主要是来做什么的，帮助我们方便的去写spa应用程序

1.2.1. 什么是AngularJS

一个前端框架，提供一种无DOM操作的编程方式，在前端页面中引入了传统在后台开发中使用的一些思想，增强代码的结构和可维护性

一个功能非常完备的前端框架，通过增强HTML的方式提供一种便捷开发Web应用程序的方式

其核心特点就是几乎无任何DOM操作，让开发人员的精力和时间全部集中于业务

MVC的特性增强了代码的结构和可维护性，应对需求的变化做出最小的改动

1.2.2. 什么是 SPA

single page application的缩写

单页应用程序

原理就是：通过监视hashchange事件，根据不同的url中的锚点值，去动态的发送ajax请求去请求数据（简单的说就是不会看到页面刷新）
- 可以参照资料-备课代码-01理解
- 网站实例：music.163.com

1.2.3. SPA的优点

响应效果好，体验好

重用资源

方便统一控制和代码重用，不想访问应用了，在入口的控制一下就可以。

1.2.4. 扩展：如何获取url中的各部分参数，比如hash

字符串操作

正则表达式去匹配url

创建a对象

var a=document.createElement('a');a.hreg='http://www.baidu.com?id=23#home';a.pathnamea.hasha.search

1.3. 为什么要学Angular

主要是为了就业，出去之后立马就能找到工作

新的技术在中国市场推广开来，还是需要一定时间的

1.4. 为什么要使用Angular

总结一句话：为了更少的代码，实现更强劲的功能
- 很多操作都需要dom操作，但是angular中没有那么多的dom操作，这是因为angular帮我们封装了，减少了我们开发人员的dom操作
- 一般在angular中就不会出现jquery了，因为这两种思想正好是相悖的。
- 参照资料-备课代码-02-compare中的四个例子体会

上面的意义只是皮毛，它真正的意义是:angular又是一场革命，带领前端进入了MVX时代。
- 这就像从手工业转为机械工业一样，以前很多东西都是我么你自己手动去做，现在我们有了gulp，webpack这些自动化构建工具。

2. Angular的使用

2.1. Angular相关资料

AngularJS 1.x 官方网站

AngularJS 2.x 官方网站

Google Material Design for Angular

Angular UI（Angular最大的第三方社区）

AngularJS中文社区

AngularJS中文社区提供的文档（不用FQ）

2.2. 安装 Angular

暴力安装:
- 手动的去github下载安装

通过工具安装:
- npm : npm install angular
- bower: bower install angular

本质都为了拿到angular.js这个文件。

2.4. 理解angular的整个开发流程

ng-app:告诉angular来管理页面的代码块是什么（ng-app所在元素及其子元素）

ng-click : 类比成onClick，是用来为当前元素注册点击事件的

ng-click="val = (val-0) + 1"  相当于：  var add = document.getElementById('add');  add.addEventListener('click',function(){  }

ng-model: 用来获取文本框的值,是于input的value值进行了绑定。
- 改变ng-model的属性值对应的值，文本框的值就会改变,

ng-model = "val";//angular就会帮助我们去创建一个val变量  相当于:  var num = document.getElementById('num').value;

ng-init 指令: 用于对ng-model指定的值进行初始化操作
```
ng-init = "val = 10"
```

ng-controller：我们的业务逻辑，数据模型都要写在这里面

$scope:这个就相当于我们所画的途中的数据模型，在它上面给以挂载变量和方法。
- 请参照资料-图片-02-计算器对应关系说明图

表达式: {
{}}，相当于模板函数中的模板输出
- 在大括号内部写上一个ng-model对应的文本框的值

2.5. 使用AngularJS的流程

借助npm下载到本地

在HTML代码中引入Angular.js包

在JS代码中通过angular.module('myApp', [])注册一个模块

在HTML代码中将刚刚定义的模块通过ng-app="myApp"指令的方式作用到一个特定的元素上

根据当前页面的情况（业务块）划分控制器

在HTML代码中将刚刚定义的控制器通过ng-controller="ControllerName"作用到特定的元素上

建模（根据界面原型抽象一个数据模型）得到一个视图模型（ViewModel）

在JS代码中通过$scope暴露需要提供到页面的数据成员

在HTML代码中将刚刚暴露出来的数据通过类似ng-model/{ {}}/ng-click之类的指令绑定到特定的元素上

在JS中完成业务逻辑（还可以展开）

在思想上：
- JQ提高了操作DOM的开发效率
- NG几乎没有任何DOM操作（不是没有，只是不用我们自己操作）
- NG内置一个类似JQ的东西angular.element()
- Angular 不提倡DOM操作，如果必须使用DOM的话，也不建议再去引用jquery，有内置

2.6. 如何查看angular离线文档

angular文档设计的非常好都是一个功能一个功能的js分开的，主模块有1000多kb,这个应该是大家见过的最大的js库了

因为angularJS的文档需要引用angularjs的东西，所以要用http-server模块打开的话，必须在文档的根目录启动hs -o

3. Angular 核心概念

模块化

MVC - 思想

指令

双向数据绑定

3.1. angular.module（模块）

3.1.1. 作用

通过模块对页面进行业务上的划分

将重复使用的指令或者过滤器之类的代码做成模块，方便复用

注意必须指定第二个参数，否则变成找到已经定义的模块
- 请参照资料-备课代码-06-module.html理解

3.1.2. 语法

根据不同的功能划分不同的模块。

创建一个模块

语法： angular.module('模块名',[])
- 第二个参数是个数组,这个数组里的每一个元素，是我们当前模块依赖的其他模块
- 注意: 即便我们不依赖其他的模块，也需要传递一个空数组
```
因为如是不传第二个参数的话，这个方法的作用就会变为获取一个名为"模块名"的模块对象
```
- angular.module('myApp'),是获取一个名为myApp的模块对象。
- 我们需要给ng-app指令一个属性值，这个值就是我们创建的模块名:
  - 告诉anuglar,现在由我们自己创建的这个模块来管理页面。

3.2. angular.controller（控制器）

3.2.1. 作用

为应用中的模型设置初始状态

通过$scope对象把数据模型或者函数行为暴露给视图

监视模型的变化，做出相应的动作
- 请参照资料-备课代码-08-reg2.html理解

3.2.2. 语法

控制器是通过模块对象来创建的:
- 语法: var app = angular.module('模块名',[])app.controller('控制器的名字',function($scope){ // 在这个function里写我们具体想要执行的代码 // $scope 就是用来存储我们的数据模型. })
- 我们需要在页面上使用了数据模型的元素父级元素上加上ng-controller指令，并给这个指令一个属性值，这个值就是我们创建的控制器名字。