首页 > 其他 > 详细

angular学习之通俗易懂篇-----从头开始(一)

时间:2020-12-29 11:14:21      阅读:29      评论:0      收藏:0      [点我收藏+]

1、新建angular项目:

技术分享图片

 

2、进入angulardemo1目录,并启动项目:

技术分享图片

  

3、在浏览器打开:

技术分享图片

技术分享图片技术分享图片

 

4、新建组件

技术分享图片

 这就是在app文件夹下新建了目录component并创建组件componentA

 

此刻目录如下:

技术分享图片

 

 app.module.ts中会自动引入我们新建的组件,并声明,我们就能在项目其他地方使用这些组件了

技术分享图片

 

5、使用组件:

tips:组件相当于模板,哪里需要就能拿到哪里去用!!!

找到组件ts文件中的标签名,之后就能用这个标签名使用组件:

技术分享图片

 

 删除app.component.html中的代码,也就是默认启动页面中的内容:技术分享图片

 

在app.component.html中使用组件A:

技术分享图片

 

 重新启动项目,浏览器显示为:

 技术分享图片

 说明组件使用成功!!!

 

用同样的方法新建组件,并调用:

技术分享图片

 

 技术分享图片

 

angular学习之通俗易懂篇-----从头开始(一)

原文:https://www.cnblogs.com/zhaoyingzhen/p/14185058.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!