Angular的环境搭建、创建项目以及运行项目
环境搭建
- 安装node.js
https://nodejs.org
安装angular的计算机上面必须安装最新的nodejs——注意安装nodejs稳定版本
安装完成后,打开cmd,输入node -v命令查看nodejs版本
输入npm -v查看npm的版本(nodejs安装之后npm就自动安装上了) - 安装cnpm
npm可能安装失败建议先用npm安装一下cnpm用淘宝镜像安装
https://npm.taobao.org
可以直接将下面这句话复制到终端
npm install -g cnpm --registry=https://registry.npm.taobao.org
- 使用npm/cnpm命令安装angular/cli(只需安装一次)
npm install -g @angular/cli 或者 cnpm install -g @angular/cli
- 输入ng v命令,出现下图的内容即说明angular环境搭建成功
创建项目
- 首先创建一个文件夹放要创建的项目,然后打开命令行工具找到要创建项目的目录,我这里目录是:D:\angular
按以下步骤输入命令:
D:
cd angular
- 创建项目
ng new 项目名称
在运行过程中可能会卡住,但是不是真正的卡住了,它正在安装依赖npm i,这个操作可能会成功,也可能会失败,这里可以Ctrl+C终止
ng new angulardemo01
- 接下来可以输入cd angulardemo01命令进入到创建的项目里,然后输入cnpm install安装依赖(npm也可以安装,但是很慢)
运行项目
- 输入ng serve --open命令运行项目,编译完成后会打开一个浏览器(IE8不支持)
- 编辑器推荐使用Visual Studio Code
https://code.visualstudio.com/
安装的Visual Studio Code是英文版,如何转换成中文版,点击下方链接查看
https://blog.****.net/qq_42572029/article/details/107523068 - 安装完Visual Studio Code后,打开Visual Studio Code将创建的项目导入编辑器,操作步骤如下:
这样就导入了项目 - 导入之后默认编辑器是没有任何提示的,如果想让编辑器提示我们angular代码,如下操作:
输入搜索angular,找到这个插件,点击安装即可 - 如下操作,可以试着更改代码,查看运行结果
原本的运行结果:
更改后的运行结果: