ngx-admin 安裝使用

一、下載安裝

下載

https://github.com/akveo/ngx-admin

安裝node-sass

npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

然后

npm i

安裝好

卸載husky (git hook  不卸載無法提交commit)

npm remove husky

 

二、開發

准備

默認已經在工程local方式安裝了angular-cli，但不能直接ng XXX

解決方法：參考 https://www.npmjs.com/package/@angular/cli

全局安裝npx

npm i -g npx

然后用npx在工程路徑下，用

npx ng XXX

具體ng命令，參考 https://angular.io/cli/generate

比如：

 

 

ngx-admin的組織還是比較復雜的。首先要理解它的結構

核心在pages這個module下。

 pages.module.ts

import { NgModule } from '@angular/core';
import { NbMenuModule } from '@nebular/theme';

import { ThemeModule } from '../@theme/theme.module';
import { PagesComponent } from './pages.component';
import { DashboardModule } from './dashboard/dashboard.module';
import { ECommerceModule } from './e-commerce/e-commerce.module';
import { PagesRoutingModule } from './pages-routing.module';
import { MiscellaneousModule } from './miscellaneous/miscellaneous.module';

@NgModule({
  imports: [
    PagesRoutingModule,
    ThemeModule,
    NbMenuModule,
 DashboardModule, ECommerceModule,
    MiscellaneousModule,
  ],
  declarations: [
    PagesComponent,
  ],
})
export class PagesModule {
}

其中

    DashboardModule,
    ECommerceModule,

這2個module，對應工具欄左上前2個頁面。

作為"2個"單頁應用，可以認為是2個相對獨立的用例包（大概約等於很多甲方嘴里的“子系統”，但實際只是用例包）。

這2個module下轄若干component，有的component還包含component。構成這2個頁面。

——這是和通常的angular工程最大的區別之一，不是1個單頁應用，而是可以好多個。因為是管理后台，復雜，綜合嘛。

這也是我們用ngx-admin的原因。復用部分已經被抽象，統一管理了。

我們需要定制的，就是參考Dashboard和 Ecommerce 建立自己的單頁應用module，然后就和普通的angular開發區別不大了，在module下建立組件，服務。

 

 

2.1 建立自己的單頁module：

類似 dashboard，1個單頁應用，下面沒有子節點。

2.1.1創建module

在pages module下創建1個自己的module , 名叫demo1

npx ng g module pages/demo1 -m=pages

注意名稱前一定要有pages/  不然會創建在根目錄

 

現在在pages下只創建1個demo1文件夾，包含1個ts文件

demo1.module.ts

 

和dashboard對比可以發現，缺少 組件

dashboard.component.html

dashboard.component.ts

沒關系，創建一下就一樣了

npx ng g  component pages/demo1 -m=pages/demo1

Two or more projects are using identical roots. Unable to determine project using current working directory. Using default workspace project instead. Two or more projects are using identical roots. Unable to determine project using current working directory. Using default workspace project instead. CREATE src/app/pages/demo1/demo1.component.html (20 bytes) CREATE src/app/pages/demo1/demo1.component.spec.ts (619 bytes) CREATE src/app/pages/demo1/demo1.component.ts (272 bytes) CREATE src/app/pages/demo1/demo1.component.scss (0 bytes) UPDATE src/app/pages/demo1/demo1.module.ts (257 bytes)

 

還多了spec.ts不用管

2.1.2 配置pages

只要在pages文件夾下簡單修改2處，就可以顯示自己的demo1 module了

1 pages-routing.module.ts

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

import { PagesComponent } from './pages.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ECommerceComponent } from './e-commerce/e-commerce.component';
import { NotFoundComponent } from './miscellaneous/not-found/not-found.component';

