AntD01 Angular2整合AntD、Angular2整合Material、利用Angular2，AntD，Material聯合打造後臺管理系統 ？？？
待更新...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
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" } }
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 { }
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": {} } }
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 {}
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 { }
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 { }
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 {}
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 { }
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 頁面佈局
選擇一款合適的佈局頁面後直接複製到項目中便可
<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>
: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;">庠序 © 川渝足智</nz-footer> </nz-layout> </nz-layout> <ng-template #trigger> <i class="anticon anticon-up"></i> </ng-template>
技巧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; }
效果展現：
6.5 佈局技巧
Ant Design 的佈局採用了Flex佈局，這一點和material的佈局採用的方式相同
技巧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; }
7 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 { }
技巧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 { }
8.2 編寫登陸頁面HTML
技巧01：material採用了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>還未註冊？ <a href="">當即註冊</a></p> <p>忘記密碼？ <a href="">找回密碼</a></p> </mat-card-actions> </mat-card> </form>
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; }
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插件
相關文章
- 1. AntD01 Angular2整合AntD、Angular2整合Material、利用Angular2，AntD，Material聯合打造後臺管理系統 ？？？
- 2. Angular2 整合springboot
- 3. SpringMVC簡單整合Angular2
- 4. Material(包括Material Icon)在Angular2中的使用
- 5. Angular2 Material Design開發環境搭建
- 6. Angular2 - 初學Angular2
- 7. angular2系統學習 - 管道
- 8. angular2 select 聯動
- 9. 【Angular2】試卷整體設計
- 10. angular2之打包
- 更多相關文章...
- • MyBatis與Spring的整合實例 - MyBatis教程
- • Spring整合Redis詳細步驟 - Redis教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • Java Agent入門實戰（三）-JVM Attach原理與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 在windows下的虛擬機中,安裝華爲電腦的deepin操作系統
- 2. 強烈推薦款下載不限速解析神器
- 3. 【區塊鏈技術】孫宇晨：區塊鏈技術帶來金融服務的信任變革
- 4. 搜索引起的鏈接分析-計算網頁的重要性
- 5. TiDB x 微衆銀行 | 耗時降低 58%，分佈式架構助力實現普惠金融
- 6. 《數字孿生體技術白皮書》重磅發佈（附完整版下載）
- 7. 雙十一「避坑」指南：區塊鏈電子合同爲電商交易保駕護航！
- 8. 區塊鏈產業，怎樣「鏈」住未來？
- 9. OpenglRipper使用教程
- 10. springcloud請求一次好用一次不好用zuul Name or service not known
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. AntD01 Angular2整合AntD、Angular2整合Material、利用Angular2，AntD，Material聯合打造後臺管理系統 ？？？
- 2. Angular2 整合springboot
- 3. SpringMVC簡單整合Angular2
- 4. Material(包括Material Icon)在Angular2中的使用
- 5. Angular2 Material Design開發環境搭建
- 6. Angular2 - 初學Angular2
- 7. angular2系統學習 - 管道
- 8. angular2 select 聯動
- 9. 【Angular2】試卷整體設計
- 10. angular2之打包