基于 Angular7,ng-zorro7.x 的中后台实践案例

在一个项目维护的过程当中，需求老是累加的，一开始老是很简单，以后需求愈来愈多，维护会愈来愈头疼，因此一个好的项目结构能够帮助节省不少的维护成本。
不少开发者以组件树的形式去开发 Angular，其实以模块树的形式去开发是更好的选择。 在开始前但愿你已经阅读过如下文章

• Angular 风格指南
• Angular 最佳实现
• ng-alain 模块注册指导原则

目录结构

这是一个标准的 Angular CLI 构建的项目，并参考了ng-alain 的目录结构。

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

开始

# 安装依赖
npm i

# 启动
ng s
复制代码

问题总结

Angular 已是很是成熟的一个框架，能够经过找到各类各样的问题解决方案，如下是一些国内比较常见可是不多有回答的一些问题。

Angular 的 HttpClient 须要二次封装吗？

答：这个看场景，在咱们以前的项目中是使用本身二次封装过的 HttpClient，如今已经放弃（由于发现封装后没啥意义），以后在群里请教雪狼汪志成,他们也没有进行二次封装。
举个多接口前缀的例子（国内有不少这样的场景，以前咱们进行二次封装也是作这个工做，经过 headers 指定头传值，在拦截器中获取到后移除 domain,具体请参考本项目登录模块代码，

// src/environment/environment.ts 环境变量
export const environment = {
  BASE_URL: `https://test.BASE_URL.com/admin/`,
  LOGIN_URL: `https://test.LOGIN_URL.com/login/`,
  production: false
};
// src/app/coer/net/default.interceptor.service.ts 拦截器
if (req.headers.get("domain")) {
  url = environment[req.headers.get("domain")] + url;
} else {
  url = environment.BASE_URL + url;
}
// src/app/login/pages/user-login.component.ts 使用
this.httpClient
  .get("admin/login", {
    headers: { domain: "LOGIN_URL" }
  })
  .subscribe();
复制代码

如何使用 RSA 加密？

答：RSA 加密是使用jsencrypt，具体在 Angular 中使用请参考登录模块，有完整使用案例。

未完待续。。
项目源码:github.com/faner11/ang…