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中定义模板
为了使用新增加的组件,我们把
执行 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环境搭建的资料请关注其它相关文章!
推荐阅读
-
Ubuntu上安装Nginx服务器程序及简单的环境配置小结
-
Hadoop源码学习笔记之NameNode启动流程分析一:源码环境搭建和项目模块及NameNode结构简单介绍
-
angular开发环境搭建及新建项目
-
Angular环境搭建及简单体验小结
-
Ubuntu上安装Nginx服务器程序及简单的环境配置小结
-
Hadoop源码学习笔记之NameNode启动流程分析一:源码环境搭建和项目模块及NameNode结构简单介绍
-
Mac OS下PHP环境搭建及PHP操作MySQL常用方法小结_MySQL
-
Mac OS下PHP环境搭建及PHP操作MySQL常用方法小结_MySQL
-
Weex开发体验之一:环境搭建及调测
-
angular开发环境搭建及新建项目