玖叶教程网

前端编程开发入门

2024年04月03日

Angular9构建一个后台管理系统(二)

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

1. 前言

上一节中，我们学习了基本的环境搭建：nodeJs、npm、VSCode、AngularCli9的安装。

如果你顺利地都安装成功了，那么我们可以开始进行系统的构建和开发了，如果我们采用TypeScript，则我们还需要安装TypeScript支持。

本节内容中，我们会学会安装TypeScript，然后创建一个Angular工程，并尝试启动。

2. 安装TypeScript

1、使用如下命令安装：

npm install -g typescript

-g 参数代表着该模块是全局的。全局是相对于当前某个工程而言的。

2、安装完成后我们可以使用 tsc 命令来执行 TypeScript 的相关代码，以下是查看版本号：

tsc -v

3、我们可以测试一下TypeScript，建立一个app.ts 文件,内容如下。

var message:string = "Hello World" 
console.log(message)

TypeScript脚本文件的扩展名即.ts

后执行以下命令将 TypeScript 转换为 JavaScript 代码：

tsc app.ts

执行完成，当前目录下（与 app.ts 同一目录）就会生成一个 app.js 文件，代码如下：

var message = "Hello World";
console.log(message);

然后使用 node 命令来执行 app.js 文件，则会输出 Hello world：

D:\>node app.js 
Hello World

至此，TypeScript安装成功。

3. 创建Angular工程

1、我们利用AngularCli 可以方便的创建工程，仅仅需要一行命令：

ng new my-app

假设我们要在D盘，ECMS目录下建立我们的工程ecms-web，则启动CMD命令行，切换到D:\ECMS，然后输入我们的命令ng new ecms-web即可，也可以，在VSCode的终端中输入，由于要生成文件可能需要管理员权限运行命令行工具：

Microsoft Windows [版本 10.0.18363.836]
(c) 2019 Microsoft Corporation。保留所有权利。

C:\Windows\system32>d:

D:\>cd ECMS

D:\ECMS>dir
 驱动器 D 中的卷没有标签。
 卷的序列号是 9C30-21F8

 D:\ECMS 的目录

2021/03/12  14:40    <DIR>          .
2021/03/12  14:40    <DIR>          ..
               0 个文件              0 字节
               2 个目录 48,212,746,240 可用字节

D:\ECMS>ng new ecms-web
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE ecms-web/angular.json (3582 bytes)
CREATE ecms-web/package.json (1252 bytes)
CREATE ecms-web/README.md (1025 bytes)
CREATE ecms-web/tsconfig.json (489 bytes)
CREATE ecms-web/tslint.json (3125 bytes)
CREATE ecms-web/.editorconfig (274 bytes)
CREATE ecms-web/.gitignore (631 bytes)
CREATE ecms-web/browserslist (429 bytes)
CREATE ecms-web/karma.conf.js (1020 bytes)
CREATE ecms-web/tsconfig.app.json (210 bytes)
CREATE ecms-web/tsconfig.spec.json (270 bytes)
CREATE ecms-web/src/favicon.ico (948 bytes)
CREATE ecms-web/src/index.html (293 bytes)
CREATE ecms-web/src/main.ts (372 bytes)
CREATE ecms-web/src/polyfills.ts (2835 bytes)
CREATE ecms-web/src/styles.css (80 bytes)
CREATE ecms-web/src/test.ts (753 bytes)
CREATE ecms-web/src/assets/.gitkeep (0 bytes)
CREATE ecms-web/src/environments/environment.prod.ts (51 bytes)
CREATE ecms-web/src/environments/environment.ts (662 bytes)
CREATE ecms-web/src/app/app-routing.module.ts (246 bytes)
CREATE ecms-web/src/app/app.module.ts (393 bytes)
CREATE ecms-web/src/app/app.component.html (25757 bytes)
CREATE ecms-web/src/app/app.component.spec.ts (1065 bytes)
CREATE ecms-web/src/app/app.component.ts (212 bytes)
CREATE ecms-web/src/app/app.component.css (0 bytes)
CREATE ecms-web/e2e/protractor.conf.js (808 bytes)
CREATE ecms-web/e2e/tsconfig.json (214 bytes)
CREATE ecms-web/e2e/src/app.e2e-spec.ts (641 bytes)
CREATE ecms-web/e2e/src/app.po.ts (301 bytes)
√ Packages installed successfully.
warning: LF will be replaced by CRLF in .editorconfig.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in .gitignore.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in README.md.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in angular.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in browserslist.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in e2e/protractor.conf.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in e2e/src/app.e2e-spec.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in e2e/src/app.po.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in e2e/tsconfig.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in karma.conf.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in package-lock.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in package.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app-routing.module.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.spec.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.module.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/environments/environment.prod.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/environments/environment.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/main.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/polyfills.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/styles.css.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/test.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tsconfig.app.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tsconfig.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tsconfig.spec.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tslint.json.
The file will have its original line endings in your working directory
    Successfully initialized git.

