java angular2集成_AntD01 Angular2整合AntD、Angular2整合Material、利用Angular2，AntD，Material联合打造后台管理系统 ？？？...

待更新...

2018-5-21 13:53:52

1 环境说明

2 搭建Angular项目

3 创建共享模块

ng g m shared

共享模块主要用来简化导入的目的，例如：多个模块都需要导入一些模块，我们可以在跟模块中进行导入；但是这种方式不推荐使用，因为比较Low；所以我们可以将一些常用的模块在共享模块导入，然后从共享模块进行导出操作，这样其它模块只需要导入共享模块就可以将其它的所需模块以通导入啦

技巧01：只用支持多次导入的模块才可以在共享模块中进行导入导出操作，例如：CommonModule；只支持导入一次的模块不能通过共享模块进行导入，例如：BrowserModule；不支持多次导入的模块只能导入一次，如果多个模块都需要用到这个模块就必须在根模块进行导入。

3 引入常用工具

3.1 安装jquery

npm install --save jquery

3.2 安装bootstrap

npm install --save bootstrap

坑01：我使用的时angular5，所以在下载bootstrap的时候的下载的时bootstrap4；bootstrap4这个版本和之前的版本有比较大的不同

3.3 引入jQuery和bootstrap

在.angular-cli.json 文件中引入bootstrap的CSS文件和JS文件，以及jQuery的JS文件

技巧01：bootstrap需要jqeury的支持，所以在导入bootstrap和jQuery的js文件时将jquery的文件先导入

"../node_modules/bootstrap/dist/css/bootstrap.min.css"

"../node_modules/jquery/dist/jquery.min.js","../node_modules/bootstrap/dist/js/bootstrap.min.js"

3.4 测试demo

在主组件中使用bootstrap4的相关样式

4 angular集成 Ant Design

4.1 安装 Ant Design

技巧01：下载 Ant Design 时会默认帮我们下载angular-cdk

npm install ng-zorro-antd --save

{

"name": "frame",

"version": "0.0.0",

"license": "MIT",

"scripts": {

"ng": "ng",

"start": "ng serve",

"build": "ng build --prod",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e"

},

"private": true,

"dependencies": {

"@angular/animations": "^5.2.0",

"@angular/common": "^5.2.0",

"@angular/compiler": "^5.2.0",

"@angular/core": "^5.2.0",

"@angular/forms": "^5.2.0",

"@angular/http": "^5.2.0",

"@angular/platform-browser": "^5.2.0",

"@angular/platform-browser-dynamic": "^5.2.0",

"@angular/router": "^5.2.0",

"bootstrap": "^4.1.1",

"core-js": "^2.4.1",

"jquery": "^3.3.1",

"ng-zorro-antd": "^0.7.1",

"rxjs": "^5.5.6",

"zone.js": "^0.8.19"

},

"devDependencies": {

"@angular/cli": "~1.7.0",

"@angular/compiler-cli": "^5.2.0",

"@angular/language-service": "^5.2.0",

"@types/jasmine": "~2.8.3",

"@types/jasminewd2": "~2.0.2",

"@types/node": "~6.0.60",

"codelyzer": "^4.0.1",

"jasmine-core": "~2.8.0",

"jasmine-spec-reporter": "~4.2.1",

"karma": "~2.0.0",

"karma-chrome-launcher": "~2.2.0",

"karma-coverage-istanbul-reporter": "^1.2.1",

"karma-jasmine": "~1.1.0",

"karma-jasmine-html-reporter": "^0.2.2",

"protractor": "~5.1.2",

"ts-node": "~4.1.0",

"tslint": "~5.9.1",

"typescript": "~2.5.3"

}

}

package.json

4.2 引入 Ant Design 模块

技巧01：在根 module 中需要使用 NgZorroAntdModule.forRoot()，在子 module 需要使用 NgZorroAntdModule(官方推荐的做法)

技巧02：在共享模块中导入NgZorroAntdModule时使用 NgZorroAntdModule.forRoot()，在共享模块中导出 NgZorroAntdModule 时使用 NgZorroAntdModule；这样在需要用到 Ant Design 的模块中直接导入共享模块就可以啦。(三少推荐做法)

import { NgModule } from '@angular/core';

import { CommonModule } from'@angular/common';

import { RouterModule } from'@angular/router/src/router_module';

import { NgZorroAntdModule } from'ng-zorro-antd';//注册语言包

import { registerLocaleData } from '@angular/common';

import zh from'@angular/common/locales/zh';

registerLocaleData(zh);

@NgModule({

imports: [

CommonModule,

NgZorroAntdModule.forRoot()

],

exports: [

CommonModule,

NgZorroAntdModule

],

declarations: []

})

export class SharedModule { }

shared.module.ts

4.3 引入 Ant Design 样式

在 angular-cli.json 文件中引入 Ant Design 样式

"../node_modules/ng-zorro-antd/src/ng-zorro-antd.less"

