Web前端工程化之Angular组件

版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/mayfla/article/details/78942554

1、组件概念

        如何理解组件,可以帮助你如何理解前端工程化,就是把页面上显示的内容,划分成一个个的组件,组合到一起就变成了我们熟悉的网页。

看一下下面这个百度页面,怎么划分,可以从head、body、footer分三部分,在大的组件上还有小的组件,然后经过一层层组件嵌套。


这就是一个页面的主要组成部分。



2、开发准备工作:

先引入包:

cnpminstall bootstrap --save

cnpm installjquery --save

angular-cli.json

引入第三方,到项目中


 

使typescript能够识别bootstrapjquery

cnpminstall @types/bootstrap --save-dev

cnpm install @types/jquery--save-dev

生成组件

ng g component navbar 生成组件navbar


生成模板  app.component.html


runnpm run start

或者cmdnpm serve

Ng serve

运行效果:


如果样式不对,请检查angular-clijson,是不是配置正确

bootstrap样式,下同】开发navbarfooter

选择器:selector'app-navbar',这是组件名称。在app总的ts中,使用的是这个名称

钩子函数:例如ngOnInit(),是生命周期钩子。在运行的时候触发

样式urlcss

templateUrl:模板html

组件数据,装配到模板↑

装饰器:把元数据赋值到普通类上,成为组件↑

全生命周期支持

组件的完整生命周期变化,每个组件都支持,如下图,


根据生命周期,可以知道主要的业务网逻辑处理都是在Oninit组件初始化开始,在构造函数阶段不会处理。


参考:

慕课网有个一小时入门视频,可以对angular2有一个大概的了解。


猜你喜欢

转载自blog.csdn.net/mayfla/article/details/78942554