欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Angular环境搭建及简单体验小结

程序员文章站 2022-06-10 08:30:36
angular介绍angular是谷歌开发的一款开源的web前端框架,诞生于2009年,由misko hevery 等人创建,后为google所收购。是一款优秀的前端js框架,已经被用于google的...

angular介绍

angular是谷歌开发的一款开源的web前端框架,诞生于2009年,由misko hevery 等人创建,后为google所收购。是一款优秀的前端js框架,已经被用于google的多款产品当中。
根据项目数统计angular(1.x 、2.x 、4.x、5.x、6.x、7.x 、8.x、9.x)是现在网上使用量最大的框架。

angular基于typescript和react、vue相比 angular更适合中大型企业级项目。

关于angular版本,angular官方已经统一命名angular 1.x统称为angular js;angular 2.x及以上统称angular;

目前2019年12月25日angular最新版本angular9.x。根据官方介绍,angular每过几个月就会更新一个版本。angular2.x以后所有的angular版本用法都是一样的,此教程同样适用于angular7.x 、angular8.x、angular9.x 以及未来的其它版本…。

学习angular必备基础
必备基础:html 、css 、js、es6、ts

一、安装开发环境

二、创建hello-world项目

创建项目

查看新建项目的目录结构

查看src目录里的结构

启动应用,可以在查看运行结果

创建hello-world组件

在hello-world.component.ts中定义新的组件

在hello-world.component.html中定义模板

为了使用新增加的组件,我们把标签添加到app.component.html中。

执行 ng serve查看执行效果

三、创建展示用户的user-item指令

生成指令组件

为组件声明并初始化一个name字段

在模板中显示变量name的值

将app-user-item添加到app.component.html中,查看浏览器执行结果。

四、创建用户列表user-list指令

创建新组件

在组件中声明并初始化names数组

在组件的模板中递归遍历names数组

将组件添加app.component.html中,查看浏览器执行结果。

五、组合使用user-item和user-list

修改user-item的name参数使用外部输入

修改user-list的模板

保存查看浏览器执行情况。

六、启动过程分析

ng会首先从angular.json中查找程序的main入口为src/main.ts

查看main.ts文件,发现启动的module是appmodule,位于app/app.module.ts中

在app.module.ts中可以看到,通过ngmodule标注声明了本模块中的组件以及依赖的外部module及作为顶层组件启动的appcomponent;

以上就是angular环境搭建及简单体验的详细内容,更多关于angular环境搭建的资料请关注其它相关文章!