{"$schema": "./node_modules/@angular/cli/lib/config/schema.json","project": {"name": "frame"},"apps": [

{"root": "src","outDir": "dist","assets": ["assets","favicon.ico"],"index": "index.html","main": "main.ts","polyfills": "polyfills.ts","test": "test.ts","tsconfig": "tsconfig.app.json","testTsconfig": "tsconfig.spec.json","prefix": "app","styles": ["styles.css","../node_modules/ng-zorro-antd/src/ng-zorro-antd.less","../node_modules/bootstrap/dist/css/bootstrap.min.css"],"scripts": ["../node_modules/jquery/dist/jquery.min.js","../node_modules/bootstrap/dist/js/bootstrap.min.js"],"environmentSource": "environments/environment.ts","environments": {"dev": "environments/environment.ts","prod": "environments/environment.prod.ts"}

}

],"e2e": {"protractor": {"config": "./protractor.conf.js"}

},"lint": [

{"project": "src/tsconfig.app.json","exclude": "**/node_modules/**"},

{"project": "src/tsconfig.spec.json","exclude": "**/node_modules/**"},

{"project": "e2e/tsconfig.e2e.json","exclude": "**/node_modules/**"}

],"test": {"karma": {"config": "./karma.conf.js"}

},"defaults": {"styleExt": "css","component": {}

}

}

angular-cli.json

4.4 测试Demo

在主组件中使用 Ant Design 样式

Ant Design 样式的按钮

---

bootstrap样式的按钮

5 路由配置和模块懒加载

5.1 home模块

5.1.1 创建home模块

ng g m home

5.1.2 创建home组件

技巧01：当angular应用中有多个模块时，创建组件时需要制定一个所属模块

ng g c home/home -module home

5.1.3 创建home路由

技巧01：子模块的路由文件中要用  RouterModule.forChild(homeRoutes)

import { NgModule } from "@angular/core";

import { RouterModule, Routes } from "@angular/router";

import { HomeComponent } from "./home/home.component";

export const homeRoutes: Routes = [

{

path: '',

component: HomeComponent

}

]

@NgModule({

imports: [RouterModule.forChild(homeRoutes)],

exports: [RouterModule]

})

export class HomeRoutesModule {}

HomeRoutesModule.ts

5.1.3 引入home路由

技巧01：由于我们是采用路由实现模块的懒加载，所以不用在主模块中引入子模块；直接将子模块的路由引入到子模块并在主模块的主路由中配置子模块的懒加载即可

import { NgModule } from '@angular/core';

import { } from '@angular/common';

import { HomeComponent } from './home/home.component';

import { SharedModule } from '../shared/shared.module';

import { HomeRoutesModule } from './home.routes.module';

@NgModule({

imports: [

SharedModule,

HomeRoutesModule

],

declarations: [HomeComponent]

})

export class HomeModule { }

HomeModule.java

5.2 登录组件

技巧01：由于登录模块只有一个登录组件，所以三少就没有单独将其设置成一个模块；直接将登录组件在主模块中进行声明即可

技巧02：如果登录逻辑比较复杂，三少建议将登录先关单独设置一个登录模块

创建一个登录组件即可

ng g c login

5.3 共享模块配置

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

import { RouterModule } from '@angular/router/src/router_module';

import { NgZorroAntdModule } from 'ng-zorro-antd';

// 注册语言包

import { registerLocaleData } from '@angular/common';

import zh from '@angular/common/locales/zh';

registerLocaleData(zh);

@NgModule({

imports: [

CommonModule,

NgZorroAntdModule.forRoot()

],

exports: [

CommonModule,

NgZorroAntdModule

],

declarations: []

})

export class SharedModule { }

SharedModule.ts

5.4 主模块

5.4.1 主路由

技巧01：在主模块的路由中要使用：imports: [RouterModule.forRoot(routes)]

import { NgModule } from '@angular/core';

import { RouterModule, Routes } from '@angular/router';

import { LoginComponent } from './login/login.component';

/** 路由项 */

export const routes: Routes = [

{

path: '',

redirectTo: 'login',

pathMatch: 'full'

},

{

path: 'login',

component: LoginComponent

},

{

path: 'home',

loadChildren: './home/home.module#HomeModule'

// loadChildren:'./user/user.module#UserModule'

},

{

path: '**',

component: LoginComponent

}

]

/** 路由组件 */

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutesModule {}

AppRoutesModule.ts

5.4.2 主模块配置

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { BrowserAnimationsModule } from "@angular/platform-browser/animations";

import { AppComponent } from './app.component';

import { AppRoutesModule } from './app.routes.module';

import { LoginComponent } from './login/login.component';

import { SharedModule } from './shared/shared.module';

@NgModule({

declarations: [

AppComponent,

LoginComponent

],

imports: [

BrowserModule,

BrowserAnimationsModule,

SharedModule,

AppRoutesModule,

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

AppModule.ts

5.5 主组件页面

需求：根据导航栏进行跳转

5.5.1 代码

登录页面

主页面

5.5.2 效果展示

6 主页面布局

6.1 引入 Ant Design 页面布局

选择一款合适的布局页面后直接复制到项目中即可