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/

posted @   Feo2022  阅读(641)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
展开