本文介绍Angular框架中的组件概念及其开发流程，包括组件的创建、生命周期及常用第三方库的集成。
1、组件概念
如何理解组件，可以帮助你如何理解前端工程化，就是把页面上显示的内容，划分成一个个的组件，组合到一起就变成了我们熟悉的网页。
看一下下面这个百度页面，怎么划分，可以从head、body、footer分三部分，在大的组件上还有小的组件，然后经过一层层组件嵌套。
这就是一个页面的主要组成部分。
2、开发准备工作：
先引入包：
cnpminstall bootstrap --save
cnpm installjquery --save
在angular-cli.json
引入第三方，到项目中
使typescript能够识别bootstrap和jquery
cnpminstall @types/bootstrap --save-dev
cnpm install @types/jquery--save-dev
生成组件
ng g component navbar 生成组件navbar
生成模板 app.component.html
run中npm run start
或者cmd中npm serve
Ng serve
运行效果：
如果样式不对，请检查angular-cli。json，是不是配置正确
【bootstrap样式，下同】开发navbar、footer
选择器：selector：'app-navbar',这是组件名称。在app总的ts中，使用的是这个名称
钩子函数：例如ngOnInit（），是生命周期钩子。在运行的时候触发
样式url：css，
templateUrl:模板html
组件数据，装配到模板↑
装饰器：把元数据赋值到普通类上，成为组件↑
全生命周期支持
组件的完整生命周期变化，每个组件都支持，如下图，
根据生命周期，可以知道主要的业务网逻辑处理都是在Oninit组件初始化开始，在构造函数阶段不会处理。
参考：
慕课网有个一小时入门视频，可以对angular2有一个大概的了解。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
