从零搭建Angular10项目
Angular中文官网:https://angular.cn/guide/quickstart
本博客旨在介绍在本地开发环境中使用 Angular CLI 工具来构建并运行一个简单的 Angular 应用
先决条件
在开始之前,请确保你的开发环境已经包含了 Node.js®
和 npm 包管理器。
Node.js
Angular 需要 Node.js
的 8.x 或 10.x 版本。
- 要想检查你的版本,请在终端/控制台窗口中运行
node -v
命令。 - 要想安装
Node.js
,请访问 nodejs.org。
npm 包管理器
Angular、Angular CLI 和 Angular 应用都依赖于某些库所提供的特性和功能,它们都是 npm 包。要下载和安装 npm 包,你必须拥有一个 npm 包管理器。
本 “快速上手” 中使用的是 yarn 客户端命令行界面,管理依赖包
要想检查你是否已经安装了 yarn 客户端,请在终端/控制台窗口中运行 yarn -v
命令。
第一步:安装 Angular CLI
你要使用 Angular CLI 来创建项目、创建应用和库代码,并执行多种开发任务,比如测试、打包和发布。
全局安装 Angular CLI。
要想使用 npm
来安装 CLI,请打开终端/控制台窗口,并输入下列命令:
yarn global add @angular/cli
要想检查你是否已经安装了 angular/cli,请在终端/控制台窗口中运行 ng --version
命令,下图代表安装成功。
第二步:创建工作区和初始应用
Angular 工作区就是你开发应用的上下文环境。 每个工作区包含一些供一个或多个项目使用的文件。 每个项目都是一组由应用、库或端到端(e2e)测试构成的文件。
要想创建工作区和初始应用项目:
运行 CLI 命令
ng new
,并提供一个名字my-app
,如下所示:ng new my-app
ng new
会提示你要把哪些特性包含在初始的应用项目中。请按回车键接受默认值。
Angular CLI 会安装必要的 Angular npm 包及其它依赖。这可能要花几分钟。
还将创建下列工作区和初始项目文件:
- 一个新的工作区,根目录名叫
my-app
- 一个初始的骨架应用项目,也叫
my-app
(但位于src
子目录下) - 一个端到端测试项目(位于
e2e
子目录下) - 相关的配置文件
初始的应用项目是一个简单的 “欢迎” 应用,随时可以运行它。
ng new命令后面有很多选项,详见https://angular.cn/cli/new,由于我们的项目大多使用less编写样式因此需要添加后缀--style less
,代表项目中默认使用less,用于样式文件的文件扩展名或预处理程序。
完整命令:ng new my-app --style less
第三步:启动开发服务器
Angular 包含一个开发服务器,以便你能轻易地在本地构建应用和启动开发服务器。
- 进入工作区目录(
my-app
)。 - 使用 CLI 命令
ng serve
启动开发服务器,并带上--open
选项。
ng serve --open
ng serve
命令会自动启动服务器,并监视你的文件变化,当你修改这些文件时,它就会重新构建应用。
--open
(或只用 -o
)选项会自动打开浏览器,并访问 http://localhost:4200/
。
第四步:编辑你的第一个 Angular 组件
组件 是 Angular 应用中的基本构造块。 它们在屏幕上显示数据、监听用户输入,并根据这些输入采取行动。
作为初始应用的一部分,CLI 也会为你创建第一个 Angular 组件。它就是根组件,名叫 app-root
。
打开
./src/app/app.component.ts
。把
title
属性从'my-app'
修改成'My First Angular App'
。src/app/app.component.ts
@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css'] }) export class AppComponent {title = 'My First Angular App!'; }
浏览器将会用修改过的标题自动刷新。
打开
./src/app/app.component.less
并给这个组件提供一些样式。src/app/app.component.less
h1 {color: #369;font-family: Arial, Helvetica, sans-serif;font-size: 250%; }
漂亮多了!
工作区配置文件
每个工作空间中的所有项目共享同一个 CLI 配置环境。该工作空间的顶层包含着全工作空间级的配置文件、根应用的配置文件以及一些包含根应用的源文件和测试文件的子文件夹。
工作空间配置文件 | 用途 |
---|---|
.editorconfig
|
代码编辑器的配置。参见 EditorConfig。 |
.gitignore
|
指定 Git 应忽略的不必追踪的文件。 |
README.md
|
根应用的简介文档. |
angular.json
|
为工作区中的所有项目指定 CLI 的默认配置,包括 CLI 要用到的构建、启动开发服务器和测试工具的配置项,比如 TSLint,Karma 和 Protractor。欲知详情,请参阅 Angular 工作空间配置 部分。 |
package.json
|
配置工作空间中所有项目可用的 npm 包依赖。有关此文件的具体格式和内容,请参阅 npm 的文档。 |
package-lock.json
|
提供 npm 客户端安装到 node_modules 的所有软件包的版本信息。欲知详情,请参阅 npm 的文档。如果你使用的是 yarn 客户端,那么该文件就是 yarn.lock。
|
src/
|
根项目的源文件。 |
node_modules/
|
向整个工作空间提供npm包。工作区范围的node_modules 依赖关系对所有项目都可见。
|
tsconfig.json
|
工作空间中各个项目的默认 TypeScript 配置。比如运行项目时遇到一个问题https://blog.csdn.net/a1056244734/article/details/108326580,就需要更改tsconfig.json 中配置
|
tsconfig.base.json
|
供工作空间中所有项目使用的基础 TypeScript 配置。所有其它配置文件都继承自这个基础文件。欲知详情,参见 TypeScript 文档中的使用 extends 进行配置继承部分 |
tslint.json
|
工作空间中各个项目的默认 TSLint 配置。比如全局是否使用单引号,变量命名语法,每行最大字段数等等 |
应用项目文件
CLI 命令 ng new my-app
会默认创建名为 “my-app” 的工作空间文件夹,并在 src/
文件夹下为工作空间顶层的根应用生成一个新的应用骨架。新生成的应用包含一个根模块的源文件,包括一个根组件及其模板。
当工作空间文件结构到位时,可以在命令行中使用 ng generate
命令往该应用中添加功能和数据。这个初始的根应用是 CLI 命令的默认应用(除非你在创建其它应用之后更改了默认值)。
除了在命令行中使用 CLI 之外,你还可以使用像 Angular Console 这样的交互式开发环境,或直接在应用的源文件夹和配置文件中操作这些文件。
对于单应用的工作区,工作空间的 src/
子文件夹包含根应用的源文件(应用逻辑、数据和静态资源)。对于多项目的工作空间,projects/
文件夹中的其它项目各自包含一个具有相同结构的 project-name/src/
子目录。
应用源文件
顶层文件 src/
为测试并运行你的应用提供支持。其子文件夹中包含应用源代码和应用的专属配置。
应用支持文件 | 目的 |
---|---|
app/
|
包含定义应用逻辑和数据的组件文件。详见下文。 |
assets/
|
包含要在构建应用时应该按原样复制的图像和其它静态资源文件。 |
environments/
|
包含特定目标环境的构建配置选项。默认情况下,有一个无名的标准开发环境和一个生产(“prod”)环境。你还可以定义其它的目标环境配置。 |
favicon.ico
|
用作该应用在标签栏中的图标。 |
index.html
|
当有人访问你的站点时,提供服务的主要 HTML 页面。CLI 会在构建你的应用时自动添加所有的 JavaScript 和 CSS 文件,所以你通常不用手动添加任何 <script> 或 <link> 标签。
|
main.ts
|
应用的主要切入点。用 JIT 编译器编译应用,然后引导应用的根模块(AppModule)在浏览器中运行。你也可以在不改变任何代码的情况下改用 AOT 编译器,只要在 CLI 的 build 和 serve 命令中加上 --aot 标志就可以了。
|
polyfills.ts
|
为浏览器支持提供了腻子(polyfill)脚本。 |
styles.sass
|
列出为项目提供样式的 CSS 文件。该扩展还反映了你为该项目配置的样式预处理器。 |
test.ts
|
单元测试的主入口点,带有一些 Angular 特有的配置。你通常不需要编辑这个文件。 |
If you create an application using Angular’s strict mode, you will also have an additional package.json
file in the src/app
directory. For more information, see Strict mode.
在 src/
文件夹里面,app/
文件夹中包含此项目的逻辑和数据。Angular 组件、模板和样式也都在这里。
SRC/APP/ 文件
|
用途 |
---|---|
app/app.component.ts
|
为应用的根组件定义逻辑,名为 AppComponent 。当你向应用中添加组件和服务时,与这个根组件相关联的视图就会成为视图树的根。
|
app/app.component.html
|
定义与根组件 AppComponent 关联的 HTML 模板。
|
app/app.component.css
|
为根组件 AppComponent 定义了基本的 CSS 样式表。
|
app/app.component.spec.ts
|
为根组件 AppComponent 定义了一个单元测试。
|
app/app.module.ts
|
定义了名为 AppModule 的根模块,它会告诉 Angular 如何组装应用。这里最初只声明一个 AppComponent 。当你向应用中添加更多组件时,它们也必须在这里声明。
|
app/package.json
|
此文件只会出现在使用 --strict 模式创建的应用中。此文件不是供包管理器使用的。它用来告诉各种工具和打包器,这个目录下的代码是否没有非局部化的副作用。
|
应用配置文件
根应用的配置文件位于工作空间的根目录下。对于多项目工作空间,项目专属的配置文件位于项目根目录 projects/project-name/
。
项目专属的 TypeScript 配置文件继承自工作区范围内的 tsconfig.base.json
,而项目专属的 TSLint 配置文件则继承自全工作区级内的 tslint.json
。
应用专属的配置文件 | 用途 |
---|---|
.browserslistrc``browserslist
|
配置各种前端工具之间共享的目标浏览器和 Node.js 版本。欲知详情,请参阅 GitHub 上的浏览器列表。 |
karma.conf.js
|
应用专属的 Karma 配置。 |
tsconfig.app.json
|
应用专属的 TypeScript 配置,包括 TypeScript 和 Angular 模板编译器的选项。参见 TypeScript 配置。 |
tsconfig.spec.json
|
应用测试的 TypeScript 配置。参见 TypeScript 配置。 |
tslint.json
|
应用专属的 TSLint 配置。 |
端到端测试文件(基本用不到)
根级的 e2e/
文件夹中包含一组针对根应用的端到端测试的源文件,以及测试专属的配置文件。
对于多项目的工作空间,应用专属的端到端测试文件都位于项目各自的根目录下,即 projects/project-name/e2e/
。
e2e/src/ (end-to-end tests for my-app)app.e2e-spec.tsapp.po.tsprotractor.conf.js (test-tool config)tsconfig.json (TypeScript config inherits from workspace)
从零搭建Angular10项目相关推荐
- react安装_超全面详细一条龙教程!从零搭建React项目全家桶(上篇)
React是近几年来前端项目开发非常火的一个框架,其背景是Facebook团队的技术支持,市场占有率也很高.很多初学者纠结一开始是学react还是vue.个人觉得,有时间的话,最好两个都掌握一下.从学 ...
- 2023新春版:看这篇大宝典就够了!从零搭建React项目全家桶
React是近年来前端开发领域非常热门的技术框架,其背景是Facebook团队的技术支持,在全球的前端开发市场上占有率很高.结合React丰富的社区资源,可以让项目开发如虎添翼.虽然React的学习门 ...
- 你还在从零搭建 Java 项目 ?10000 字总结~
前言 在我的工作中,我从零开始搭建了不少软件项目,其中包含了基础代码框架和持续集成基础设施等,这些内容在敏捷开发中通常被称为"第0个迭代"要做的事情.但是,当项目运行了一段时间之后 ...
- Koa项目搭建----从零搭建Koa项目
最近发现使用 Koa 创建项目的博客比较多,但是不够细致,为方便自己和他人,遂整理本博客. 本博客会介绍以下内容: 1,安装Koa脚手架,即 koa-generator 2,创建 Koa 1+ 项目 ...
- typeorm mysql_从零搭建项目 (10) --- 后端: 使用 TypeORM 和 MySQL
从零搭建项目 (10) --- 后端: 使用 TypeORM 和 MySQL 我的博客地址 正式地址 测试地址 前端源码 后端源码 文章目录 项目及其技术栈介绍 前端: 项目初始化 前端: 使用 Sa ...
- WebStorm 零起点搭建Vuejs项目 - 全程篇
文章目录 WebStorm进行Vue.js项目的零起点.搭建.开发.浏览器测试 一.步骤讲解 二. 浏览器演示效果: 三.附图 · 所有版本检测截图 相关文章阅读: WebStorm进行Vue.js项 ...
- python h5开发_从零搭建移动H5开发项目实战
从零搭建移动H5开发项目实战 前端H5的前世今身 在Pc的时代,前端技术无疑统治了大多数用户的交互界面!而在移动为王的今天,NA开发在早期占领了大多数用户的交互界面,后来逐渐的前端H5开发找到了自己的 ...
- springboot项目结构_从零搭建Spring Boot脚手架(1):开篇以及技术选型
1. 前言 目前Spring Boot已经成为主流的Java Web开发框架,熟练掌握Spring Boot并能够根据业务来定制Spring Boot成为一个Java开发者的必备技巧,但是总是零零碎碎 ...
- 从零搭建移动H5开发项目实战
从零搭建移动H5开发项目实战 前端H5的前世今身 在Pc的时代,前端技术无疑统治了大多数用户的交互界面!而在移动为王的今天,NA开发在早期占领了大多数用户的交互界面,后来逐渐的前端H5开发找到了自己的 ...
- 从零搭建一个基于React+Nextjs的SSR网站(四):如何搭建服务器并部署Nextjs项目
个人博客源码:https://github.com/shaotianyu/blog-front PS: 如果你有疑惑,可以给我留言,咱们一起解决它. 从零搭建一个基于React+Nextjs的SSR网 ...
最新文章
- CVPR2020 | 利用NAS搜索针对对抗攻击的鲁棒神经网络结构
- mysql备份操作_mysql-数据备份操作
- ajax拿table里的th值,Jquery Ajax 异步设置Table中某列的值
- 0224 py晚自习 udp通讯器 小明与牛牛版
- fastjson反序列化过滤字段属性_Fastjsonlt;=1.2.47反序列化漏洞源码分析及复现
- springboot整合es_[ElasticSearch从入门到场景实战]spring boot集成SpringData操作es
- 2021年终总结2022未来展望——人生天地之间,若白驹过隙,忽然而已
- opencv将图像转换成二维数组再将数组数据传给新图像
- 走吧---------------北岛
- centos7 python3安装numpy_CentOS7 安装python库(numpy、scipy、matplotlib、scikit-learn、tensorflow)...
- 计算机三级网络技术知识点cn,计算机等级三级网络技术考试详解
- CUDA编程之矩阵乘法
- python线程池ThreadPoolExecutor和as_completed的用法示例
- 笔记本处理器排名_上半年最受欢迎处理器TOP10榜单:AMD终进榜,9代酷睿无缘前10...
- 数学建模·层次分析法基本步骤及参考代码
- 窗体泄漏错误has leaked window android.widget
- 记忆尤深的博贺港海鲜
- 最新版本的Google Chrome浏览器如何设置网页编码?
- 爬虫初上手之爬取QQ音乐!
- i9500android操作系统跑流量,手机流量去哪了 横评显示360手机卫士成节流王