ng-juhe Schematics

Schematics

ng-add

添加 ng-zorro-antd 与它的依赖，并根据需要自动配置。

• 添加 ng-zorro-antd 到 package.json
• 替换 app.component.html 引导内容
• 在根模块导入必要的模块
• 导入必要的权限部分
• 导入可能需要用到的组件
• 将用于自定义的 theme.less 或编译后的 css 导入 angular.json

Use

Install Angular 9 (此项目已不在更新， 请转到 angular 10版本 ng-zhongyingjuhe)

npm install -g @angular/cli@9 @angular/core@9

ng new project_name
cd project_name
ng add ng-juhe

调试：

npm run start:remote

编译：

npm run build:online

创建懒加载模块： 创建一个名字为：lazy-page 懒加载模块

PS F:\study\test2> ng g ng-juhe:lazy lazy-page
CREATE src/app/routes/lazy-page/lazy-page-routing.module.ts (370 bytes)
CREATE src/app/routes/lazy-page/lazy-page.component.html (37 bytes)
CREATE src/app/routes/lazy-page/lazy-page.component.spec.ts (666 bytes)
CREATE src/app/routes/lazy-page/lazy-page.component.ts (318 bytes)
CREATE src/app/routes/lazy-page/lazy-page.module.ts (470 bytes)
UPDATE src/app/routes/routes-routing.module.ts (2128 bytes)

创建模块： 创建一个名字为：test-module 的module：

PS F:\study\test2> ng g ng-juhe:module test-module
CREATE src/app/routes/test-module/test-module-routing.module.ts (254 bytes)
CREATE src/app/routes/test-module/test-module.module.ts (391 bytes)

创建一个名字为：test-list 的列表页：

PS F:\study\test2> ng g ng-juhe:list test-list
? Specify which module name: test-module
CREATE src/app/routes/test-module/test-list/test-list.component.html (352 bytes)
CREATE src/app/routes/test-module/test-list/test-list.component.spec.ts (702 bytes)
CREATE src/app/routes/test-module/test-list/test-list.component.ts (1292 bytes)
UPDATE src/app/routes/test-module/test-module.module.ts (500 bytes)
UPDATE src/app/routes/test-module/test-module-routing.module.ts (397 bytes)

创建一个名字为：test-view 的信息页modal：

PS F:\study\test2> ng g ng-juhe:view test-view
? Specify which module name: test-module
? Would you like to modal mode? Yes
CREATE src/app/routes/test-module/test-view/test-view.component.html (586 bytes)
CREATE src/app/routes/test-module/test-view/test-view.component.spec.ts (702 bytes)
CREATE src/app/routes/test-module/test-view/test-view.component.ts (666 bytes)
UPDATE src/app/routes/test-module/test-module.module.ts (609 bytes)

创建一个名字为：test-edit 的编辑页

PS F:\study\test2> ng g ng-juhe:edit test-edit
? Specify which module name: test-module
? Would you like to modal mode? No
CREATE src/app/routes/test-module/test-edit/test-edit.component.html (545 bytes)
CREATE src/app/routes/test-module/test-edit/test-edit.component.spec.ts (702 bytes)
CREATE src/app/routes/test-module/test-edit/test-edit.component.ts (1664 bytes)
UPDATE src/app/routes/test-module/test-module.module.ts (719 bytes)
UPDATE src/app/routes/test-module/test-module-routing.module.ts (541 bytes)

创建一个名字为：test-empty 的空页

PS F:\study\test2> ng g ng-juhe:empty test-empty
? Specify which module name: routes
CREATE src/app/routes/routes/test-empty/test-empty.component.html (28 bytes)
CREATE src/app/routes/routes/test-empty/test-empty.component.spec.ts (685 bytes)
CREATE src/app/routes/routes/test-empty/test-empty.component.ts (320 bytes)
UPDATE src/app/routes/routes.module.ts (758 bytes)
UPDATE src/app/routes/routes-routing.module.ts (2101 bytes)

新增可选Tab标签路由复用

新建项目时， reuse设置 ture

目录结构

F:\
├─test-add
│  │  ├─.vscode
│  │  ├─e2e
│  │  │  └─src
│  │  ├─node_modules
│  │  ├─scripts
│  │  ├─src
│  │  │  ├─app
│  │  │  │  ├─components
│  │  │  │  │  ├─calendar
│  │  │  │  │  ├─form-modal
│  │  │  │  │  ├─search
│  │  │  │  │  └─user-select
│  │  │  │  ├─core
│  │  │  │  │  ├─net
│  │  │  │  │  └─startup
│  │  │  │  ├─layout
│  │  │  │  │  ├─default
│  │  │  │  │  │  ├─header
│  │  │  │  │  │  │  └─components
│  │  │  │  │  │  ├─setting-drawer
│  │  │  │  │  │  └─sidebar
│  │  │  │  │  ├─fullscreen
│  │  │  │  │  └─passport
│  │  │  │  ├─pipe
│  │  │  │  ├─routes
│  │  │  │  │  ├─callback
│  │  │  │  │  ├─dashboard
│  │  │  │  │  ├─exception
│  │  │  │  │  ├─passport
│  │  │  │  │  │  ├─lock
│  │  │  │  │  │  ├─login
│  │  │  │  │  │  ├─register
│  │  │  │  │  │  └─register-result
│  │  │  │  │  ├─routes
│  │  │  │  │  │  └─test-empty
│  │  │  │  │  ├─test-module
│  │  │  │  │  │  ├─test-edit
│  │  │  │  │  │  ├─test-list
│  │  │  │  │  │  └─test-view
│  │  │  │  │  └─welcome
│  │  │  │  └─shared
│  │  │  │      ├─st-widget
│  │  │  │      └─utils
│  │  │  ├─assets
│  │  │  │  └─tmp
│  │  │  │      ├─i18n
│  │  │  │      └─img
│  │  │  ├─environments
│  │  │  └─styles
│  │  ├─test
│  │  │  └─src
│  │  │      ├─app
│  │  │      │  ├─core
│  │  │      │  ├─layout
│  │  │      │  │  ├─default
│  │  │      │  │  │  ├─header
│  │  │      │  │  │  ├─setting-drawer
│  │  │      │  │  │  └─sidebar
│  │  │      │  │  ├─fullscreen
│  │  │      │  │  └─passport
│  │  │      │  └─routes
│  │  │      │      ├─dashboard
│  │  │      │      └─passport
│  │  │      │          ├─lock
│  │  │      │          ├─login
│  │  │      │          ├─register
│  │  │      │          └─register-result
│  │  │      ├─assets
│  │  │      │  └─tmp
│  │  │      │      ├─i18n
│  │  │      │      └─img
│  │  │      └─styles