feat(schematics): add template option in ng-add (#3674)

docs/schematics.en-US.md

@@ -8,6 +8,12 @@ title: Schematics
 
 Init project with `ng-zorro-antd`.
 
+Run `ng add ng-zorro-antd` in your project directory, and follow the options to configure.
+
+<img style="display: block; border-radius: 4px; box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);" src="https://img.alicdn.com/tfs/TB19fFHdkxz61VjSZFtXXaDSVXa-680-243.svg">
+
+You can choose a preset template to create your project, then develop on this basis code.
+
 ### Command
 
 ```bash
@@ -51,54 +57,3 @@ For example, you can generate an login form with the follow command.
 ```bash
 ng g ng-zorro-antd:form-normal-login login
 ```
-
-### Options
-
-***--entry-component***
-
-Specifies if the component is an entry component of declaring module.
-
-***--export***
-
-Specifies if declaring module exports the component.
-
-***--flat***
-
-Flag to indicate if a dir is created.
-
-***--inline-style (-s)***
-
-Specifies if the style will be in the ts file.
-
-***--inline-template (-t)***
-
-Specifies if the template will be in the ts file.
-
-***--module (-m)***
-
-Allows specification of the declaring module.
-
-***--prefix (-p)***
-
-The prefix to apply to generated selectors.
-
-***--project***
-
-The name of the project.
-
-***--selector***
-
-The selector to use for the component.
-
-***--skip-import***
-
-Flag to skip the module import.
-
-***--spec***
-
-Specifies if a spec file is generated.
-
-***--styleext***
-
-The file extension to be used for style files.
-

docs/schematics.zh-CN.md

@@ -7,35 +7,13 @@ title: 脚手架
 
 ## 项目初始化
 
-自动完成 `ng-zorro-antd` 的初始化配置，包括引入国际化文件，导入模块，引入样式文件等工作。
+在项目下运行命令 `ng add ng-zorro-antd` 跟随选项便可完成初始化配置，包括引入国际化文件，导入模块，引入样式文件等工作。
 
-### 命令
-
-```bash
-ng add ng-zorro-antd [options]
-```
-
-### 参数
-
-***--theme***
-
-`ng-zorro-antd` 会在 `src` 目录下生成 `theme.less` 的主题配置文件
-
-详细的配置可以在[自定义主题](/docs/customize-theme/zh)中查看。
-
-***--locale***
-
-初始化配置时增加 `--locale=[语言]` 参数，`ng-zorro-antd` 会自动引入支持的语言包以及 Angular 对应的 [i18n 文件](https://angular.io/guide/i18n)
+<img style="display: block; border-radius: 4px; box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);" src="https://img.alicdn.com/tfs/TB19fFHdkxz61VjSZFtXXaDSVXa-680-243.svg">
 
-默认的国际化配置为中文(zh_CN)，详细的可配置选项可以在[国际化](/docs/i18n/zh)中查看。
+同时你可以通过选择预设的模板创建一个 Angular 项目，并在此基础上进行开发。
 
-***--animations***
-
-启用 `BrowserAnimationsModule`
-
-***--gestures***
-
-安装 `hammerjs` 并引入为项目添加手势支持
+<img style="display: block; border-radius: 4px; box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2); max-width: 680px;" src="https://img.alicdn.com/tfs/TB1IC0TeEWF3KVjSZPhXXXclXXa-2000-1078.png">
 
 ## 生成组件
 
@@ -52,53 +30,3 @@ ng g ng-zorro-antd:[schematic] <name> [options]
 ```bash
 ng g ng-zorro-antd:form-normal-login login
 ```
-
-### 参数
-
-***--entry-component***
-
-组件是否在模块的 `entryComponents` 声明
-
-***--export***
-
-组件是否在模块的 `exports` 声明
-
-***--flat***
-
-指定是否创建目录
-
-***--inline-style (-s)***
-
-指定是否使用行内样式
-
-***--inline-template (-t)***
-
-指定是否使用行内模版
-
-***--module (-m)***
-
-指定声明的模块
-
-***--prefix (-p)***
-
-组件选择器前缀
-
-***--project***
-
-指定声明到的项目名
-
-***--selector***
-
-组件的选择器名称
-
-***--skip-import***
-
-指定是否跳过模块引入
-
-***--spec***
-
-指定是否生成 `.spec` 测试文件
-
-***--styleext***
-
-指定样式文件扩展名

schematics/collection.json

@@ -12,11 +12,21 @@
       "factory": "./ng-add/setup-project/index",
       "schema": "./ng-add/schema.json"
     },
-    "boot-page": {
+    "blank": {
       "description": "Set up boot page",
       "private": true,
-      "factory": "./ng-generate/boot-page/index",
-      "schema": "./ng-generate/boot-page/schema.json"
+      "factory": "./ng-generate/blank/index",
+      "schema": "./ng-generate/blank/schema.json"
+    },
+    "sidemenu": {
+      "description": "Add Sidebar Navigation Layout in your project.",
+      "factory": "./ng-generate/side-menu/index",
+      "schema": "./ng-generate/side-menu/schema.json"
+    },
+    "topnav": {
+      "description": "Add Top Navigation Layout in your project.",
+      "factory": "./ng-generate/topnav/index",
+      "schema": "./ng-generate/topnav/schema.json"
     },
     "add-icon-assets": {
       "description": "Add icon assets into CLI config",

schematics/ng-add/index.ts

@@ -17,8 +17,9 @@ export default function(options: Schema): Rule {
 
     context.addTask(new RunSchematicTask('ng-add-setup-project', options), [installTaskId]);
 
-    if (options.bootPage) {
-      context.addTask(new RunSchematicTask('boot-page', options));
+    if (options.template) {
+      context.addTask(new RunSchematicTask(options.template, options));
     }
+
   };
 }

schematics/ng-add/schema.json

@@ -16,11 +16,6 @@
       "default": false,
       "description": "Do not add ng-zorro-antd dependencies to package.json (e.g., --skipPackageJson)"
     },
-    "bootPage": {
-      "type": "boolean",
-      "default": true,
-      "description": "Set up boot page."
-    },
     "dynamicIcon": {
       "type": "boolean",
       "default": false,
@@ -120,6 +115,19 @@
         ]
       }
     },
+    "template": {
+      "type": "string",
+      "default": "blank",
+      "description": "Create an Angular project with using preset template.",
+      "x-prompt": {
+        "message": "Choose template to create project:",
+        "type": "list",
+        "items": [
+          "blank",
+          "sidemenu"
+        ]
+      }
+    },
     "gestures": {
       "type": "boolean",
       "default": false,

schematics/ng-add/schema.ts

@@ -35,8 +35,14 @@ export type Locale =
   | 'zh_CN'
   | 'zh_TW';
 
+export enum ProjectTemplate {
+  Blank    = 'blank',
+  Sidemenu = 'sidemenu',
+  Topnav   = 'topnav',
+  None     = 'none'
+}
+
 export interface Schema {
-  bootPage?: boolean;
   /** Name of the project to target. */
   project?: string;
   /** Whether to skip package.json install. */
@@ -47,4 +53,5 @@ export interface Schema {
   animations?: boolean;
   locale?: Locale;
   i18n?: Locale;
+  template?: ProjectTemplate;
 }

schematics/ng-generate/side-menu/files/src/app/app-routing.module.ts.template

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [
+  { path: '', pathMatch: 'full', redirectTo: '/welcome' },
+  { path: 'welcome', loadChildren: () => import('./pages/welcome/welcome.module').then(m => m.WelcomeModule) }
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

schematics/ng-generate/side-menu/files/src/app/app.component.__style__.template

@@ -0,0 +1,80 @@
+:host {
+  display: flex;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.app-layout {
+  height: 100vh;
+}
+
+.menu-sidebar {
+  position: relative;
+  z-index: 10;
+  min-height: 100vh;
+  box-shadow: 2px 0 6px rgba(0,21,41,.35);
+}
+
+.header-trigger {
+  height: 64px;
+  padding: 20px 24px;
+  font-size: 20px;
+  cursor: pointer;
+  transition: all .3s,padding 0s;
+}
+
+.trigger:hover {
+  color: #1890ff;
+}
+
+.sidebar-logo {
+  position: relative;
+  height: 64px;
+  padding-left: 24px;
+  overflow: hidden;
+  line-height: 64px;
+  background: #001529;
+  transition: all .3s;
+}
+
+.sidebar-logo img {
+  display: inline-block;
+  height: 32px;
+  width: 32px;
+  vertical-align: middle;
+}
+
+.sidebar-logo h1 {
+  display: inline-block;
+  margin: 0 0 0 20px;
+  color: #fff;
+  font-weight: 600;
+  font-size: 14px;
+  font-family: Avenir,Helvetica Neue,Arial,Helvetica,sans-serif;
+  vertical-align: middle;
+}
+
+nz-header {
+  padding: 0;
+  width: 100%;
+  z-index: 2;
+}
+
+.app-header {
+  position: relative;
+  height: 64px;
+  padding: 0;
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+}
+
+nz-content {
+  margin: 24px;
+}
+
+.inner-content {
+  padding: 24px;
+  background: #fff;
+  height: 100%;
+}