如今前端界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元素调用)

<hero-detail hero="ctrl.hero"></hero-detail>

Components和Directive的主要区别如下

1.directive默认作用域不隔离(scope默认为false),Components默认父子组价作用域隔离

2.directive当设置scope为对象时,属性有三种前缀标示符可以设置 "@"(单项绑定的前缀标识符,传字符串用) "="(双向数据绑定前缀标识符,即父子变化都会互相影响) "&"(绑定函数方法),Components的bindings比directive的scope多了一种"<"(单向数据传输,即父组件改变状态会影响子组件的状态,字组件改变状态不会影响父组件的状态)

3.directive中有link函数,操作dom在link中,而Components没有link所以不能用于操作dom

Components(生命周期)钩子函数

angular1.5为每个组件提供了生命周期钩子函数去响应不同的时刻,有以下几个钩子

1.$onInit():此时controller构造函数初始化完毕(包括bindings中的数据),所以controller中初始化的代码应该放在这里。

2.$onChanges(changesObj):当bindings单向数据变化时会触发这个钩子

3.$doCheck():每次脏检查会触发的钩子

4.$onDestroy():当controller的scope销毁时会触发的钩子

5.$postLink():当组件及其子组件的元素已经被编译和链接触发的钩子

注意

虽然bindings父子间数据可以设置为"=",但是最好设置为"<",这样父组件改变状态可以影响子组件,反之则不行。如果想子组件触发父组件状态的变化,因该传入父组件的回调函数。如下

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body ng-app="heroApp">
<script src="./angular.js"></script>
<div ng-controller="MainCtrl as ctrl">
<b>Hero</b>
<br>
<hero-detail age="ctrl.age" modify-age="ctrl.modifyAge()"></hero-detail>
父组件{{ctrl.age}}
<div>{{ctrl.out}}</div>
</div>
<script>
angular.module('heroApp', []).controller('MainCtrl', function MainCtrl($scope) {
this.age = '18'
var that = this
setTimeout(function() {
that.age = '20'
$scope.$apply()
}, 2000);
this.modifyAge=function(){
that.age='22'
$scope.$apply()
}
});
function HeroDetailController($scope) {
var that = this
setTimeout(function() {
that.modifyAge()
}, 4000);
}
angular.module('heroApp').component('heroDetail', {
template: '子组件{{$ctrl.age}}',
controller: ['$scope', HeroDetailController],
bindings: {
age: '<',
modifyAge:'&'
}
});
</script>
</body>
</html>

参考文章

angular1.5 官网

钩子函数详解

angular1.5 Components的更多相关文章

  1. angular2系列教程(三)components

    今天,我们要讲的是angualr2的components. 例子

  2. 在Angular1.X中使用CSS Modules

    在Angular1.5中,增加了一个Component方法,并且定义了组件的若干生命周期hook,在代码规范中也是推崇组件化开发,但是很遗憾的是,CSS模块化组件化的问题并没有得到解决,大部分项目的打 ...

  3. angular1.x + ES6开发风格记录

    angular1.x和ES6开发风格 一.Module ES6有自己的模块机制,所以我们要通过使用ES6的模块机制来淡化ng的框架,使得各业务逻辑层的看不出框架的痕迹,具体的做法是: 把各功能模块的具 ...

  4. angular1结合webpack构建工具

    目录结构 webpack.config.js const { resolve } = require('path') const webpack = require('webpack') const ...

  5. vue components registration & vue error & Unknown custom element

    vue components registration & vue error & Unknown custom element vue.esm.js:629 [Vue warn]: ...

  6. 【shadow dom入UI】web components思想如何应用于实际项目

    回顾 经过昨天的优化处理([前端优化之拆分CSS]前端三剑客的分分合合),我们在UI一块做了几个关键动作: ① CSS入UI ② CSS作为组件的一个节点而存在,并且会被“格式化”,即选择器带id前缀 ...

  7. [LeetCode] Number of Connected Components in an Undirected Graph 无向图中的连通区域的个数

    Given n nodes labeled from 0 to n - 1 and a list of undirected edges (each edge is a pair of nodes), ...

  8. angular1.x的简单介绍 (一)

    angular1.x作为经典的mvc框架,可以创建能够复用的组件,也可进行双向数据绑定.国内的vue.js/avaloon.js都是同类型的框架.适合使用angularjs的项目有大型信息化管理系统: ...

  9. Web Components初探

    本文来自 mweb.baidu.com 做最好的无线WEB研发团队 是随着 Web 应用不断丰富,过度分离的设计也会带来可重用性上的问题.于是各家显神通,各种 UI 组件工具库层出不穷,煞有八仙过海之 ...

随机推荐

  1. Keil STM32调试,使用ST-Link下载程序时提示“flash timeout.reset the target and try it again”

    参考: 很郁闷,买来没多久的 STM32F4-DISCOVERY 就挂了? STM32F103RB   Jlink调试的时候出现flash timeout.reset the target and t ...

  2. 【转】高性能服务器架构(High-Performance Server Architecture)

    High-Performance Server Architecture 高性能服务器架构 来源:http://pl.atyp.us/content/tech/servers.html译文来源:htt ...

  3. java实现——004替换空格

    1.创建新的字符串 public class T004 { public static void main(String[] args){ System.out.println(replaceBlan ...

  4. Linux_System11

    1.查看/var目录的大小:1)ll -hd /var 查看目录的实际大小2)du -sh /var 查看目录所占磁盘空间大小修改权限:chmod 750 hunan修改属主和属组:groupadd ...

  5. bzoj1468

    1468: Tree Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 1023  Solved: 532[Submit][Status][Discuss] ...

  6. shell 远程备份日志

    #!/bin/bash #Function:自动备份给定列表中的目录或文件,并且可以保留N天备份的档案. #可备份至远程主机指定的目录下,但需本机能免密码登录到远程主机,用到ssh-keygen #该 ...

  7. MYSQL 函数复习

    数学函数    ABS(X)    返回X的绝对值    SQRT(x)        返回非负数X的二次方根    MOD(x,y)    返回x被y除后的余数    CEIL(x)         ...

  8. Emmet插件详解

    http://www.ithao123.cn/content-10512551.html   (webstorm的css编写插件)Emmet:HTML/CSS代码快速编写神器 [摘要:Emmet的前身 ...

  9. PHP的一些 有用但不常用的函数记录

    1. microtime() 当前 Unix 时间戳以及微秒数. <?php $mem = new Memcache; $mem->connect("127.0.0.1" ...

  10. [转载]rabbitmq可靠发送的自动重试机制

    转载地址http://www.jianshu.com/p/6579e48d18ae http://www.jianshu.com/p/4112d78a8753 接这篇 在上文中,主要实现了可靠模式的c ...