Angular初学阶段总结。

Angular，前端开发始终绕不开的山，久仰大名，却一直连文档都没敢翻开看。不过开始学习之后，发现其实也不是很难，特别是有Vue开发经验之后，而且两个框架本就有一定的渊源。下面就将自己的学习过程记录一下，加深理解和记忆，希望能早日登顶。

angular概述

和Ｖue一样，angular也是以数据为中心，数据驱动——通过创建数据，绑定数据，修改数据，更新数据，来完成页面的操作。

虽然还不是太懂这个，但是我还是记录下来，估计以后慢慢就能理解。

angular的8大核心概念：

①组件：可被反复使用的带有特定功能的视图
②模板: 普通的html+自定义组件+指令
③指令:让模板支持更多的逻辑功能
④绑定: 1、事件() 2、属性[] 3、双向数据[(ngModel)]
⑤管道: 是一个有参数有返回值的方法,帮助将原始数据经过筛选、过滤、格式化之后更好的展示出来
⑥装饰器和元数据：装饰器是用来描述当前的类；元数据是用来告诉Angular如何来处理当前的类
⑦服务
⑧依赖注入

angular工作示意图
在这里插入图片描述

使用angular拓展语法来编写HTML模板，用组件类管理这些模板，用服务添加应用逻辑，用模块打包发布组件与服务。
然后通过引导跟模块来启动该应用。 angular在浏览器中接管、展现应用的内容，并根据我们提供的操作指令响应用户的交互。

angular开发模式：
使用组件来完成视图的封装和复用
使用服务来完成业务逻辑的封装和复用
使用模块来打包组件和服务
使用指令或者管道等拓展语法来编写HTML

angular选择TypeScript作为主要构建语言，其中涉及到静态类型和基于类的面向对象编程，同时也支持诸如接口、命名空间、装饰器等特性。

虽然我有点蒙蔽，因为我对typescript的印象仅停留在语法很严格。但是这里暂时不理解也问题不大，了解一些基本的语法即可，如：

变量名:变量类型。 score:number= 88;private elemRef:ElementRef，看到冒号知道这里冒号后面其实是变量类型。

ts中的箭头函数，在函数创建时就绑定了this

any表示任意类型，是在类型不明确的变量中使用的。常用于变量的值会动态变化以及存储各种类型数据的数组。let x:any=1; x= false;

支持let，var，const，用法和ES6一样。

接口，命名空间，装饰器这些特性稍微要了解一下。接口，命名空间，装饰器这些特性稍微要了解一下。

下面开始正式步入学习

1.安装 CLI

类似于使用Vue cli ，这里我们需要安装一下Angular CLI，目前最新版本的cli要求node版本8.0以上，使用node -v查看自己node版本。
全局安装命令为：

npm install -g @angular/cli

还是和Vue类似，安装完cli之后还要新建项目，并且安装依赖。
这里新建一个项目叫做my-app

ng new my-app

进入项目目录之后,在package.json中可以看到运行指令：start,所以可以直接 npm start运行，修改项目代码后会自动热重启，非常方便。
在这里插入图片描述

npm start

编译完成之后在cmd中可以看到项目地址，输入网址即可看到效果。
在这里插入图片描述

2.工作原理

项目主入口还是main.js，在这里可以看到，项目是通过引导AppModule这个模块来启动的，而AppModule是从app.module导入的，而app.module是通过引导AppComponent，AppComponent是来自app.component.html模板，这个html文件就称之为根模板，而这5个就称之为根组件。最终你创建的组件是在app.component.html中，以自定义组件的形式展示出来，类似于vue中的局部组件都是挂载在根组件上一样。
在这里插入图片描述

在这里插入图片描述

在angular的github上面可以找到创建组件的指令和其他指令，这里截取上面的一张图片，加强记忆。
在这里插入图片描述
依次是创建组件、自定义指令，管道(过滤器)，服务，类，守卫，接口，？，模块
才学到服务这里来，后面再慢慢补全。

3.创建组件

在项目路径下，在cmd中

ng g component demo01-component

就可以创建一个组件，这里可以看到，系统帮我们创建了4个文件，还修改了一个文件。
html文件是我们要编写的模板，用来控制文档结构
spec.ts是预编译文件，这里一般不做处理；
.ts文件，这里写ts代码，控制逻辑。
.css文件控制样式。
在这里插入图片描述
根组件中更新的内容其实是系统自动帮你导入的自定义组件，不导入就无法注册使用。

导入之后还需要声明或者注册，下面就是注册。

为什么这里还是要提呢，因为有时候生成新组建之后，这里的代码会出现问题。可能是cli安装的问题吧，每次新建组件后，新插入的代码位置都是错乱的，很烦。但是得知道怎么修改，问题也不大。
每次都会错位，每次都要调整，有人知道为啥吗？
在这里插入图片描述
创建成功之后，这一个文件夹4个文件就称之为一个组件。
在.ts文件中可以看到，@Component是它的装饰器，大花括号内的是它的元数据。

元数据中有一项叫做selector，含义是选择器。选择器后面的内容是告诉你使用什么标签来调用该组件，这里是app-demo01,所以我们在根组件的html模板中直接使用该标签，就可以显示该组件的内容。

<app-demo01></app-demo01>

在这里插入图片描述

个人感觉这里创建组件比在vue中要方便很多哈，输入命令后自动创建，自动注册，调用也方便。
后面我注释了的templateUrl和styleUrls，分别是组件的模板文件位置和样式文件位置。css规则和以前一样，而且不用自己手工引入。
在这里插入图片描述

4.编写模板

前面我们已经会创建组件了，那么接下来就是编写组件中的内容。这里组件的内容其实就是文档结构+逻辑+样式，分别对应组件中的html，ts，css文件。
其中html这块也称之为模板，其实模板就是普通的html+自定义组件+指令。

html我们都很熟悉，不多讲。

自定义组件就是说模板中我们可能会插入其他的组件，如上demo01其实就是以自定义组件的形式插入到根组件的模板中显示的。

指令和vue中类似，分为系统内置指令和自定义指令。回想一下vue中有哪些指令？(v-if,v-for,v-model,v-show,v-bind[:
],v-on:[@]…),那么对应的angular中也有它的内置指令。

5.Angular中的常用指令

直接上图吧，类比于vue来学习，很快就能理解这些指令的用法。
在这里插入图片描述
这里挑几个重点说一下：

[(ngModel)]属于表单模块，不属于Ng模块，因此不能直接使用。需要在根组件模块中导入并引用，见下图19.

*ngFor和 *ngIf不能再同一标签上一起使用，会报错。这里使用ng-container标签来解决，将*ngFor绑定到ng-container上即可。ng-container不会渲染在dom书上，不会影响性能。

事件绑定时候，事件触发的函数要加括号，和微信小程序不一样，vue中可加可不加。

属性绑定使用的是[],这里忘了单独写一个，用法和vue中的v-bind:一样。

插值表达式也一样用。

*ngIf为false时候，在dom树上都不会有显示，和v-i6.*ngIf为false时候，在dom树上都不会有显示，和v-if一样。

图19
图19