npm 包 generator-ng2-dashboard-generator 使用教程

介绍

generator-ng2-dashboard-generator 是一个用于生成 Angular2 前端仪表盘的 Yeoman 生成器，它可以快速生成具有可定制化的仪表盘模板，以及预定义的组件和样式。

本文将详细介绍如何使用 generator-ng2-dashboard-generator 生成 Angular2 仪表盘。

环境要求

generator-ng2-dashboard-generator 需要以下环境：

• Node.js 版本 4.0 或更高版本
• npm 或 yarn 包管理器

安装

在安装 generator-ng2-dashboard-generator 之前，需要先安装 Yeoman，可以使用以下命令进行安装：

npm install -g yo

使用以下命令安装 generator-ng2-dashboard-generator：

npm install -g generator-ng2-dashboard-generator

安装完成后，使用以下命令生成 Angular2 仪表盘：

yo ng2-dashboard-generator

生成器选项

使用 generator-ng2-dashboard-generator 生成器时，可以选择以下选项：

• appname：应用名称，默认值为 ng2-dashboard
• description：应用描述
• author：作者名称
• port：应用运行的端口号，默认为 3000
• dashboardName：生成的仪表盘的名称，默认值为 dashboard

生成的目录结构

使用 generator-ng2-dashboard-generator 生成器生成的目录结构如下：

// www.javascriptcn.com code example
- app/
  - app.component.css
  - app.component.html
  - app.component.ts
  - app.module.ts
  - index.ts
- node_modules/
- package.json
- tsconfig.json
- typings.json

生成的组件

使用 generator-ng2-dashboard-generator 生成器生成的 Angular2 仪表盘包含以下组件：

• 侧边导航栏
• 仪表盘页
• 概览页
• 通知页
• 用户管理页

示例代码

下面是使用 generator-ng2-dashboard-generator 生成的示例代码：

app/app.component.css：

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

app/app.component.html：

// www.javascriptcn.com code example
<md-sidenav-container class="app-container">
  <md-sidenav mode="side" class="app-sidenav">
    <md-nav-list>
      <a md-list-item routerLink="/dashboard" routerLinkActive="active">
        <md-icon>dashboard</md-icon>
        <span>Dashboard</span>
      </a>
      <a md-list-item routerLink="/overview" routerLinkActive="active">
        <md-icon>assessment</md-icon>
        <span>Overview</span>
      </a>
      <a md-list-item routerLink="/notifications" routerLinkActive="active">
        <md-icon>notifications</md-icon>
        <span>Notifications</span>
      </a>
      <a md-list-item routerLink="/users" routerLinkActive="active">
        <md-icon>manage_accounts</md-icon>
        <span>Users</span>
      </a>
    </md-nav-list>
  </md-sidenav>

  <md-toolbar color="primary">
    <button md-icon-button (click)="sidenav.toggle()">
      <md-icon>menu</md-icon>
    </button>
    <span>My Dashboard</span>
  </md-toolbar>

  <router-outlet></router-outlet>

</md-sidenav-container>

app/app.component.ts：

// www.javascriptcn.com code example
import { Component, ViewChild } from '@angular/core';
import { MdSidenav } from '@angular/material';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('sidenav') sidenav: MdSidenav;

  constructor(private router: Router) {}

  ngAfterViewInit() {
    this.router.events.subscribe(() => {
      if (this.sidenav) {
        this.sidenav.close();
      }
    });
  }
}

app/app.module.ts：

// www.javascriptcn.com code example
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MaterialModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { OverviewComponent } from './overview/overview.component';
import { NotificationsComponent } from './notifications/notifications.component';
import { UsersComponent } from './users/users.component';

const appRoutes: Routes = [
  { path: 'dashboard', component: DashboardComponent },
  { path: 'overview', component: OverviewComponent },
  { path: 'notifications', component: NotificationsComponent },
  { path: 'users', component: UsersComponent },
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' }
];

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent,
    OverviewComponent,
    NotificationsComponent,
    UsersComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MaterialModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

结论

本文介绍了如何使用 generator-ng2-dashboard-generator 生成 Angular2 仪表盘。使用该生成器可以快速生成具有可定制化的仪表盘模板，以及预定义的组件和样式，方便进行前端开发。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/600562f681e8991b448e0b82