angular promise请求_angular及相关组件库

Angualr总结

1. 安装

(1) 安装脚手架 npm install -g @angular/cli

(2) 创建项目 ng new project_name

(3) 进入项目目录 cd project_name

(4) 启动项目 ng serve --open

2. 使用

(1) 根模块 -- app.module,ts

核心的模块和组件 BroswerModule  NgModule  AppComponent

在@NgModule中声明引入的组件和模块,还要服务以及要渲染那个组件

根模块不需要导出任何模块,其他模块也不需要导根模块

(2) 自定义组件

Ng g c/component header

(3) 绑定数据

① 数据文本绑定 -- {{ }}

② Html绑定 -- [innerHTML]=’xxx’   xxx=

angular

(4) 绑定属性

① 例如

’ id ’  [title]= ’ title ’ >

(5) 数据循环

① *ngFor   *ngFor=’let item of items’

(6) 条件判断

① *ngIf

(7) 执行事件

①  (click)=”事件名()”

(8) 表单

① 要引入FormsModule

(9) 双向数据绑定

① 例如 ’value’  />

(10) 样式

① ngClass和ngStyle

② 

③ 

(11) 管道 -- 数据处理

{{ dates|date }}

3. 组件传值

(1) 父子传值

首先,调用子组件的时候传一个值

然后,在子组件中引入input模块,在使用input装饰器接受传入的值

*注意: 可以传一个值,也可以是一个方法,还可以把整个组件传过去*

(2) 子父传值

首先,父组件引入viewChild模块,用viewchild装饰器接收子组件的值或者方法

*注意: 子组件上绑定 #xxx, 父组件装饰器@viewChild(‘xxx’) msg*

(3) 子组件通过output和eventEmitter触发父组件的方法

首先,子组件引入output和eventEmitter

其次,output声明一个变量去实例eventEmitter

然后, this.变量.emit() 使用

最后,父组件调用的时候,(变量)=’自定义事件名($event)’

*非父子组件通信可以通过服务实现*

4. 服务

(1) 创建服务  ng g serve 服务名

(2) 在根组件中配置服务,先引入再配置

(3) 在使用服务的组件中引入服务

(4) 实例化引入的服务或者在初始化中声明服务,

例如 constructor(public storageService: 引入的服务) {}

(5) This.storageService.方法  --  服务里面定义的方法

5. 生命周期函数

(1) Ngonchanges -- 如果有父子传值会触发这个方法

(2) Ngoninit -- 一般在这请求数据

(3) Ngdocheck -- 在这里自定义一些操作

(4) Ngafterviewinit -- dom操作放在这里

*数据一般有变化会触发一下几个生命周期函数*

Ngdocheck ngaftercontentchecked ngafterviewchecked

6. Rxjs -- 一种针对异步数据流的编程

(1) 特点: 中途可以撤回操作,可以发射多个值,并且提供了多种工具函数

(2) 使用

① 引入相应的Observable模块

② 实例化引入的模块,通过observer.next发送数据

③ 在需要请求的数据组件中通过this.request.方法.subscribe(回调函数打印数据)

(3) 主要的两个方法map和filter

① Filter -- 主要对数据进行过滤   ②map -- 主要对数据进行处理

(4) 工具方法的使用

① 

② 

7. 请求数据

(1) 在根组件引入httpClientModule模块,并在imports中注入

(2) 在请求数据的组件中引入httpClient,并在构造函数声明

(3) 请求数据 this.http.get(url).subscribr(回调函数--打印数据)

*如果是post请求,还需要引入请求头的模块--httpHeader,要设置请求头*

(4) Jsonp请求数据,要引入httpclientjsonpmodule并注入

This.http.jsonp(apiUrl)

8. 路由及其配置

(1) 先创建一个带路由的项目  ng new demo --routing

(2) 在app-routing.module.ts中配置路由

(3) 在app.component.html中,配置router-outlet显示动态加载的路由

(4) 使用routerLink的属性可以跳转到指定的路由

Ng-zorro-antd 总结

1. 安装

(1) 安装@angular/cli -- npm install -g @angular/cli,使用ng v 检查angular脚手架安装是否成功

(2) 创建项目 ng new project_name

(3) Cd project_name,进入到项目目录

