AntD01 Angular2整合AntD、Angular2整合Material、利用Angular2，AntD，Material联合打造后台管理系统？？？

时间 2020-05-16

标签 antd01 antd angular2 angular 整合 material 利用联合打造后台管理系统栏目 AngularJS 繁體版

原文原文链接

待更新...css

2018-5-21 13:53:52html

1 环境说明

2 搭建Angular项目

　　详情参见 -> 点击前往java

　　辅助技能 -> 点击前往node

3 建立共享模块

ng g m shared

　　共享模块主要用来简化导入的目的，例如：多个模块都须要导入一些模块，咱们能够在跟模块中进行导入；可是这种方式不推荐使用，由于比较Low；因此咱们能够将一些经常使用的模块在共享模块导入，而后从共享模块进行导出操做，这样其它模块只须要导入共享模块就能够将其它的所需模块以通导入啦jquery

　　技巧01：只用支持屡次导入的模块才能够在共享模块中进行导入导出操做，例如：CommonModule；只支持导入一次的模块不能经过共享模块进行导入，例如：BrowserModule；不支持屡次导入的模块只能导入一次，若是多个模块都须要用到这个模块就必须在根模块进行导入。git

3 引入经常使用工具

　　3.1 安装jquery

npm install --save  jquery

　　　　jquery官网 -> 点击前往chrome

　　3.2 安装bootstrap

npm install --save  bootstrap

　　　　bootstrap官网 -> 点击前往typescript

　　　　坑01：我使用的时angular5，因此在下载bootstrap的时候的下载的时bootstrap4；bootstrap4这个版本和以前的版本有比较大的不一样npm

　　　　bootstrap4更新的地方 -> 点击前往json

　　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

　　Ant Design 官网（angular部分） -> 点击前往

　　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 样式

<button nz-button nzType="primary">Ant Design 样式的按钮</button>
<hr style="border: 1px solid red" />
<button type="button" class="btn btn-primary">bootstrap样式的按钮</button>

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 代码

<nav class="nav">
  <a class="nav-link" [routerLink]="['/login']">登陆页面</a>
  <a class="nav-link" [routerLink]="['/home']">主页面</a>
</nav>

<router-outlet></router-outlet>

　　　　5.5.2 效果展现

6 主页面布局

　　6.1 引入 Ant Design 页面布局

　　　　Ant Design 页面布局 -> 点击前往

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

<nz-layout>
      <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="triggerTemplate">
        <div class="logo">
        </div>
        <ul nz-menu [nzTheme]="'dark'" [nzMode]="'inline'" [nzInlineCollapsed]="isCollapsed">
          <li nz-submenu>
            <span title><i class="anticon anticon-user"></i><span class="nav-text">User</span></span>
            <ul>
              <li nz-menu-item>Tom</li>
              <li nz-menu-item>Bill</li>
              <li nz-menu-item>Alex</li>
            </ul>
          </li>
          <li nz-submenu>
            <span title><i class="anticon anticon-team"></i><span class="nav-text">Team</span></span>
            <ul>
              <li nz-menu-item>Team 1</li>
              <li nz-menu-item>Team 2</li>
            </ul>
          </li>
          <li nz-menu-item><span><i class="anticon anticon-file"></i><span class="nav-text">File</span></span></li>
        </ul>
      </nz-sider>
      <nz-layout>
        <nz-header style="background: #fff; padding:0;">
          <i class="anticon trigger" [class.anticon-menu-fold]="!isCollapsed" [class.anticon-menu-unfold]="isCollapsed" (click)="isCollapsed=!isCollapsed"></i>
        </nz-header>
        <nz-content style="margin:0 16px;">
          <nz-breadcrumb style="margin:16px 0;">
            <nz-breadcrumb-item>User</nz-breadcrumb-item>
            <nz-breadcrumb-item>Bill</nz-breadcrumb-item>
          </nz-breadcrumb>
          <div style="padding:24px; background: #fff; min-height: 360px;"> Bill is a cat. </div>
        </nz-content>
        <nz-footer style="text-align: center;">Ant Design ©2017 Implement By Angular</nz-footer>
      </nz-layout>
    </nz-layout>
    <ng-template #trigger>
      <i class="anticon anticon-up"></i>
    </ng-template>

