NgAlain学习笔记

简介

NG-ALAIN是一个企业级中后台前端/设计解决方案脚手架。
技术栈基于Typescript、Angular、g2、@delon和ng-zorro-antd。

官网文档

其它

新建脚手架

CLI方式脚手架

使用CLI安装，是一个干净的脚手架

ng new alian-demo --style less
cd my-project
ng add ng-alain
npm start

克隆方式脚手架

使用克隆代码会包含所有示例

git clone --depth=1 https://github.com/ng-alain/ng-alain.git alain-demo
cd alain-demo
yarn
npm start

启动

npm start

脚手架

以克隆方式创建工程，包含众多示例，直接参考源码即可

├── _mock                                       # Mock 数据规则
├── src
│   ├── app
│   │   ├── core                                # 核心模块
│   │   │   ├── i18n
│   │   │   ├── net
│   │   │   │   └── default.interceptor.ts      # 默认HTTP拦截器
│   │   │   ├── services
│   │   │   │   └── startup.service.ts          # 初始化项目配置
│   │   │   └── core.module.ts                  # 核心模块文件
│   │   ├── layout                              # 通用布局
│   │   ├── routes
│   │   │   ├── **                              # 业务目录
│   │   │   ├── routes.module.ts                # 业务路由模块
│   │   │   └── routes-routing.module.ts        # 业务路由注册口
│   │   ├── shared                              # 共享模块
│   │   │   └── shared.module.ts                # 共享模块文件
│   │   ├── app.component.ts                    # 根组件
│   │   └── app.module.ts                       # 根模块
│   │   └── delon.module.ts                     # @delon模块导入
│   ├── assets                                  # 本地静态资源
│   ├── environments                            # 环境变量配置
│   ├── styles                                  # 样式目录
└── └── style.less                              # 样式引导入口

开发

启动流程

当通过 ng serve 运行应用后，一个完整的 Angular 启动流程大概是这样：

触发APP_INITIALIZER（脚手架具体实现在 StartupService.load）获取应用信息
触发业务路由（脚手架的 src/app/routes/routes-routing.module.ts）
渲染组件

APP_INITIALIZER:
NG-ALAIN始终认为在Angular启动之前需要一次网络请求来获取一些应用信息（例如：菜单数据、用户数据等），具体实现细节startup.service.ts；它返回的是一个 Promise 对象，不管怎么样始终都需要调用：resolve() 才能确保 Angular 正常启动。

业务路由:
脚手架顶层路由从 routes-routing.module.ts 开始

新增模块

1	ng g ng-alain:module sys

新增页面

1	ng g ng-alain:list log -m=sys

新增业务组件

对于一些可能被多处引用的功能模块，建议提炼成业务组件统一管理。这些组件一般有以下特征：

只负责一块相对独立，稳定的功能；
没有单独的路由配置；
可能是纯静态的，仅受父组件（通常是一个页面）传递的参数控制。

在src/app/shared/components下新建一个以组件名命名的文件夹，命名尽量体现组件的功能。

index.ts

// main.component.ts
export class MainComponent {}

// sub.component.ts
export class SubComponent {}

// index.ts
export MainComponent from './main.component';
export SubComponent from './sub.component';

// index.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'image-wrapper',
  template: `
    <div [ngStyle]="style">
      <img class="img" [src]="src" [alt]="desc" />
      <div *ngIf="desc" class="desc">{{ desc }}</div>
    </div>
  `,
  styleUrls: [ './index.less' ]
})
export class ImageWrapperComponent {
  @Input() style: { [key: string]: string };
  @Input() src: string;
  @Input() desc: string;
}

// shared.module.ts

// #region your componets & directives
import { ImageWrapperComponent } from './image-wrapper';
const COMPONENTS = [
  ImageWrapperComponent
];
const DIRECTIVES = [];
// #endregion

使用:

1
2
3

<image-wrapper
  src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png"
  desc="示意图"></image-wrapper>

HTTP

在 NG-ALAIN 中，一个完整的前端 UI 交互到服务端处理流程是这样的：

首次启动 Angular 执行 APP_INITIALIZER；
UI 组件交互操作；
使用封装的 _HttpClient 发送请求；
触发用户认证拦截器 @delon/auth，统一加入 token 参数；
若未存在 token 或已过期中断后续请求，直接跳转至登录页；
触发默认拦截器，统一处理前缀等信息；
获取服务端返回；
触发默认拦截器，统一处理请求异常、业务异常等；
数据更新，并刷新 UI。

拦截器:
默认情况下在根模块注册了两个拦截器 SimpleInterceptor 和 DefaultInterceptor，且执行顺序按注册顺序执行。

开发环境:
正常情况下开发环境和生产环境不是同一个后端请求源，实际可以通过配置 environment 目录下 environment.ts 和 environment.prod.ts 改变不同环境的请求源。

Mock:
利用@delon/mock来模拟请求数据，可以在_mock目录下创建相应的Mock接口

注意，mock对外不暴露http服务

1
2
3

export const USERS = {
  'GET /users': { users: [1, 2], total: 2 }
}

引入Angular组件

安装依赖包:

1	yarn add ngx-tinymce

在SharedModule模块中导入和导出:

// #region third libs
import { NgxTinymceModule } from 'ngx-tinymce';
const THIRDMODULES = [ NgxTinymceModule ];
// #endregion

对于部分第三方组件，可能会需要一些配置项，建议在根模块中注册，例如：

import { NgxTinymceModule } from 'ngx-tinymce';
@NgModule({
  imports: [
    BrowserModule,
    NgxTinymceModule.forRoot({
      baseURL: '//cdn.bootcss.com/tinymce/4.7.13/'
    })
  ]
})

引入非Angular组件

1	yarn add qrious

在angular.json找到scripts节点并增加

1
2
3

"scripts": [
  "node_modules/qrious/dist/qrious.min.js"
]

构建

1	npm run build

环境变量:
通过 src/environments 文件夹根据不同环境配置相应的参数，配置项同时也可以在应用当中直接调用它们。同时，还需要配置 angular.json 内的配置项，最后你可以透过命令改变环境配置。

分析构建文件体积:

1	npm run analyze

BlueXIII's Blog