Angular9构建一个后台管理系统（一）

1. 前言

我们前面的文章里分别讲解了SpringBoot微服务应用的构建，还有如何集成SpringDataJPA。已经可以具备一个RESTful风格的后台应用系统了。

今天开始我们再构建一个前端的后台管理系统，结合我们的后台应用，构建一个基本的用户组织管理系统。

构建前端我们会使用Angular9，脚本使用TypeScript，UI我们使用Ant Design的ng-zorro-antd。

本节中我们讲解基本环境的安装和配置。我们是在windows系统中开发。

2. 基本环境安装

2.1. NodeJs安装

1、下载NodeJs https://nodejs.org/ （已经内置npm）

2、安装NodeJs

3、 NodeJs 根目录下建立两个目录 node_global 和 node_cache，如下图所示：

4、修改prefix、cache地址

npm config set prefix "C:\Program Files\nodejs\node_global"
npm config set cache "C:\Program Files\nodejs\node_cache"

5、查看npm的本地仓库是否变化了，输入命令:

npm list -global

6、配置一个镜像站，为了提升速度，输入命令:

npm config set registry=http://registry.npm.taobao.org

7、显示所有配置信息，看看我们刚才设置的三项内容，输入命令

npm config list

显示如下：

也可以查看对应的配置文件.npmrc，该文件通常位于C:\Users\<UserName>\.npmrc

可以看到刚刚配置的三项内容

8、检查一下镜像站是否可用，输入以下命令：

npm config get registry

看看能否获得Angular的信息，输入以下命令：

npm info angular

9、path环境变量，添加C:\Program Files\nodejs\node_global

我的电脑-右键-属性-高级系统设置-环境变量-系统环境变量-Path-编辑

Win10以下版本的，横向显示PATH的，注意添加到最后时，不要有分号【;】

10、最终确认以下，我们安装的NodeJs，输入以下命令：

D:\>node -v
v12.17.0

D:\>npm -v
6.14.5

D:\>

2.2. 安装开发工具VSCode

1、下载地址：https://code.visualstudio.com/

2、安装，一路next 即可!

3、安装汉语插件：

4、安装格式化插件:

5、如果需要Git插件可以搜索：GitLens，安装即可。

3. 安装Angular Cli

Angular Cli是Angular提供的一个脚手架，可以快速地创建一个Angular工程，还可以生成各种组件代码，以及模块的安装维护。

1、使用npm全局安装，输入以下命令：

npm install -g @angular/cli@9.1.15

安装最新版本的话，使用下面的命令：

npm install -g @angular/cli@latesd

查看安装的版本号：

ng v

如下面的过程：

D:\>npm install -g @angular/cli@9.1.15
npm WARN deprecated debug@4.1.1: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this
C:\Program Files\nodejs\node_global\ng -> C:\Program Files\nodejs\node_global\node_modules\@angular\cli\bin\ng

> @angular/cli@9.1.15 postinstall C:\Program Files\nodejs\node_global\node_modules\@angular\cli
> node ./bin/postinstall/script.js

+ @angular/cli@9.1.15
added 23 packages from 5 contributors, removed 3 packages and updated 45 packages in 15.298s

D:\>ng v

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 9.1.15
Node: 12.17.0
OS: win32 x64

Angular:
...
Ivy Workspace:

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.901.15
@angular-devkit/core         9.1.15
@angular-devkit/schematics   9.1.15
@schematics/angular          9.1.15
@schematics/update           0.901.15
rxjs                         6.5.4


D:\>

2、查看Angular Cli命令参数：

D:\>ng help
Available Commands:
  add Adds support for an external library to your project.
  analytics Configures the gathering of Angular CLI usage metrics. See https://angular.io/cli/usage-analytics-gathering.
  build (b) Compiles an Angular app into an output directory named dist/ at the given output path. Must be executed from within a workspace directory.
  deploy Invokes the deploy builder for a specified project or for the default project in the workspace.
  config Retrieves or sets Angular configuration values in the angular.json file for the workspace.
  doc (d) Opens the official Angular documentation (angular.io) in a browser, and searches for a given keyword.
  e2e (e) Builds and serves an Angular app, then runs end-to-end tests using Protractor.
  generate (g) Generates and/or modifies files based on a schematic.
  help Lists available commands and their short descriptions.
  lint (l) Runs linting tools on Angular app code in a given project folder.
  new (n) Creates a new workspace and an initial Angular app.
  run Runs an Architect target with an optional custom builder configuration defined in your project.
  serve (s) Builds and serves your app, rebuilding on file changes.
  test (t) Runs unit tests in a project.
  update Updates your application and its dependencies. See https://update.angular.io/
  version (v) Outputs Angular CLI version.
  xi18n (i18n-extract) Extracts i18n messages from source code.

For more detailed help run "ng [command name] --help"

D:\>

4. 小结

本节中我们讲述了如何安装NodeJs和Angular Cli，还有开发工具VSCode。这样我们就具备了开发Angular项目的基础环境。

下一节中我们会学习如何使用Angular Cli 脚手架，创建一个基本的Angular工程。