(4) 添加ng-zorro-antd, ng add ng-zorro-antd,也可以先下载包再add

(5) 启动项目 ng serve --port 0 --open, 可以自己指定端口号--port=xxxx

(6) 出现如下图表示项目启动成功

(7) 部署 npm build --prod

2. 自行构建项目

(1) 命令行 npm install --save ng-zorro-antd

(2) 样式处理

① 使用全局样式 -- 在angular.json下的styles中配置

② 使用特定样式 -- 分别在style.css和style.less中引入相应的样式文件

(3) 引入组件模块(引入到app.module.ts文件中)

① 例如: import { NzButtonModule } from ‘ng-zorro-antd/button’

② 在imports中声明引入的模块

③ 使用组件: ”primary”>

3. 定制主题

(1) 修改src/theme.less

(2) 手动创建一个theme.less并且引入到angular.json里面的styles列表

① 引入官方的less文件

@import ‘../node_modules/ng-zorro-antd/ng-zorro-antd.less’

(3) Webpack定制主题(文档有详细说明)

(4) 官方主题

4. 升级

(1) Nodejs版本大于等于10.13,使用新的分支,删除package-lock.json文件

(2) 确认angular大于9.x

(3) 运行 ng update ng-zorro-antd

5. 组件库

(1) 引入相应的模块

(2) 使用组件

Ng-alain总结

1. 安装

(1) 安装9.x版本的angula-cli

(2) 创建新项目 ng new project_name --style=less --routing

(3) Cd project_name

(4) Ng add ng-alain

(5) Npm start 或者 ng serve

(6) 注意: 安装过程中可以等自动安装各种包和依赖,也可以手动安装,切忌使用cnpm安装,会出现问题.

预设的样式格式是less,所以创建项目时采用less

2. 项目目录结构

(1) 核心代码都在src下面的app文件夹

(2) Core -- 核心模块

(3) Layout -- 通用布局

(4) Routes -- 业务和相关的路由以及配置路由

(5) Shared -- 共享模块,主要是ng-zorro和@delon的次级共享模块

3. 注意

(1) @delon/cli 是基于 Angular Cli 向上构建的针对 ng-alain 脚手架的命令行工具，因此在安装之前要先确保以下类库应该安装.

4. 项目启动流程

(1) 触发 APP_INITIALIZER 获取应用信息(脚手架具体实现在StartupService.load)

(2) 触发业务路由(脚手架的 src/app/routes/routes-routing.module.ts)

(3) 渲染组件

5. 启动流程具体过程

(1) 项目在启动之前会发送网络请求获取一些数据资料(具体实现在startup.service.ts),因为采用的是promise的方式获取数据,所以必须调用resolve().

*promise有两个方法,resolve和reject,如果失败了调用reject方法,项目也无法启动了,所以必须调用resolve方法*

(2) 业务路由

路由配置在routes-routing.module.ts文件中

同级路由存在于对象数组中,子路由是配置下children对象数组中,依次类推

6. 具体使用

(1) 本质上还是一个angular项目,所以指令基本相同

(2) 创建模块

Ng g ng-alain:module sys(module_name)

生成sys.module.ts和sys-routing.module.ts,分别是模块组件定义文件和模块路由配置文件

(3) 创建页面

Ng g ng-alain:list log -m=sys   创建log页面

(4) 新增业务组件(具体见文档)

业务组件的特点

A. 实现功能单一但相对稳定 B. 没有单独的路由配置 C. 可能是静态的,收单一控制

7. 数据请求流程

(1) 执行APP_INITIALIZER

(2) UI组件交互操作

(3) 内置的HTTPClient发送请求

(4) 触发用户认证拦截器(@delon/auth),统一加入token参数

若未存在token或者过期中断,则直接返回登录页

(5) 触发默认拦截器,统一处理前缀等信息

(6) 获取服务端返回的数据

(7) 再次触发默认拦截器,统一处理异常问题

(8) 数据更新,刷新界面

注意: 两个拦截器 SimpleInterceptor 和 DefaultInterceptor, 按顺序执行

前者   处理用户认证

后者   处理请求异常

8. 构建和发布见文档

9. 全局配置在global-config.module.ts

10. @delon/cli使用看文档都有具体说明