Skip to content

Commit

Permalink
feat(schematics): add template option in ng-add (#3674)
Browse files Browse the repository at this point in the history
  • Loading branch information
hsuanxyz authored and vthinkxie committed Jun 29, 2019
1 parent c0ba56d commit 69072de
Show file tree
Hide file tree
Showing 35 changed files with 596 additions and 140 deletions.
57 changes: 6 additions & 51 deletions docs/schematics.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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.

80 changes: 4 additions & 76 deletions docs/schematics.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -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">

## 生成组件

Expand All @@ -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***

指定样式文件扩展名
16 changes: 13 additions & 3 deletions schematics/collection.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
5 changes: 3 additions & 2 deletions schematics/ng-add/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}

};
}
18 changes: 13 additions & 5 deletions schematics/ng-add/schema.json
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down
9 changes: 8 additions & 1 deletion schematics/ng-add/schema.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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. */
Expand All @@ -47,4 +53,5 @@ export interface Schema {
animations?: boolean;
locale?: Locale;
i18n?: Locale;
template?: ProjectTemplate;
}
File renamed without changes.
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -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 { }
Original file line number Diff line number Diff line change
@@ -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%;
}
Loading

0 comments on commit 69072de

Please sign in to comment.