百度360必应搜狗淘宝本站头条
yum下载包及依赖到本地vuexstoregitcommit-ambashecho控制台打印
当前位置：网站首页 > 博客教程 > 正文

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

connygpt 2024-08-21 14:46 4 浏览

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工程，以及如何启动和浏览工程。最后简单介绍了工程的目录结构情况。

相关推荐

自学Python，写一个挨打的游戏代码来初识While循环

自学Python的第11天。旋转~跳跃~，我~闭着眼！学完循环,沐浴着while的光芒，闲来无事和同事一起扯皮,我说：“编程语言好神奇,一个小小的循环，竟然在生活中也可以找到原理和例子”，同事也...

常用的 Python 工具与资源，你知道几个?

最近几年你会发现，越来越多的人开始学习Python，工欲善其事必先利其器，今天纬软小编就跟大家分享一些常用的Python工具与资源，记得收藏哦！不然下次就找不到我了。1、PycharmPychar...

一张思维导图概括Python的基本语法, 一周的学习成果都在里面了

一周总结不知不觉已经自学Python一周的时间了,这一周,从认识Python到安装Python,再到基本语法和基本数据类型,对于小白的我来说无比艰辛的,充满坎坷。最主要的是每天学习时间有限。只...

三日速成python?打工人，小心钱包，别当韭菜

随着人工智能的热度越来越高，许多非计算机专业的同学们也都纷纷投入到学习编程的道路上来。而Python，作为一种相对比较容易上手的语言，也越来越受欢迎。网络上各类网课层出不穷，各式广告令人眼花缭乱。某些...

Python自动化软件测试怎么学?路线和方法都在这里了

Python自动化测试是指使用Python编程语言和相关工具，对软件系统进行自动化测试的过程。学习Python自动化测试需要掌握以下技术：Python编程语言：学习Python自动化测试需要先掌握Py...

Python从放弃到入门:公众号历史文章爬取为例谈快速学习技能

这篇文章不谈江流所专研的营销与运营，而聊一聊技能学习之路，聊一聊Python这门最简单的编程语言该如何学习，我完成的第一个Python项目，将任意公众号的所有历史文章导出成PDF电子书。或许我这个Py...

【黑客必会】python学习计划

阅读Python文档从Python官方网站上下载并阅读Python最新版本的文档（中文版），这是学习Python的最好方式。对于每个新概念和想法，请尝试运行一些代码片段，并检查生成的输出。这将帮助您更...

公布了!2025CDA考试安排

CDA数据分析师报考流程数据分析师是指在不同行业中专门从事行业数据搜集、整理、分析依据数据作出行业研究评估的专业人员CDA证书分为1-3级，中英文双证就业面广，含金量高!!?报考条件:满18...

一文搞懂全排列、组合、子集问题(经典回溯递归)

原创公众号：【bigsai】头条号：程序员bigsai前言Hello，大家好，我是bigsai，longtimenosee！在刷题和面试过程中，我们经常遇到一些排列组合类的问题，而全排列、组合...

「西法带你学算法」一次搞定前缀和

我花了几天时间，从力扣中精选了五道相同思想的题目，来帮助大家解套，如果觉得文章对你有用，记得点赞分享，让我看到你的认可，有动力继续做下去。467.环绕字符串中唯一的子字符串[1](中等)795.区...

平均数的5种方法，你用过几种方法?

平均数，看似很简单的东西，其实里面包含着很多学问。今天，分享5种经常会用到的平均数方法。1.算术平均法用到最多的莫过于算术平均法，考试平均分、平均工资等等，都是用到这个。=AVERAGE(B2:B11...

【干货收藏】如何最简单、通俗地理解决策树分类算法?

决策树（Decisiontree）是基于已知各种情况（特征取值）的基础上，通过构建树型决策结构来进行分析的一种方式，是常用的有监督的分类算法。决策树算法是机器学习中的一种经典算法，它通过一系列的规则...

面试必备:回溯算法详解

我们刷leetcode的时候，经常会遇到回溯算法类型题目。回溯算法是五大基本算法之一，一般大厂也喜欢问。今天跟大家一起来学习回溯算法的套路，文章如果有不正确的地方，欢迎大家指出哈，感谢感谢~什么是回溯...

「机器学习」决策树——ID3、C4.5、CART(非常详细)

决策树是一个非常常见并且优秀的机器学习算法，它易于理解、可解释性强，其可作为分类算法，也可用于回归模型。本文将分三篇介绍决策树，第一篇介绍基本树（包括ID3、C4.5、CART），第二篇介绍Ran...

大话AI算法: 决策树

所谓的决策树算法，通俗的说就是建立一个树形的结构，通过这个结构去一层一层的筛选判断问题是否好坏的算法。比如判断一个西瓜是否好瓜，有20条西瓜的样本提供给你，让你根据这20条（通过机器学习）建立起...

一周热门
最近发表
标签列表