AntD01 Angular2整合AntD、Angular2整合Material、利用Angular2，AntD，Material聯合打造後臺管理系統？？？

時間 2019-11-20

標籤 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 主頁面展現