【教程】Angular基础教程-大漠穷秋-2018

一.快速上手

ng -v看版本号

ng new 项目名，创建项目

ng serve，启动开发服务器

 

e2e：end to end，继承测试目录

根模块：app_module.ts

根组件：app_component.ts

spec：单元测试文件

html：模板文件

css：样式表（ng new的时候 --style可以指定sass或者less）

 

组件用@Component装饰器修饰，其中selector属性是标签名，templateUrl是模板文件名，styUrls是css文件名数组

 

二.核心概念

1.集成开发环境@angular/cli

集成了：webpack，ts，ARMA，Jasmine，e2e（量角器），material design

安装：npm install -g @angular/cli

查看版本：ng --version

帮助：ng help

生成组件命令：ng generate cl:class c:component d:directive e:enum m:module p:pipe s:service，冒号前面是简化命令

简写：ng g c 类名

自动生成文件，配置注册到主要文件中

 

node build --prod：自动AOT，生成dist目录发布

--source-map：带代码导航

 

ng test：运行单元测试文件 

 

2.Angular三大核心概念

Component

树状结构

数据单向流动

组件树生成器（augry插件）

 

Module

NgModule，业务模块

文件体积和请求次数要达到平衡

 

Route

没有router：

前进后退按钮没法用

url没办法分享

 

routuer形成树形结构

 

两种路由：静态路由，异步路由

 

路由守卫：路由的回调函数，可以做验证等操作

 

3.Angular架构特色

依赖注入：

不需要new，在constructor里声明类对象，在providers里注册

注册器：树形结构

每一个html标签上都会有一个注册器实例，通过constructor进行，@Component是@Injectable的实例

 

数据绑定：

ZonesJs Immutable Data RxJs实现

数据与界面绑定，变化后界面自动跟着一起变

Zones监听变化，拦截键盘，定时器，ajax等回调

RxJs实现异步和数据流

Immutable Data实现无循环响应更新

高效脏数据检查数据：onPush

 

4.UI库

PrimeNG，NG-Zorro，Clarity，Angular-Material，Jiasaw，ionic

提供界面元素

 

5.参考资源推荐

ng2-admin

JHipster

 

三.新版本特性

vscode打断点

 

四.组件

css改为sass：用命令行参数指定

导入bootstrap和fontawesome：

@import "~bootstrap/dist/css/bootstrap.min.css"

@import "~font-awesome/css/font-awesome.min.css"

插值语法和表达式：{{表达式}}，轻逻辑，只能是加减乘除，变量，调用方法

模板内部定义局部变量：#变量名，给标签定义一个变量名

 

绑定方式：把js的值赋给html标签里的属性，js的值要用引号包起来，否则就是字面量

值绑定：[],标签的属性套这个，<img [src] = "imgSrc">

事件绑定：(),标签的属性套这个

双向绑定：[()]，标签的属性套这个，文件里@Input修饰输入，@Output修饰输出

 

内置结构型指令：*ngIf，*ngFor，ngSwitch

 

内置属性型指令：ngClass，ngModel，ngStyle

 

管道：{变量 | 变量}

安全导航：变量名？.属性，自动判断对象是不是null

非空断言：

 

组件间通讯：

父子之间：@Input，@Output，@ViewChlid，模板变量

非父子之间：Service，localStorage。Service分别注入到组件，共享实例，rx发送事件；写入localStorage另一头读取

Session/路由参数通信：

 

模板里标签的属性，可以是子组件的变量，这个变量或者其存取器在子组件里要用@Input来修饰，父组件调用子组件标签直接赋值；父组件可以通过#引用，直接调用子组件的方法

子组件的@Output修饰的一个EventEmitter对象，当其emit方法调用时，父组件用(@Output修饰的变量)绑定的事件回调函数被调用

 

用@Intectable修饰一个类（充当Service），兄弟组件可以各定义一个Service类的对象，使用RxJs来subject和next触发通信

 

生命周期钩子函数：

8个钩子

constructor

ngOnChanges：@Input的变量变化时被调用，

ngOnInit

ngDoCheck：Zones检测到事件就会调用一次，不要做长操作

ngAfterContentInit：

ngAfterContentCheckedL：和上边的在投影内容装配完，但是整个模板没有被装配完被调用，可以修改被绑定属性内容

