随着互联网行业的快速发展，越来越多的公司需要构建自己的后台管理系统来管理其业务。在前端技术中，Angular 是一个非常流行的框架，本文将介绍如何使用 Angular4 来构建一个后台管理系统。
环境搭建
首先要确保本地已经安装了 node.js 和 npm。安装完毕后，打开命令行工具输入如下命令：
npm install -g @angular/cli
这个命令将安装 Angular 的命令行工具，这是一个非常方便的工具，可以通过命令快速地创建组件、服务、指令、管道等等。
安装完成后，你可以在命令行工具中输入如下命令创建一个新的 Angular 项目：
ng new backend
这个命令将在当前目录下创建一个名为 backend 的项目，并自动安装依赖项和生成一些基本的文件和目录结构。
安装完成后，你可以通过如下命令启动项目：
ng serve
这个命令将会启动一个本地开发服务器，你可以在浏览器中访问 http://localhost:4200 来查看应用。
路由和导航
在一个后台管理系统中，导航应该是非常重要的一部分，它能够帮助用户快速地找到自己需要的功能。在 Angular 中，路由和导航非常容易实现。
首先，在项目的根目录下创建一个名为 app-routing.module.ts 的文件，并添加如下内容：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------- ------------ - ---- ------------------ ----- ------- ------ - - - ----- --- ----------- ------------ ---------- ------ -- - ----- ------------ ------------- ---------------------------------------------- -- - ----- -------- ------------- ---------------------------------- -- - ----- -------- ------------- ---------------------------------- -- - ----- ----------- ------------- ------------------------------------------- -- -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- - -
这个文件定义了路由规则。在这个例子中，我们添加了四个导航链接：dashboard、users、roles 和 settings。每一个导航链接都对应一个懒加载的模块，这样我们的应用就不会一次性加载所有的模块，从而提升了性能。
接下来，我们需要在 app.module.ts 文件中导入路由模块，并添加一个 router-outlet 指令，如下：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ---------------- - ---- -----------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
----------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -<router-outlet></router-outlet>
这个指令将会根据路由规则动态地加载组件，并替换当前组件的内容。
侧边栏和面包屑导航
为了更好的用户体验，我们需要添加一个侧边栏来展示导航链接，并在头部添加一个面包屑导航来帮助用户快速地了解当前位置。在 app.component.html 文件中，我们添加如下内容：
-- -------------------- ---- -------
---- ------------- ---------------- ------------ -------- ------
-- -------------------- -------------------
------
---- ------------------------
---- ------------
---- --------------- ------ ---------- -------- ---------
---- -----------------------
--- ---------- -------------
--- ---------------- ---------------------- --------------------------
-- ---------------- ----------------------
-----
--- ---------------- ------------------ --------------------------
-- ---------------- -----------------
-----
--- ---------------- ------------------ --------------------------
-- ---------------- -----------------
-----
--- ---------------- --------------------- --------------------------
-- ---------------- -----------------
-----
-----
------
------
----- ----------- --------------- ---------- --------- ---- ------
---- ------------------------
--- -------------------
--- -------------------------- --------------------
--- -------------------------- ---------------------------
--- ---------------------- ------- ---------------------------
-----
------
-------------------------------
-------
------
------这个文件定义了一个侧边栏和面包屑导航。侧边栏使用了 Bootstrap 的样式，你可以根据自己的需求进行修改。面包屑导航使用了 Angular 自带的指令，它能够自动地根据当前页面的路由显示正确的导航链接。
组件和服务
在 Angular 中，一个组件可以看做是一个 UI 控件，它接收一些参数并展示 UI。服务则是一个提供业务逻辑的对象，它可以被组件调用。
在我们的后台管理系统中，我们需要几个组件和一些服务来完成一些具体的业务。
仪表盘组件
仪表盘组件将会显示一些实时数据，如在线用户数、订单数量等等。在根目录下创建一个名为 dashboard 的模块，并添加一个名为 dashboard.component.ts 的组件：
-- -------------------- ---- ------- ------ - ---------- ------ - ---- ---------------- ------------ --------- ---------------- ------------ ----------------------------- ---------- ------------------------------ -- ------ ----- ------------------ ---------- ------ - ------------- - - ---------- - - -
这个组件非常简单，我们可以在 dashboard.component.html 文件中添加一些内容来展示实时数据。
用户管理组件
用户管理组件将会显示所有的用户信息，并提供添加、删除、更新等操作。在根目录下创建一个名为 users 的模块，并添加一个名为 users.component.ts 的组件：
-- -------------------- ---- ------- ------ - ---------- ------ - ---- ---------------- ------------ --------- ------------ ------------ ------------------------- ---------- -------------------------- -- ------ ----- -------------- ---------- ------ - ------------- - - ---------- - - -
这个组件将会需要一个用户服务来获取、添加、删除、更新用户信息。在根目录下创建一个名为 user.service.ts 的服务：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
-------------
----------- ------
--
------ ----- ----------- -
------------- - -
-------- -
-- -------
-
--------- -
-- ------
-
---------- -
-- ------
-
------------ -
-- ------
-
-这个服务通过注入的方式来被 UsersComponent 使用。
角色管理组件
角色管理组件将会显示所有的角色信息，并提供添加、删除、更新等操作。在根目录下创建一个名为 roles 的模块，并添加一个名为 roles.component.ts 的组件：
-- -------------------- ---- ------- ------ - ---------- ------ - ---- ---------------- ------------ --------- ------------ ------------ ------------------------- ---------- -------------------------- -- ------ ----- -------------- ---------- ------ - ------------- - - ---------- - - -
这个组件将会需要一个角色服务来获取、添加、删除、更新角色信息。在根目录下创建一个名为 role.service.ts 的服务：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
-------------
----------- ------
--
------ ----- ----------- -
------------- - -
-------- -
-- -------
-
--------- -
-- ------
-
---------- -
-- ------
-
------------ -
-- ------
-
-这个服务通过注入的方式来被 RolesComponent 使用。
系统设置组件
系统设置组件将会提供一些系统级别的设置，如日志级别、缓存设置等等。在根目录下创建一个名为 settings 的模块，并添加一个名为 settings.component.ts 的组件：
-- -------------------- ---- ------- ------ - ---------- ------ - ---- ---------------- ------------ --------- --------------- ------------ ---------------------------- ---------- ----------------------------- -- ------ ----- ----------------- ---------- ------ - ------------- - - ---------- - - -
这个组件将会需要一个设置服务来获取和修改系统设置。在根目录下创建一个名为 setting.service.ts 的服务：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
-------------
----------- ------
--
------ ----- -------------- -
------------- - -
-------- ------- -
-- -------
-
-------- ------- ------ ---- -
-- -------
-
-这个服务通过注入的方式来被 SettingsComponent 使用。
总结
在本文中，我们介绍了如何使用 Angular4 来构建一个后台管理系统。我们讲解了一些基本的概念，如路由、侧边栏、面包屑导航、组件和服务等等。希望这篇文章能够对你有所帮助。如有问题欢迎留言讨论。
示例代码可以在我的 GitHub 上找到：https://github.com/xxx/xxx。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f6da74f6b2d6eab3f63e5d