使用ng2-admin搭建成熟可靠的后臺(tái)系統(tǒng) -- ng2-admin（一）

1.介紹

ng2-admin

• 基于Angular 4+，Angular CLI，Bootstrap 4，以及許多令人敬畏的模塊和插件

• ng2-admin的配置文件非常完善，組件也比較多，所以直接選擇ng2-admin起步，適合有一定基礎(chǔ)或者想直接上手搭建一套后臺(tái)系統(tǒng)，搭建的后臺(tái)系統(tǒng)會(huì)有較多動(dòng)態(tài)組件，追求自動(dòng)化，動(dòng)態(tài)性。 例：表單將會(huì)使用service來動(dòng)態(tài)生成，以及完成驗(yàn)證。

• github master分支起步，development 為本系列文章最新版成品，建議從 master 一篇一篇跟著教程敲，第五章后每篇文章都有各自對(duì)應(yīng)的“最終效果”分支.

• 官方demo

• 官方文檔

2.準(zhǔn)備工作

node + webapack + ng-cli

• webapck需要node提供服務(wù)，并且需要npm安裝，所以先下載一個(gè)node

• 可以全局安裝 ng-cli， 強(qiáng)大的官方腳手架（ng2-admin升級(jí)后也選用了官方腳手架）

• 充滿電

ng2-admin （官方最新版，有部分配置文件改動(dòng)，風(fēng)格已換）
ng2-admin(推薦版本)（教程穩(wěn)定版，master 分支，本系列教程是穩(wěn)定版，有無 Angular 基礎(chǔ)皆可）

從git上先把項(xiàng)目拉下來，然后執(zhí)行

    npm install

安裝好依賴后，使用npm start直接跑起項(xiàng)目（默認(rèn)使用的是4200端口，確保端口未占用）

    npm start

瀏覽器輸入localhost:4200 直接訪問

3.開始構(gòu)建第一個(gè)模塊

ng-cli可以直接創(chuàng)建文件，本文不做講解，可以自行搜索

mark

項(xiàng)目目錄

app 文件夾是項(xiàng)目主要文件，其中我們的頁面在 pages 文件夾，組件和個(gè)性化定制在 theme 文件夾。

assets 用于存放一些靜態(tài)資源文件，例如圖片，字體。

environments 決定項(xiàng)目啟動(dòng)的環(huán)境（ prod )

meta 看著像是一些介紹

• 進(jìn)入 pages 目錄，新建一個(gè)文件夾命名為 user （如下圖）

mark

在 user 目錄下， 新建一個(gè) component 文件，命名為 user.comopnent.ts (.component 后綴代表這是一個(gè) component 組件)

import { Component } from '@angular/core';  // 導(dǎo)入angular核心模塊

import 'style-loader!./user.component.scss';    // 導(dǎo)入scss文件

@Component({    // Component directive 聲明組件屬于 Component
    selector: 'ngt-user', // 定義組件在HTML代碼中匹配的標(biāo)簽
    template: `<router-outlet></router-outlet>` // 指定組件關(guān)聯(lián)的內(nèi)聯(lián)模板，這里直接使用一個(gè)路由插座
})

export class UserComponent {    // 導(dǎo)出模塊，注意命名以 Component 結(jié)尾，方便區(qū)分
    constructor() {}
};

user.component.scss

$red:red;

user.routing.ts

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

import { UserComponent } from './user.component'; // 導(dǎo)入剛才新建的模塊

const routes: Routes = [
    {
        path: '',
        component: UserComponent,
        children: []
    }
]

export const routing = RouterModule.forChild(routes);

user.module.ts

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

import { UserComponent } from './user.component'; // 導(dǎo)入剛才新建的模塊
import { routing } from './user.routing'; // 導(dǎo)入路由文件

@NgModule({
    imports: [
        CommonModule,
        routing
    ],
    declarations: [
        UserComponent
    ]
})

export class UserModule {} 

