angular入门篇1----项目安装

Angular入门

背景:作者是通过Adam Freeman的《Angular5高级编程》学习Angular框架的，但目前的Angular版本更新至14，许多内容因为版本更新在代码写法上发生了变化，因此在这里做一些记录与入门者一同分享。表达或内容上的欠缺希望读者能不吝指出，非常感谢!

Angular的安装

1. Node.js安装

首先,我们需要安装一个Node.js搭建一些Angular的脚手架:

下载地址 进入下载地址，我们下载稳定版本的(左边的版本)

打开cmd，键入 node-v 及 npm -v,可以看到node的版本:

接下来配置一下系统变量:

依照如下流程，我们在PATH下输入node的位置(记得在前面加上分号与其他路径进行分隔):

打开此电脑:

2. 安装angular开发环境

在cmd输入如下命令安装angular-cli包:

npm install --global @angular/cli@1.5.0

3. 创建项目

3.1 安装项目

我们找一个合适的位置创建一个文件夹，此处为angular:

在cmd中进入angular文件夹，输入 ng new angularDemo

(安装过程会比较慢)

安装完成后我们便可以在angular文件夹下看到项目:

3.2 安装依赖

在cmd中转至angularDemo文件，输入 npm install

这个指令是将原本下载的工具引入至项目中。

下面利用编译器打开项目，输入 ng server --port 3000 --open

当然也可以在编译器直接运行，区别就是: 上述指令使用了3000端口(也可以根据自己的需要修改),而浏览器则会默认打开4200端口。

最后我们就可以看到预设的页面:

如果没有显示，在编译成功后也可以在浏览器输入地址进行查看:

终端指令执行的网址(3000端口):
http://localhost:3000/

编译器直接执行的网址(4200端口):
http://localhost:4200/