angular环境搭建文档【上篇】

前言

安装顺序

node.js、npm、Angular CLI

遵循某些原则，能装压缩包不装安装包

安装

node

操作根目录 D:\software\

1. 下载nodejs安装包或解压包（这里是下载zip解压包）
   

https://nodejs.org/zh-cn/download/

2. 配置node和npm全局

1. Path 新建 D:\software\node-v14.17.0-win-x64\node-v14.17.0-win-x64

3.在node更目录下创建下面俩个文件夹

npm config set prefix “D:\software\node-v14.17.0-win-x64\node-v14.17.0-win-x64\node_global”

npm config set cache “D:\software\node-v14.17.0-win-x64\node-v14.17.0-win-x64\node_cache”

3. 配置环境变量
   

NODE_PATH D:\software\node-v14.17.0-win-x64\node-v14.17.0-win-x64\node_modules

4. 配置包目录
   

Path 新建 D:\software\node-v14.17.0-win-x64\node-v14.17.0-win-x64\node_global

5. 测试
   

配置完后，安装个module测试下，我们就安装最常用的express模块，打开cmd窗口，

输入如下命令进行模块的全局安装：

npm install express -g     # -g是全局安装的意思

安装Angular CLI

$ npm install -g @angular/cli

6.经过不算太慢的等待，可能会失败，注意观察

7.测试

$ ng v

快速入门

入门学习流程

1. 环境搭建
2. 路由跳转
3. 页面传参及接口请求
4. 组件
5. 其它

第一个官方测试案例

• 通过git克隆官方快速入门模板，打开终端执行命令git clone https://github.com/angular/quickstart
• 用 IDE 打开克隆下来的工程，我用的是 vscode webstorm，然后安装依赖，在当前工程目录下执行 npm install

• 依赖下载安装完成后直接 npm start 运行

新建第一个测试案例

如果你第一个没成功，那就直接新建一个试试，不要纠结。

新建 Angular 项目

$ ng new my-app

1. 这里不会太快，大概 141M。ng init和ng new的区别是ng new会帮我们创建一个和项目名称相同的文件夹。
   
2. Angular CLI帮我们做了什么
   

那么，这时候Angular cli帮你干了以下这么多事情：

创建 my-app 目录

应用程序相关的源文件和目录将会被创建

应用程序的所有依赖 (package.json中配置的依赖项) 将会被自动安装

自动配置项目中的 TypeScript 开发环境

自动配置 Karma 单元测试环境

自动配置 Protractor (end-to-end) 测试环境

创建 environment 相关的文件并初始化为默认的设置

1. 启动测试

cd my-app

ng serve --open

ng start

后记

参考

https://www.jianshu.com/p/327d88284abb

https://www.jianshu.com/p/3d5df8ad8aa3