• 在 user 目錄下，新建文件夾命名為 user-list, 包含三個(gè)文件

user-list.component.ts

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

@Component({
    selector: 'ngt-user-list',
    templateUrl: './user-list.component.html' // 組件對(duì)應(yīng)的html路徑
})

export class UserListComponent { }

user-list.component.html

    <div>
        用戶列表組件
    </div>

index.ts

export * from './user-list.component';
export * from './user-add';

index.ts 中導(dǎo)出了 user-add 文件夾，自己嘗試在 user-list 文件夾中新建 user-add文件夾，最終文件如下

mark

然后修改兩個(gè)文件，加入我們新建的兩個(gè)模塊，分別是

user.routing.ts

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

import { UserComponent } from './user.component';
import { 
    UserListComponent,
    UserAddComponent
} from './user-list';

const routes: Routes = [
    {
        path: '',
        component: UserComponent,
        children: [
            {
                path: 'list',
                component: UserListComponent
            },
            { 
                path: 'list/add',
                component: UserAddComponent
            }
        ]
    }
]

export const routing = RouterModule.forChild(routes);

user.module.ts

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

import { UserComponent } from './user.component';
import { 
    UserListComponent,
    UserAddComponent
} from './user-list';
import { routing } from './user.routing';

@NgModule({
    imports: [
        CommonModule,
        routing
    ],
    declarations: [
        UserComponent,
        UserListComponent,
        UserAddComponent
    ]
})

export class UserModule {} 

• 在 pages 目錄下的 page.routing.ts 中加入我們新建的 Module

import { Routes, RouterModule }  from '@angular/router';
import { Pages } from './pages.component';
import { ModuleWithProviders } from '@angular/core';
// noinspection TypeScriptValidateTypes

// export function loadChildren(path) { return System.import(path); };

export const routes: Routes = [
  {
    path: 'login',
    loadChildren: 'app/pages/login/login.module#LoginModule'
  },
  {
    path: 'register',
    loadChildren: 'app/pages/register/register.module#RegisterModule'
  },
  {
    path: 'pages',
    component: Pages,
    children: [
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
      { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
      { path: 'editors', loadChildren: './editors/editors.module#EditorsModule' },
      { path: 'components', loadChildren: './components/components.module#ComponentsModule' },
      { path: 'charts', loadChildren: './charts/charts.module#ChartsModule' },
      { path: 'ui', loadChildren: './ui/ui.module#UiModule' },
      { path: 'forms', loadChildren: './forms/forms.module#FormsModule' },
      { path: 'tables', loadChildren: './tables/tables.module#TablesModule' },
      { path: 'maps', loadChildren: './maps/maps.module#MapsModule' },
      { path: 'user', loadChildren: './user/user.module#UserModule' } // 在這里如法炮制加入我們的module（此處加載為懶加載）
    ]
  }
];

export const routing: ModuleWithProviders = RouterModule.forChild(routes);

• 最后需要在菜單欄加入我們新建的頁面入口

pages.menu.ts

export const PAGES_MENU = [
  {
    path: 'pages',
    children: [
      {
        path: 'dashboard',
        data: {
          menu: {
            title: 'general.menu.dashboard',
            icon: 'ion-android-home',
            selected: false,
            expanded: false,
            order: 0
          }
        }
      },
      {
        path: 'user',
        data: {
          menu: {
            icon: 'ion-person-stalker',
            title: '后臺(tái)用戶管理',
            selected: false,
            expanded: false,
            order: 0
          }
        },
        children: [
          {
            path: 'list',
            data: {
              menu: {
                icon: 'ion-person-stalker',
                title: '用戶管理'
              }
            }
          }
        ]
      },
        ... 省略
    ]
  }
];

第一個(gè)模塊構(gòu)建完成，頁面刷新可以看到左邊菜單出現(xiàn)了我們新建的菜單，點(diǎn)擊進(jìn)入。

下一節(jié)的內(nèi)容開始創(chuàng)建第一個(gè)組件。