D:\ECMS>

以上是整个过程。

在我们输入完命令，回车后，会有两个选项供我们选择：

would you like to add Angular routing?

我们输入y，回车。

? Which stylesheet format would you like to use?

直接回车，默认选择css。您也可以按上下箭头键，选择其他的css样式文件格式。

然后，AngularCli 会为我们创建一个基本的包含路由的Angular工程。

2、我们启动工程

我们进入刚刚创建的工程目录，然后执行如下命令：

ng serve

首次运行，会提示我们是否匿名分享数据，我们输入n，回车即可。

过程如下:

D:\ECMS>
D:\ECMS>cd ecms-web

D:\ECMS\ecms-web>dir

D:\ECMS\ecms-web 的目录

2021/03/12  14:44    <DIR>          .
2021/03/12  14:44    <DIR>          ..
2021/03/12  14:43               274 .editorconfig
2021/03/12  14:43               631 .gitignore
2021/03/12  15:00             3,623 angular.json
2021/03/12  14:43               429 browserslist
2021/03/12  14:43    <DIR>          e2e
2021/03/12  14:43             1,020 karma.conf.js
2021/03/12  14:44    <DIR>          node_modules
2021/03/12  14:44           536,685 package-lock.json
2021/03/12  14:43             1,252 package.json
2021/03/12  14:43             1,025 README.md
2021/03/12  14:43    <DIR>          src
2021/03/12  14:43               210 tsconfig.app.json
2021/03/12  14:43               489 tsconfig.json
2021/03/12  14:43               270 tsconfig.spec.json
2021/03/12  14:43             3,125 tslint.json
              12 个文件        549,033 字节
               5 个目录 47,722,569,728 可用字节

D:\ECMS\ecms-web>ng serve
Compiling @angular/core : es2015 as esm2015
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/animations/browser/testing : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/common/http/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015

chunk {main} main.js, main.js.map (main) 60.6 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.4 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.01 MB [initial] [rendered]
Date: 2021-03-12T07:01:57.529Z - Hash: 2710539518a87a75e029 - Time: 7501ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.

启动后，屏幕会提示如下内容：

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.

此时我们打开浏览器输入http://localhost:4200/，即可查看默认的页面

我们可以看到网站的标题就是我们的工程名称：EcmsWeb。

至此我们的基本工程已经建立起来了。

如果ng serve 启动时提示端口已经被占用，我们使用如下命令指定端口启动：

ng serve --port 4201

4. 工程概览

我们看一下建立的工程目录结构

详细介绍如下：

首层目录:

  • node_modules 第三方依赖包存放目录
  • e2e 端到端的测试目录 用来做自动测试的
  • src 应用源代码目录
  • .angular-cli.json Angular命令行工具的配置文件。后期可能会去修改它，引一些其他的第三方的包 比如jquery等
  • karma.conf.js karma是单元测试的执行器，karma.conf.js是karma的配置文件
  • package.json 这是一个标准的npm工具的配置文件，这个文件里面列出了该应用程序所使用的第三方依赖包。实际上我们在新建项目的时候，等了半天就是在下载第三方依赖包。下载完成后会放在node_modules这个目录中，后期我们可能会修改这个文件。
  • protractor.conf.js 也是一个做自动化测试的配置文件
  • README.md 说明文件
  • tslint.json 是tslint的配置文件，用来定义TypeScript代码质量检查的规则，不用管它

src目录：

  • app目录 包含应用的组件和模块，我们要写的代码都在这个目录
  • assets目录 资源目录，存储静态资源的 比如图片
  • environments目录 环境配置。Angular是支持多环境开发的，我们可以在不同的环境下（开发环境，测试环境，生产环境）共用一套代码，主要用来配置环境的 index.html 整个应用的根html，程序启动就是访问这个页面
  • main.ts 整个项目的入口点，Angular通过这个文件来启动项目
  • polyfills.ts 主要是用来导入一些必要库，为了让Angular能正常运行在老版本下
  • styles.css 主要是放一些全局的样式
  • tsconfig.app.json TypeScript编译器的配置,添加第三方依赖的时候会修改这个文件 tsconfig.spec.json 不用管
  • test.ts 也是自动化测试用的
  • typings.d.ts 不用管

这些文件和目录，我们有个大概了解即可。随后的开发过程中，如果用到那个，我们再详细介绍。

5. 小结

本节教程，我们学习了安装TypeScript的安装以及验证，然后学习了如何建立一个Angular工程，以及如何启动和浏览工程。最后简单介绍了工程的目录结构情况。

标签：node_modules干什么的 

作者:gojiuye , 分类:技术精选 , 浏览:29 , 评论:0

发表评论:

控制面板
您好，欢迎到访网站！
  查看权限
网站分类
最新留言