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.（通信啊，计算啊，）

—————————————