使用ng2-admin搭建成熟可靠的后台系统 -- ng2-admin（一）

最新推荐文章于 2024-08-08 08:07:06 发布

weixin_34019929

最新推荐文章于 2024-08-08 08:07:06 发布

阅读量396

点赞数

文章标签： git javascript ui ViewUI

原文链接：https://juejin.im/post/59cb87b96fb9a00a5b1ac0ab

版权

本文介绍了如何使用ng2-admin搭建后台系统。首先，ng2-admin基于Angular 4+、Angular CLI和Bootstrap 4，适合快速构建动态组件丰富的后台。准备工作包括安装node、webpack和ng-cli。然后，通过git克隆ng2-admin项目，运行npm start启动项目。接着，创建第一个模块，包括在指定目录下新建文件和组件，最后在菜单栏添加新模块的入口。

摘要由CSDN通过智能技术生成

1.介绍

ng2-admin

基于Angular 4+，Angular CLI，Bootstrap 4，以及许多令人敬畏的模块和插件

ng2-admin的配置文件非常完善，组件也比较多，所以直接选择ng2-admin起步，适合有一定基础或者想直接上手搭建一套后台系统，搭建的后台系统会有较多动态组件，追求自动化，动态性。例：表单将会使用service来动态生成，以及完成验证。

github

demo

文档

2.准备工作

node + webapack + ng-cli

webapck需要node提供服务，并且需要npm安装，所以先下载一个node

可以全局安装 ng-cli，强大的官方脚手架（ng2-admin升级后也选用了官方脚手架）

充满电

ng2-admin

从git上先把项目拉下来，然后执行

    npm install复制代码

安装好依赖后，使用npm start直接跑起项目（默认使用的是4200端口，确保端口未占用）

    npm start复制代码

浏览器输入localhost:4200 直接访问

3.开始构建第一个模块

ng-cli可以直接创建文件，本文不做讲解，可以自行搜索

mark

项目目录

app 文件夹是项目主要文件，其中我们的页面在 pages 文件夹，组件和个性化定制在 theme 文件夹。

assets 用于存放一些静态资源文件，例如图片，字体。

environments 决定项目启动的环境（ prod )

meta 看着像是一些介绍

进入 pages 目录，新建一个文件夹命名为 user （如下图）

mark

在 user 目录下，新建一个 component 文件，命名为 user.comopnent.ts (.component 后缀代表这是一个 component 组件)

import { Component } from '@angular/core';    // 导入angular核心模块

import 'style-loader!./user.component.scss';    // 导入scss文件

@Component({    // Component directive 声明组件属于 Component
    selector: 'ngt-user', // 定义组件在HTML代码中匹配的标签
    template: `<router-outlet></router-outlet>` // 指定组件关联的内联模板&