ngAfterViewInit

ngAfterViewChecked：和上边在视图装配好后被调用，从子组件开始；不能修改被绑定的属性；这个函数不要做长操作

ngOnDestroy

 

check的，change的钩子，可以被调用多次，不要重逻辑

init的，destroy的，调用一次

Content和View的钩子只对组件有效，指令无效，指令不能带视图，组件时指令的子类

 

动态效果：

要独立import包

构成：

inactive=〉active

active=〉inactive

状态和转场

 

state（状态，style（背景色，transform））

transition（转场，animate（time））

 

可以用库，ng-animate

 

动态组件：

动态组件是可以动态生成的标签

如何创建动态组件：div容器组件用#组件名，定义一个本组件引用；代码里通过@ViewChild来创建一个ContainerRef；用ComponentRef<>生成子组件；用ComponentFactoryResolver来获取子组件，再在容器上调用createComponent（index参数决定位置）；用instance来给属性赋值

给动态组件传参数：

监听动态组件事件：

销毁动态组件：通过组件destroy销毁

 

ShadowDOM：渲染模式三种：默认，none，native（shadowDOM）

shadowDOM，把style和html放进shadow-root里

 

内容投影：

自定义组件要包含其他组件

ng-content指令充当占位符，可以替换为其他组件，select属性指定

事件监听绑定到最外层组件

 

ContentChild：

@ContentChild操作投影内容，@ContentChildren批量操作多个投影内容

ng-content标签是Content，针对自身的

装饰器参数是组件类，修饰一个QueryList类型

 

ViewChild：

@ViewChild操作视图子节点，@ViewChildren批量操作多个视图子节点

视图标签是View，针对子组件

 

指令：

指令和组件关系：组件继承了指令

 

Angular内置37个指令，分为common，表单，路由，

 

指令作用：

属性型：

结构型：

 

自定义属性型指令：

@Directive修饰类，selector指定属性

@HostBinding绑定相应class属性

@HostListener监听事件

 

自定义结构型指令：

 

指令间交互：ngfans.net/topic/40/post，通讯类似组件

 

所以组件可以直接操作dom元素

 

五.模块

用模块来组织业务代码

每个应用至少要有一个根模块

每个组件只能属于一个模块

模块是最小打包单位

模块是Router最小异步加载单位

 

Angular模块：

core

common

router

forms

http

animations

=====================

compiler

platform-browser

platform-browser-dynamic

language-service

=====================

cli

compiler-cli

tsc-wrapped

 

模块用@NgModule装饰，declarations指定组件，imports指定路由，providers指定Service依赖注入，bootstrap指定启动组件

 

创建模块：ng g module 模块名

 

六.路由基本用法

同步路由：一个数组，里边是对象，包括path，redirectTo，component指定路径，重定向，组件；**代表统配匹配，放最后

router-outlet：路由容器占位标签，展示路由里的组件

router-link：a标签的属性

 

懒加载模块：异步路由，子模块可以继续嵌套

要有一个module ts一个router ts，module里用RouterModule.forChild（子层路由）/forRoot（启动项根配置）配置给imports

 

N层嵌套路由：只改变部分组件，路由中指定children，

 

共享模块：exports指定要共享的组件数组，其他模块imports

 

传递和获取路由参数

使用RxJS，获取router.events的subscribe来监听事件，事件类型可看api文档，比如NavigationStart

单个参数：

router配置的时候，路径前加个：，则返回相应的值，直接放url里

ActiveRouter用queryParams和params来subscribe

 

矩阵参数：

routeLink配置数组，里边是对象

 

用代码触发路由导航：router的navigate方法

 

preload：预加载

实现PreloadingStrategy，填入provide，route的data字段指定字段为true

 

高级路由：

路由的本质是当前应用的状态加，什么界面什么布局

路由守卫：provede里定义实现了相应接口的类，指给路由配置的字段canLoad，canActivate

 

七.表单与数据验证

模板驱动表单：主要逻辑在模板里

响应式表单：主要逻辑在类里

动态表单：代码来生成标签

 

数据校验：

内置校验规则或者实现Validator自己实现

 

八.RxJS

应用：1.事件流 2.异步下载

operator可视化