const routes: Routes = [{
  path: '',
  component: PagesComponent,
  children: [
    {
      path: 'dashboard',
      component: ECommerceComponent,
    },
    {
      path: 'iot-dashboard',
      component: DashboardComponent,
    },

模仿dashboard，加入demo1

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

import { PagesComponent } from './pages.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { Demo1Component } from './demo1/demo1.component';
import { ECommerceComponent } from './e-commerce/e-commerce.component';
import { NotFoundComponent } from './miscellaneous/not-found/not-found.component';

const routes: Routes = [{
  path: '',
  component: PagesComponent,
  children: [
 { path: 'demo1', component: Demo1Component, },
    {
      path: 'dashboard',
      component: ECommerceComponent,
    },

2 pages-menu.ts

import { NbMenuItem } from '@nebular/theme';

export const MENU_ITEMS: NbMenuItem[] = [
 { title: '我的演示demo', icon: 'shopping-cart-outline', link: '/pages/demo1', home: true, },

  {
    title: 'E-commerce',
    icon: 'shopping-cart-outline',
    link: '/pages/dashboard',
    //home: true,
  },

 

這里定制頁面側邊欄，title文字，icon圖標，link是module位置 home是打開頁面時首頁。只能有一個，所以把原理的 E-commerce的home給注釋了

然后就可以看到了：

注意，我沒有改圖標，所以和下面的一樣。

 

2.2 建立自己的多子節點module：

繼續參考：如果是layout這種

則效果是 點擊layout后只是展開子節點列表，右側不更新顯示（layout本身沒有頁面 link）點擊某個子節點，才會顯示字節點的頁面。

2.2.1 建立1個 帶路由module

npx ng g module pages/demo2 -m=pages --routing=true

命名為demo2

2.2.2 module下建立component，作為1個子頁面

npx ng g component pages/demo2/usecase1 -m=pages/demo2

命名為usecase1 建立到1個新文件夾

 

2.2.3 修改 pages部分

1 pages-routing.module.ts

參考layout

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

import { PagesComponent } from './pages.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ECommerceComponent } from './e-commerce/e-commerce.component';
import { NotFoundComponent } from './miscellaneous/not-found/not-found.component';

import { Demo1Component } from './demo1/demo1.component';

const routes: Routes = [{
  path: '',
  component: PagesComponent,
  children: [
    {
      path: 'demo1',
      component: Demo1Component,
    },
    {
 path: 'demo2', loadChildren: () => import('./demo2/demo2.module') .then(m => m.Demo2Module),
    },
    {
      path: 'dashboard',
      component: ECommerceComponent,
    },
    {
      path: 'iot-dashboard',
      component: DashboardComponent,
    },
    {
      path: 'layout',
      loadChildren: () => import('./layout/layout.module')
        .then(m => m.LayoutModule),
    },

 

1.2 pages-menu.ts

import { NbMenuItem } from '@nebular/theme';

export const MENU_ITEMS: NbMenuItem[] = [
  {
    title: '我的演示demo1',
    icon: 'shopping-cart-outline',
    link: '/pages/demo1',
    //home: true,
  },
  {
    title: '我的演示demo2',
    icon: 'shopping-cart-outline',
    home: true,
    children: [
      {
        title: '用例1',
        link: '/pages/demo2/usecase1',
      },
    ]
  },

 

 

2 demo2 內部修改

2.1 新建demo2.component.ts

npx ng g component pages/demo2 -m=pages

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

@Component({
  selector: 'ngx-demo2',
  template: `
    <router-outlet></router-outlet>
  `,
})
export class Demo2Component {
}

只是作為路由，沒有頁面。

2.2 修改demo2.module.ts

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

import { Demo2RoutingModule } from './demo2-routing.module';
import { Usecase1Component } from './usecase1/usecase1.component';
import { Demo2Component } from './demo2.component';

@NgModule({
  declarations: [Usecase1Component, Demo2Component],
  imports: [
    CommonModule,
    Demo2RoutingModule
  ]
})
export class Demo2Module { }

 

2.3 修改demo2-routing.module.ts

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

import { Usecase1Component } from './usecase1/usecase1.component'; import { Demo2Component } from './demo2.component';

const routes: Routes = [{ path: '', component: Demo2Component, children: [ {  path: 'usecase1', component: Usecase1Component, }, ], }];


@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class Demo2RoutingModule { }

 

這里的path就是usecase1這個文件夾的名字。

 

 

應該就可以了：

 

 

對ng/ngx工程結構的小結：

那么只要是webpage，就要歸1個component

demo1這個module下，要么自己建1個同名component（2.1），要么包含usecase1這種component（2.2）。

 

用軍事視角，鳥語階段

module = 軍團，

component=兵團/部隊 formation級

service= 分隊 unit

web頁面 = battlefield 

 

整個web頁面，分配給1個component（比如2.1中的module的只下轄1個同名component， 或者2.2，下轄 usecase1 等多個component）。

然后，component可以包含更多的component，把頁面分割到每個局部。

類似：

每塊battlefield 分配給1個兵團。兵團（旅，師，軍）可以嵌套。分割陣地到每個formation 按分界線完成整個部署。

 

具體干活的專業分隊，都是無狀態service.（通信啊，計算啊，）