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

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环境搭建的资料请关注其它相关文章！