使用ng2-admin搭建成熟可靠的后臺系統(tǒng) -- ng2-admin（一）
1.介紹
ng2-admin
基于Angular 4+加缘，Angular CLI沿侈，Bootstrap 4，以及許多令人敬畏的模塊和插件
ng2-admin的配置文件非常完善付魔，組件也比較多聊品，所以直接選擇ng2-admin起步飞蹂，適合有一定基礎(chǔ)或者想直接上手搭建一套后臺系統(tǒng)几苍，搭建的后臺系統(tǒng)會有較多動態(tài)組件，追求自動化陈哑，動態(tài)性妻坝。 例：表單將會使用service來動態(tài)生成，以及完成驗證惊窖。
github master分支起步刽宪，development 為本系列文章最新版成品，建議從 master 一篇一篇跟著教程敲界酒，第五章后每篇文章都有各自對應(yīng)的“最終效果”分支.
2.準(zhǔn)備工作
node + webapack + ng-cli
webapck需要node提供服務(wù)圣拄，并且需要npm安裝，所以先下載一個node
可以全局安裝 ng-cli毁欣， 強(qiáng)大的官方腳手架（ng2-admin升級后也選用了官方腳手架）
充滿電
ng2-admin （官方最新版庇谆，有部分配置文件改動，風(fēng)格已換）
ng2-admin(推薦版本)（教程穩(wěn)定版凭疮，master 分支饭耳，本系列教程是穩(wěn)定版，有無 Angular 基礎(chǔ)皆可）
從git上先把項目拉下來执解，然后執(zhí)行
npm install
安裝好依賴后寞肖，使用npm start直接跑起項目（默認(rèn)使用的是4200端口，確保端口未占用）
npm start
瀏覽器輸入localhost:4200 直接訪問
3.開始構(gòu)建第一個模塊
ng-cli可以直接創(chuàng)建文件衰腌，本文不做講解新蟆，可以自行搜索
項目目錄
app 文件夾是項目主要文件，其中我們的頁面在 pages 文件夾右蕊，組件和個性化定制在 theme 文件夾琼稻。
assets 用于存放一些靜態(tài)資源文件，例如圖片尤泽，字體欣簇。
environments 決定項目啟動的環(huán)境（ prod )
meta 看著像是一些介紹
- 進(jìn)入
pages目錄，新建一個文件夾命名為user（如下圖）
在 user 目錄下坯约， 新建一個 component 文件熊咽，命名為 user.comopnent.ts (.component 后綴代表這是一個 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)模板，這里直接使用一個路由插座
})
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, 包含三個文件
user-list.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'ngt-user-list',
templateUrl: './user-list.component.html' // 組件對應(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文件夾衫仑，最終文件如下
然后修改兩個文件梨与，加入我們新建的兩個模塊，分別是
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: '后臺用戶管理',
selected: false,
expanded: false,
order: 0
}
},
children: [
{
path: 'list',
data: {
menu: {
icon: 'ion-person-stalker',
title: '用戶管理'
}
}
}
]
},
... 省略
]
}
];
第一個模塊構(gòu)建完成文狱，頁面刷新可以看到左邊菜單出現(xiàn)了我們新建的菜單粥鞋，點(diǎn)擊進(jìn)入。
下一節(jié)的內(nèi)容開始創(chuàng)建第一個組件瞄崇。
