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/
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析