HTML

:host ::ng-deep .trigger { font-size: 18px; line-height: 64px; padding: 0 24px; cursor: pointer; transition: color .3s; } :host ::ng-deep .trigger:hover { color: #1890ff; } :host ::ng-deep .logo { height: 32px; background: rgba(255, 255, 255, .2); margin: 16px; }

　　6.2 效果展现

　　　　坑01：因为Ant Design 默认的布局样式是根据内容进行灵活控制的，若是内容比较少就会出现下面的不理想效果

　　6.3 改进 -> 页面布局撑满品目

　　　　让页面盛满整个屏幕

　　　　技巧01：Ant Design 的布局容器 nz-layout 能够经过样式来让其撑满整个屏幕（PS: 默认是根据内容来自动调整大小的）

　　　　技巧02：nz-layout 标签有一个默认的 ant-layout 样式，咱们能够经过指定它的高度为100%来实现撑满整个屏幕的效果，例如：

.ant-layout{ height: 100%;
}

　　　　效果展现

　　6.4 改进 -> 设定内容区域的大小

　　　　默认的内容区域有一个默认值，可是随着内容的不断增长，整个内容区域的高度值会不断增长，从而将页脚挤到看不见

<!-- <div class="card text-center"> <div class="card-header"> 模拟主页面 </div> <div class="card-body"> <h5 class="card-title">Special title treatment</h5> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> <div class="card-footer text-muted"> {{currentData | date: "yyyy-MM-dd HH:mm:ss"}} </div> </div> -->
  <nz-layout>
    <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="triggerTemplate">
      <div class="logo">
      </div>
      <ul nz-menu [nzTheme]="'dark'" [nzMode]="'inline'" [nzInlineCollapsed]="isCollapsed">
        <li nz-submenu>
          <span title><i class="anticon anticon-user"></i><span class="nav-text">User</span></span>
          <ul>
            <li nz-menu-item>Tom</li>
            <li nz-menu-item>Bill</li>
            <li nz-menu-item>Alex</li>
          </ul>
        </li>
        <li nz-submenu>
          <span title><i class="anticon anticon-team"></i><span class="nav-text">Team</span></span>
          <ul>
            <li nz-menu-item>Team 1</li>
            <li nz-menu-item>Team 2</li>
          </ul>
        </li>
        <li nz-menu-item><span><i class="anticon anticon-file"></i><span class="nav-text">File</span></span></li>
      </ul>
    </nz-sider>
    <nz-layout>
      <nz-header style="background: #fff; padding:0;">
        <i class="anticon trigger" [class.anticon-menu-fold]="!isCollapsed" [class.anticon-menu-unfold]="isCollapsed" (click)="isCollapsed=!isCollapsed"></i>
      </nz-header>
      <nz-content style="margin:0 16px;">
        <nz-breadcrumb style="margin:16px 0;">
          <nz-breadcrumb-item>User</nz-breadcrumb-item>
          <nz-breadcrumb-item>Bill</nz-breadcrumb-item>
        </nz-breadcrumb>
        <div style="padding:24px; background: #fff; min-height: 360px;">
          
        <!-- 模拟内容 start -->
        <div class="card text-center">
          <div class="card-header"> 模拟主页面 </div>
          <div class="card-body">
            <h5 class="card-title">Special title treatment</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
          <div class="card-footer text-muted"> {{currentData | date: "yyyy-MM-dd HH:mm:ss"}} </div>
        </div>
        <div class="card text-center">
          <div class="card-header"> 模拟主页面 </div>
          <div class="card-body">
            <h5 class="card-title">Special title treatment</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
          <div class="card-footer text-muted"> {{currentData | date: "yyyy-MM-dd HH:mm:ss"}} </div>
        </div>
          <div class="card text-center">
    <div class="card-header"> 模拟主页面 </div>
    <div class="card-body">
      <h5 class="card-title">Special title treatment</h5>
      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
    <div class="card-footer text-muted"> {{currentData | date: "yyyy-MM-dd HH:mm:ss"}} </div>
  </div>
  <div class="card text-center">
    <div class="card-header"> 模拟主页面 </div>
    <div class="card-body">
      <h5 class="card-title">Special title treatment</h5>
      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
    <div class="card-footer text-muted"> {{currentData | date: "yyyy-MM-dd HH:mm:ss"}} </div>
  </div>
 <!-- 模拟内容 end -->

        </div>
      </nz-content>
      <nz-footer style="text-align: center;">庠序 &copy; 川渝足智</nz-footer>
    </nz-layout>
  </nz-layout>
  <ng-template #trigger>
    <i class="anticon anticon-up"></i>
  </ng-template>

HTML

　　　　技巧01：为 nz-header、nz-footer、nz-content 设置高度百分比，例如

nz-header { height: 8%;
} nz-footer { height: 8%;
} nz-content { height: 84%;
    
}

　　　　坑01：即便设置了高度，仍然不会生效；由于内容超出了高度；因此必须为内容区域设置溢出样式，例如

nz-content { height: 84%; overflow-y: auto;
}

:host ::ng-deep .trigger { font-size: 18px; line-height: 64px; padding: 0 24px; cursor: pointer; transition: color .3s;
  } :host ::ng-deep .trigger:hover { color: #1890ff;
  } :host ::ng-deep .logo { height: 32px; background: rgba(255, 255, 255, .2); margin: 16px;
  } .ant-layout{ height: 100%;
} nz-header { height: 8%;
} nz-footer { height: 8%;
} nz-content { height: 84%; overflow-y: auto;
}

CSS

　　　　效果展现：

　　6.5 布局技巧

　　　　Ant Design 的布局采用了Flex布局，这一点和material的布局采用的方式相同

　　　　flex教程 -> 点击前往

　　　　技巧01：咱们可将 ant-layout、nz-header、nz-footer、nz-content这些样式放到style.css中，这样就能够达到重复利用的效果了

/* You can add global styles to this file, and also import other style files */ .ant-layout{ height: 100%;
} nz-header { height: 8%;
} nz-footer { height: 8%;
} nz-content { height: 84%; overflow-y: auto;
}

style.css

7 angular整合material

　　angular-material官网 -> 点击前往

　　angular集成material官方教程 -> 点击前往

　　7.1 下载material

　　　　技巧01：material须要angular-cdk的支持

　　　　坑01：利用 npm 进行下载时默认时下载最新的版本，因此下载时还须要指定下载的版本

npm install --save @angular/material@5.2.0

　　7.2 下载angular-cdk

　　　　技巧01：因为咱们下载的angular-cdk版本必须和angular/material的版本保持一致

　　　　坑01：利用 npm 进行下载时默认时下载最新的版本，因此下载时还须要指定下载的版本

npm install --save @angular/cdk@^5.0.0

　　7.3 下载@angular/animations

　　　　技巧01：利用 ng-cli建立angular项目时会默认帮咱们下载一些依赖包，其中就包括了 @angular/animations

npm install --save @angular/animations

　　　　技巧02：下载好 @angular/animations 后须要在主模块引入 BrowserAnimationsModule

　　　　坑01：BrowserAnimationsModule 和 BrowserModule 同样不能进行重复引入，因此不能经过共享模块导入它们

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

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 { }

View Code

　　　　技巧03：利用 ng-cli 建立项目时默认给咱们下载的依赖包列表以下（PS：以angular5为例）

{ "name": "angulardemo02", "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", "core-js": "^2.4.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" } }

