angular安装与脚手架安装

笔者写于2021年7月13日,如果读者看到时觉得间隔太久,建议以官方文档为准

angular(简称ng)是js的三大框架之一,窃以为揉合了react与vue的思想(认知所限,目前暂以为)。由于项目需要,便提前学习一些作为知识储备。

项目需求:使用antd-ng作为ui框架,使用ng作为技术框架

一:安装

读者请务必保证本机有node且应为较新环境

npm install -g @angular/cli

命令行下使用ng --version检查是否安装成功

命令行中出现以上字样即说明ng在本地安装成功。

二:使用cli创建项目

使用ng new projectname创建项目,不允许有大写字母:

ng new myng2

回车

回车后可能会无响应,此时可以ctrl+c停止并再次执行ng new myng2命令

此时会弹出以下问题:想要添加ng路由吗?

点击Y

弹出以下问题:选择哪种css语言? css/less/sass/scss,上下方向键选中,enter确定

随即将进入安装阶段,等待即可

随后cd myng2

执行 npm run ng运行项目

默认情况下,项目会跑在http://localhost:4200/

输入页面回显hello,world

main.ts是项目的入口文件,导入了app目录,app目录是项目的页面的入口项,即所有页面的根页面

app.html删除所有冗余代码,保留<router-outlet></router-outlet>

<!-- app.html -->

<div>
  hello,world
</div>
<router-outlet></router-outlet>

app.html中主要写页面,逻辑写在app.ts

今天第一次学习ng,大致了解下流程

以上。

作者:致爱丽丝
本文版权归作者和博客园共有,欢迎转载,但必须在文章页面给出原文链接并标名原文作者,否则保留追究法律责任的权利。
原文地址:https://www.cnblogs.com/hjk1124/p/15013356.html