如今前端界angular react vue三大框架并驾齐驱,其中有一个共同点就是组件化开发,这也符合w3c 推行Web Components的趋势。现如今不懂组件化开发的前端绝对不是好厨子。跳槽新公司pc端使用angular1.5的Components比较多,趁着入职前几天自己看一下。
由于angular2.0学习曲线比较陡峭(对于我这种菜鸡来说),为了让开发者平稳的从angular1.x 版本过渡到angular2,所以angular1.5中引入了components,需要注意的是所有components能实现的功能directive都能实现。 顺便说一句1.5之前的directive感觉有点混乱,既包括指令又包括组件(我自己感觉指令是不应该有dom结构的,而组件是应该有的)
介绍
angular1.5 Components比较适合组件化编程架构的程序,相比于之前的指令有以下几个优点。
1.比指令的配置更加简单
2.自带默认配置使之符合最佳实践
3.更适合组件化架构的程序
4.使用Components更符合angular发展的趋势
当然有些情况下不要使用Components
1.当你想使用compile和pre-link这两个钩子时,因为components不包含这两个钩子,所以component无法用于操作DOM。
2.当你想作为属性或者css类名调用时,components只能作为自定义的HTML元素调用
使用
定义一个组件
function HeroDetailController($scope) {
console.log($scope) // console.log(this.hero)}
angular.module('heroApp').component('heroDetail', {
templateUrl: './heroDetail.html',
controller:['$scope',HeroDetailController] ,
bindings: {
hero: '='
}
});调用组件(只能作为自定义的HTML元素调用)
延伸阅读
- ssh框架 2016-09-30
- 阿里移动安全 [无线安全]玩转无线电——不安全的蓝牙锁 2017-07-26
- 消息队列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 论文笔记【图片目标分割】 2017-07-26
- 词向量-LRWE模型-更好地识别反义词同义词 2017-07-26
- 从栈不平衡问题 理解 calling convention 2017-07-26
- php imagemagick 处理 图片剪切、压缩、合并、插入文本、背景色透明 2017-07-26
- Swift实现JSON转Model - HandyJSON使用讲解 2017-07-26
- 阿里移动安全 Android端恶意锁屏勒索应用分析 2017-07-26
- 集合结合数据结构来看看(二) 2017-07-26
学习是年轻人改变自己的最好方式