介绍
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 生成器生成的目录结构如下：
-- -------------------- ---- ------- - ---- - ----------------- - ------------------ - ---------------- - ------------- - -------- - ------------- - ------------ - ------------- - ------------
生成的组件
使用 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：
-- -------------------- ---- -------
--------------------- ----------------------
----------- ----------- --------------------
-------------
-- ------------ ----------------------- --------------------------
----------------------------
----------------------
----
-- ------------ ---------------------- --------------------------
-----------------------------
---------------------
----
-- ------------ --------------------------- --------------------------
--------------------------------
--------------------------
----
-- ------------ ------------------- --------------------------
----------------------------------
------------------
----
--------------
-------------
----------- ----------------
------- -------------- ---------------------------
-----------------------
---------
-------- ----------------
-------------
-------------------------------
-----------------------app/app.component.ts：
-- -------------------- ---- -------
------ - ---------- --------- - ---- ----------------
------ - --------- - ---- --------------------
------ - ------ - ---- ------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
--------------------- -------- ----------
------------------- ------- ------- --
----------------- -
------------------------------- -- -
-- -------------- -
---------------------
-
---
-
-app/app.module.ts：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------- - ---- -----------------
------ - ---------- - ---- ----------------
------ - -------------- - ---- --------------------
------ - ----------------------- - ---- ---------------------------------------
------ - ------------- ------ - ---- ------------------
------ - ------------ - ---- ------------------
------ - ------------------ - ---- ----------------------------------
------ - ----------------- - ---- --------------------------------
------ - ---------------------- - ---- ------------------------------------------
------ - -------------- - ---- --------------------------
----- ---------- ------ - -
- ----- ------------ ---------- ------------------ --
- ----- ----------- ---------- ----------------- --
- ----- ---------------- ---------- ---------------------- --
- ----- -------- ---------- -------------- --
- ----- --- ----------- ------------- ---------- ------ -
--
-----------
------------- -
-------------
-------------------
------------------
-----------------------
--------------
--
-------- -
--------------
------------
-----------
---------------
------------------------
-------------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -结论
本文介绍了如何使用 generator-ng2-dashboard-generator 生成 Angular2 仪表盘。使用该生成器可以快速生成具有可定制化的仪表盘模板，以及预定义的组件和样式，方便进行前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562f681e8991b448e0b82