默认安装的依赖

　　7.4 下载 `hammerjs （可选）`

　　　　hammerjs 主要用于动做效果，有的material组件须要用到动做效果

npm install --save hammerjs

　　7.5 引入material主题

　　　　有两种方式引入material主题；外部样式引入 -> 点击前往

　　　　7.5.1 在style.css 中引入

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

　　　　7.5.2 在 angular-cli.json 中引入

　　7.6 引入material图标支持

　　　　在主页面中添加相关引用便可

　　　　技巧01：是在index.html中进行添加

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

　　7.7 引入所需的matrial模块

　　　　技巧01：因为每一个material组件都须要导入一个相关的模块后才可使用，因此三少建议将material相关组件的对应模块经过共享模块进行导入；而后在须要用到material组件的模块导入共享模块便可

　　　　技巧02：以前导入material组件的对应模块时书写的导入路径只须要写到 @angular/material 便可；可是从angular5集成material5后导入路径就必须写全，已导入button组件对应的material模块为例：

import {MatButtonModule} from '@angular/material/button'; // 如今的写法
import {MatButtonModule} from '@angular/material'; // 以前的写法

8 利用material打造登陆页面

　　8.1 引入material先关模块

　　　　须要引入 MatCardModule MatInputModule MatButtonModule

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); // import { MatButtonModule } from '@angular/material'; // 以前的写法
import {MatButtonModule} from '@angular/material/button'; // angular5 集成 material5 后的写法
import {MatCardModule} from '@angular/material/card'; import {MatInputModule} from '@angular/material/input'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; @NgModule({ imports: [ CommonModule, FormsModule, ReactiveFormsModule, NgZorroAntdModule.forRoot(), MatButtonModule, MatCardModule, MatInputModule ], exports: [ CommonModule, FormsModule, ReactiveFormsModule, NgZorroAntdModule, MatButtonModule, MatCardModule, MatInputModule ], declarations: [] }) export class SharedModule { }

