本文及系列所有文章均基于Win10系统

前言

Angular 是一个应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用。最近项目中的某个模块要使用Angular来做前端界面，所以现在开始要学习一下。

node、npm安装

实际上只需要安装node，因为在安装node的过程中，会一起安装npm组件，我电脑上已经安装了node和npm，所以这里就不在展示安装过程了，大家可以直接进入node官网安装即可。

node官网

安装完成之后查看node和npm的版本

C:\Users\Administrator>node -v
v14.15.2
C:\Users\Administrator>npm -v
6.14.9

安装cnpm

npm和cnpm都是自动从网络上获取一些开发资源的工具，但是npm访问的是国外的资源，cnpm是访问的淘宝维护的国内的资源，所以在获取一些资源的时候，使用cnpm要快的多。

执行命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

执行结果

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 library is no longer supported
C:\Users\Administrator\AppData\Roaming\npm\cnpm -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm
+ cnpm@6.1.1
added 689 packages from 972 contributors in 60.995s

安装angular/cli

执行命令

cnpm install -g @angular/cli

等待安装完成

创建一个angular项目

我的angular项目路径是D:\project\angular

进入项目路径并new一个angular项目

C:\Users\Administrator>d:
D:\>cd project
D:\project>cd angular
D:\project\angular>ng new hello-world

构建选项

? Do you want to enforce stricter type checking and stricter bundle budgets in the workspace?This setting helps improve maintainability and catch bugs ahead of time.For more information, see https://angular.io/strict Yes
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? Less   [ http://lesscss.org]

等待构建完成

The file will have its original line endings in your working directorySuccessfully initialized git.```
# 运行项目
进入项目文件夹并启动项目
```shel
D:\project\angular>cd hello-world
D:\project\angular\hello-world>ng serve --open

等待项目编译完成

Compiling @angular/core : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
√ Browser application bundle generation complete.

Initial Chunk Files   | Names         |      Size
vendor.js             | vendor        |   2.66 MB
polyfills.js          | polyfills     | 484.59 kB
styles.css, styles.js | styles        | 344.16 kB
main.js               | main          |  59.53 kB
runtime.js            | runtime       |   6.15 kB| Initial Total |   3.53 MB
Build at: 2020-12-29T16:14:52.985Z - Hash: 01d7b61d91b9fb3c0772 - Time: 12210ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
√ Compiled successfully.
√ Browser application bundle generation complete.
Initial Chunk Files   | Names  |      Size
styles.css, styles.js | styles | 344.16 kB
4 unchanged chunks
Build at: 2020-12-29T16:14:59.660Z - Hash: 14a5cf3d9e5aae347e75 - Time: 2215ms
√ Compiled successfully.

访问项目

访问网址 http://localhost:4200/

项目首页

总结

搭建过程其实是非常简单的，没遇到啥问题，主要注意的就是如果你在国内开发的话，需要设置cnpm，我用了代理，所以这方面的需求也不高，如果你在搭建过程中下载文件非常慢，请注意设置cnpm

我是Baldwin，一个25岁的程序员，致力于让学习变得更有趣！
现在关注作者即可领取海量学习资料与简历模板

往期好文：

用Python每天给女神发一句手机短信情话

MySQL优化之explain

Spring源码分析-MVC初始化

春风得意马蹄疾，一文看尽（JVM）虚拟机

造轮子的艺术

源码阅读技巧

Java注解详解

教你自建SpringBoot服务器

更多文章请点击

Angular------win10搭建Angular环境并运行hello-world相关推荐

win10搭建python环境_win10系统搭建python环境的还原方法
有关win10系统搭建python环境的操作方法想必大家有所耳闻.但是能够对win10系统搭建python环境进行实际操作的人却不多.其实解决win10系统搭建python环境的问题也不是难事,小编这 ...
手把手教你搭建LAMP环境，运行第一个属于你的个人网站
用Linux系统,搭建自己的第一个网站,起飞~~~的开始搭建LAMP环境 1. 服务器 1.1 远程连接服务器 1.2 域名及解析 1.3 域名备案 2. LAMP环境 2.1 LAMP环境介绍 2 ...
win10搭建hadoop环境
前言学习大数据框架,hadoop是许多其他框架的基础,因此需要掌握如何快速搭建hadoop的应用环境通常来说,hadoop本地模式,伪分布模式和完全分布式,本篇以伪分布式单节点为例,快速在win1 ...
【两次】基于win10搭建mask_rcnn环境，并跑通实验————分享经验
一.环境搭建概括 win10+GPU+python3.6+anaconda3.5+VS2015+CUDA8.0+cudnn6.0+tensorflow1.8.0 [啰嗦一下]:由于实验室服务器暂时用不 ...
阿里云（腾讯云）服务器使用宝塔，搭建Python环境，运行 django 程序
本篇博客主要内容为介绍阿里云服务器(CentOS) 搭建 Django 程序. 在正式开始之前,你需要有一台服务器. 文章目录安装宝塔配置 Python 运行环境安装 Python 配置 d ...
win10 搭建Qt环境
所需相关软件(可在下面网址挑选自己合适的版本进行下载): 1.Qt SDK:qt-win-opensource-4.7.4-mingw.exe 2.Qt Creator:qt-creator-win- ...
【100天精通python】Day1：python入门_初识python，搭建python环境，运行第一个python小程序
目录专栏导读 1 初始python python 概述 python的应用领域应用python的公司 2 搭建python 开发环境 2.1 安装python(以windows 系统为例)(1)下 ...
购买云服务器和搭建PHP环境，运行PHP个人网站
1:首先需要购买云服务器阿里云,百度云,腾讯云,华为云等那一家的都一样.我以腾讯云为例子说明,我买的是腾讯云. 1:本人学生,直接购买腾讯云10元一月的学生服务器.购买前需要先注册腾讯云的账号,账号 ...
windows10搭建CUDA环境并运行示例
文章目录 1. 配置检查 2. 安装vs 3. 安装CUDA 4. 检测CUDA是否安装成功 5. 配置VS开发环境运行CUDA 6. 新建CUDA项目 6. 可能遇到的一些问题 1. 配置检查我的 ...
JavaWeb入门到精通-搭建javaweb环境并运行javaweb项目-下
上篇中咱们说了一下JDK的安装与配置和tomcat下载与运行(未完).今天我们就来说一下idea运行javaweb和上次尚未说完的tomcat下载与运行,下面一起开始吧! 2.关闭tomcat服务器 ...

Angular------win10搭建Angular环境并运行hello-world

前言