shared.module.ts

　　8.2 编写登陆页面HTML

　　　　技巧01：material采用了Flex布局

　　　　flex布局 -> 点击前往

<!-- <div class="card text-center"> <div class="card-header"> 模拟登陆页面 </div> <div class="card-body"> <h5 class="card-title">Special title treatment</h5> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> <button mat-button>Click me!</button> </div> <div class="card-footer text-muted"> {{currentData | date: "yyyy-MM-dd HH:mm:ss"}} </div> </div> -->

<form [formGroup]="loginGroup" class="login-div">
  <mat-card class="login-card">
    <mat-card-header>
      <div mat-card-avatar class="example-header-image"></div>
      <mat-card-title>登陆模块</mat-card-title>
      <mat-card-subtitle>登陆信息录入并提交</mat-card-subtitle>
    </mat-card-header>
    <!-- <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu"> -->
    <mat-card-content>
        <mat-form-field class="full-width">
          <!-- <span matPrefix>XiangXu.</span> -->
          <input matInput type="text" placeholder="请输入你的邮箱" formControlName="username" />
          <!-- <span matSuffix>@163.com</span> -->
        </mat-form-field>

        <mat-form-field class="full-width">
            <input matInput type="password" placeholder="请输入你的密码" formControlName="password" />
        </mat-form-field>

        <button mat-raised-button type="button" (click)="on_login_click()">登陆</button>
    </mat-card-content>
    <mat-card-actions class="text-right">
      <p>还未注册？&nbsp;<a href="">当即注册</a></p>
      <p>忘记密码？&nbsp;<a href="">找回密码</a></p>
    </mat-card-actions>
  </mat-card>
</form>

HTML

　　8.3 编写登陆页面CSS

.login-card { max-width: 400px;
} .example-header-image { background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg'); background-size: cover;
}

/* 父容器采用Flex布局（PS: 父容器必须指定高度和宽度，不然项目的效果体验较差） */ .login-div { height: 100%; width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center;
}

/** 宽度充满 */ .full-width { width: 100%;
}

/** 文本右对齐 */ .text-right { text-align: end;
}

CSS

　　8.4 编写登陆页面的TS文件

import { Component, OnInit } from '@angular/core'; import {FormGroup, FormControl, Validators} from '@angular/forms'; import { Router } from '@angular/router'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnInit { loginGroup: FormGroup; currentData: Date; constructor( private _router: Router ) { } ngOnInit() { this.currentData = new Date(); this.loginGroup = new FormGroup({ username: new FormControl("admin", [Validators.required], []), password: new FormControl("111", [Validators.required], []) }); } on_login_click() { console.log(this.loginGroup.value); // 获取全部数据
    console.log(this.loginGroup.controls['username'].value) // 获取某个数据
    console.log(this.loginGroup.get('username').value); // 获取某个数据
    if ((this.loginGroup.controls['username'].value !== "admin") || this.loginGroup.get('password').value != "111") { this._router.navigate(['/login']); } else { this._router.navigate(['/home']); } alert("提交登陆信息"); } }

　　8.5 效果展现

9 集成loading插件

　　参考博文 -> 点击前往

10 开发Demo

　　根据功能建立一个模块便可，而后配置模块的路由文件，再到主路由中配置模块懒加载便可

　　10.1 登陆页面

　　10.2 主页面展现

　　源代码 -> 点击前往

AntD01 Angular2整合AntD、Angular2整合Material、利用Angular2，AntD，Material联合打造后台管理系统 ？？？

1 环境说明

2 搭建Angular项目

3 建立共享模块

3 引入经常使用工具

3.1 安装jquery

3.2 安装bootstrap

3.3 引入jQuery和bootstrap

3.4 测试demo

4 angular集成 Ant Design

4.1 安装 Ant Design

4.2 引入 Ant Design 模块

4.3 引入 Ant Design 样式

4.4 测试Demo

5 路由配置和模块懒加载

5.1 home模块

5.1.1 建立home模块

5.1.2 建立home组件

5.1.3 建立home路由

5.1.3 引入home路由

5.2 登陆组件

5.3 共享模块配置

5.4 主模块

5.4.1 主路由

5.4.2 主模块配置

5.5 主组件页面

5.5.1 代码

5.5.2 效果展现

6 主页面布局

6.1 引入 Ant Design 页面布局

6.2 效果展现

6.3 改进 -> 页面布局撑满品目

6.4 改进 -> 设定内容区域的大小

6.5 布局技巧

7 angular整合material

7.1 下载material

7.2 下载angular-cdk

7.3 下载@angular/animations

7.4 下载 hammerjs （可选）

7.5 引入material主题

7.5.1 在style.css 中引入

7.5.2 在 angular-cli.json 中引入

7.6 引入material图标支持

7.7 引入所需的matrial模块

8 利用material打造登陆页面

8.1 引入material先关模块

8.2 编写登陆页面HTML

8.3 编写登陆页面CSS

8.4 编写登陆页面的TS文件

8.5 效果展现

9 集成loading插件

10 开发Demo

10.1 登陆页面

10.2 主页面展现

AntD01 Angular2整合AntD、Angular2整合Material、利用Angular2，AntD，Material联合打造后台管理系统？？？

　　3.1 安装jquery

　　3.2 安装bootstrap

　　3.3 引入jQuery和bootstrap

　　3.4 测试demo

　　4.1 安装 Ant Design

　　4.2 引入 Ant Design 模块

　　4.3 引入 Ant Design 样式

　　　4.4 测试Demo

　　5.1 home模块

　　　　5.1.1 建立home模块

　　　　5.1.2 建立home组件

　　　　5.1.3 建立home路由

　　　　5.1.3 引入home路由

　　5.2 登陆组件

　　5.3 共享模块配置

　　5.4 主模块

　　　　5.4.1 主路由

　　　　5.4.2 主模块配置

　　5.5 主组件页面

　　　　5.5.1 代码

　　　　5.5.2 效果展现

　　6.1 引入 Ant Design 页面布局

　　6.2 效果展现

　　6.3 改进 -> 页面布局撑满品目

　　6.4 改进 -> 设定内容区域的大小

　　6.5 布局技巧

　　7.1 下载material

　　7.2 下载angular-cdk

　　7.3 下载@angular/animations

　　7.4 下载 `hammerjs （可选）`

　　7.5 引入material主题

　　　　7.5.1 在style.css 中引入

　　　　7.5.2 在 angular-cli.json 中引入

　　7.6 引入material图标支持

　　7.7 引入所需的matrial模块

　　8.1 引入material先关模块

　　8.2 编写登陆页面HTML

　　8.3 编写登陆页面CSS

　　8.4 编写登陆页面的TS文件

　　8.5 效果展现

　　10.1 登陆页面

　　10.2 主页面展现