Component

https://docs.angularjs.org/guide/component

component本质上就是directive。

This is a shorthand for registering a special type of directive, which represents a self-contained UI component in your application. Such components are always isolated (i.e. scope: {}) and are always restricted to elements (i.e. restrict: 'E').

Component definitions are very simple and do not require as much configuration as defining general directives. Component definitions usually consist only of a template and a controller backing it.

MVC的本质就是将controller和template关联起来,controller将数据显示到template中。component将这种关联做的更好。

When not to use Components:

  1. for directives that need to perform actions in compile and pre-link functions, because they aren't available
  2. when you need advanced directive definition options like priority, terminal, multi-element
  3. when you want a directive that is triggered by an attribute or CSS class, rather than an element

component解决了什么问题:

  1. app中的某个部分如何重用
  2. app中各部分之间的scope不是隔离的
  3. component可以自由的重复使用
  4. index.html被简化了,细节的实现都分离出来了,提高了可维护性
  5. component是隔离的,不受外界影响,同时也不会影响app中的其他部分
  6. 可以独立的测试我们的component

Comparison between Directive definition and Component definition

component使用

  1. 文件名建议:xxxComponent.component.js
  2. component名字规则和directive一样,定义的时候使用驼峰样式(myAwesomeComponent),模板中使用的时候使用-分割(my-awesome-component)
  3. template中使用controller的实例$ctrl替代scope来访问数据,这个实例别名可以自定义 - 使用controllerAs属性
  4. controller可以使用controller()注册的controller,也可以使用行内定义的方式
<html ng-app="phonecatApp">
<head>
...
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
<script src="phone-list.component.js"></script>
</head>
<body> <!-- Use a custom component to render a list of phones -->
<phone-list></phone-list> </body>
</html>
// Define the `phonecatApp` module
angular.module('phonecatApp', []); // Register `phoneList` component, along with its associated controller and template
angular.
module('phonecatApp').
component('phoneList', {
template:
'<ul>' +
'<li ng-repeat="phone in $ctrl.phones">' +
'<span>{{phone.name}}</span>' +
'<p>{{phone.snippet}}</p>' +
'</li>' +
'</ul>',
controller: function PhoneListController() {
this.phones = [
{
name: 'Nexus S',
snippet: 'Fast just got faster with Nexus S.'
}, {
name: 'Motorola XOOM™ with Wi-Fi',
snippet: 'The Next, Next Generation tablet.'
}, {
name: 'MOTOROLA XOOM™',
snippet: 'The Next, Next Generation tablet.'
}
];
},
controllerAs: 'ctrl'
});

example

var myMod = angular.module(...);
myMod.component('myComp', {
template: '<div>My name is {{$ctrl.name}}</div>',
controller: function() {
this.name = 'shahar';
}
}); myMod.component('myComp', {
template: '<div>My name is {{$ctrl.name}}</div>',
bindings: {name: '@'}
}); myMod.component('myComp', {
templateUrl: 'views/my-comp.html',
controller: 'MyCtrl',
controllerAs: 'ctrl',
bindings: {name: '@'}
});

API

component(name, options) returns ng.$compileProvider

https://docs.angularjs.org/api/ng/service/$compile#directive-definition-object

bindings

这个就是类似于directive中的scope属性, 支持:

  1. @ 字符值 - input
  2. < 单向绑定 - input
  3. & 回调传递 - 父组件的方法,用于向上的交互 - output
  4. = 双向绑定 - 设计原则中不推荐使用
angular.module('docsIsolateScopeDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
$scope.igor = { name: 'Igor', address: '123 Somewhere' };
}])
.directive('myCustomer', function() {
return {
restrict: 'E',
scope: {
customerInfo: '=info'
},
templateUrl: 'my-customer-iso.html'
};
});
    .component('qqtrMenu',{
templateUrl:'/secu/components/menu/menu.component.html',
bindings: {
menuitems: "<"
},
controller: 'menuCompCtrl',
})

交互式组件实例

https://plnkr.co/edit/?p=preview

index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-component-tabs-pane-production</title> <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script src="script.js"></script> </head>
<body ng-app="docsTabsExample">
<my-tabs>
<my-pane title="Hello">
<h4>Hello</h4>
<p>Lorem ipsum dolor sit amet</p>
</my-pane>
<my-pane title="World">
<h4>World</h4>
<em>Mauris elementum elementum enim at suscipit.</em>
<p><a href ng-click="i = i + 1">counter: {{i || 0}}</a></p>
</my-pane>
</my-tabs>
</body>
</html> <!--
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

script.js

(function(angular) {
'use strict';
angular.module('docsTabsExample', [])
.component('myTabs', {
transclude: true,
controller: function MyTabsController() {
var panes = this.panes = [];
this.select = function(pane) {
angular.forEach(panes, function(pane) {
pane.selected = false;
});
pane.selected = true;
};
this.addPane = function(pane) {
if (panes.length === 0) {
this.select(pane);
}
panes.push(pane);
};
},
templateUrl: 'my-tabs.html'
})
.component('myPane', {
transclude: true,
require: {
tabsCtrl: '^myTabs'
},
bindings: {
title: '@'
},
controller: function() {
this.$onInit = function() {
this.tabsCtrl.addPane(this);
console.log(this);
};
},
templateUrl: 'my-pane.html'
});
})(window.angular); /*
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

my-pane.html

<div class="tab-pane" ng-show="$ctrl.selected" ng-transclude></div>

<!--
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

my-tabs.html

<div class="tabbable">
<ul class="nav nav-tabs">
<li ng-repeat="pane in $ctrl.panes" ng-class="{active:pane.selected}">
<a href="" ng-click="$ctrl.select(pane)">{{pane.title}}</a>
</li>
</ul>
<div class="tab-content" ng-transclude></div>
</div> <!--
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

基于组件的开发

https://docs.angularjs.org/guide/component

一个应用应该是一个组件数,每个组件只控制自己的视图和数据. bindings只用字符和单向绑定,数据单向流入; 使用&绑定父组件的方法,实现向上交互

推荐和参考:

https://docs.angularjs.org/tutorial/step_03

https://docs.angularjs.org/api/ng/provider/$compileProvider#component

In order to retrieve and instantiate a component's controller, AngularJS provides the $componentController service.

angularjs component的更多相关文章

  1. 一篇文章看懂angularjs component组件

     壹 ❀ 引 我在 angularjs 一篇文章看懂自定义指令directive 一文中详细介绍了directive基本用法与完整属性介绍.directive是个很神奇的存在,你可以不设置templa ...

  2. angularjs中directive指令与component组件有什么区别?

     壹 ❀ 引 我在前面花了两篇博客分别系统化介绍了angularjs中的directive指令与component组件,当然directive也能实现组件这点毋庸置疑.在了解完两者后,即便我们知道co ...

  3. Using RequireJS in AngularJS Applications

    http://www.sitepoint.com/using-requirejs-AngularJS-applications/ While writing large JavaScript appl ...

  4. 升级 AngularJS 至 Angular

    Victor Savkin 大神撰写了一系列文章详细介绍如何升级 AngularJS 应用: NgUpgrade in Depth Upgrade Shell Two Approaches to Up ...

  5. 了解angularjs中的生命周期钩子函数$onInit,$onChange,$onDestory,$postLink

     壹 ❀ 引 我在前面花了三篇文章用于介绍angularjs的指令directive,组件component,并专门花了一篇文章介绍directive与component的不同,其中提到在compon ...

  6. angularjs 一篇文章看懂自定义指令directive

     壹 ❀ 引 在angularjs开发中,指令的使用是无处无在的,我们习惯使用指令来拓展HTML:那么如何理解指令呢,你可以把它理解成在DOM元素上运行的函数,它可以帮助我们拓展DOM元素的功能.比如 ...

  7. angular directive 深入理解

    由于业务的需要,最近angular 的diretive 研究的比较多,有和同事一起共同协作开发scada的项目, 对directive 有了进一步更深的理解. 感觉才开始真正理解了这句话的意思: In ...

  8. angularjs directive and component 指令与组件 ( 1.5.0 以后 )

    之前写过一篇了 http://www.cnblogs.com/keatkeat/p/3903673.html 但某些部分写的不太清楚,甚至有点错误,所以今天特地在这里再来谈谈. 这篇主要是说指令的隔离 ...

  9. AngularJs学习笔记--Understanding the Model Component

    原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model 在angular文档讨论的上下文中,术语“model”可以 ...

随机推荐

  1. Windows:C:\Windows\System32\drivers\etc\hosts

    原文地址:http://zhumeng8337797.blog.163.com/blog/static/100768914201001983953188/. host是一个没有扩展名的系统文件,可以用 ...

  2. 使用DDMS中的内存监测工具Heap来优化内存

    最近在做一个照片墙的应用,涉及到很多知识,其中难点在于如何应对数量庞大的图片,这就涉及到内存管理的知识了.今天介绍的工具是DDMS中自带的Heap,它可以显示出当前引用占用的内存,剩余的内存等信息.下 ...

  3. 《例说XBee无线模块开发》

    <例说XBee无线模块开发> 基本信息 原书名:The Hands-on XBee Lab Manual:Experiments that Teach you XBee Wireless ...

  4. 《C#本质论(第4版)》

    <C#本质论(第4版)> 基本信息 作者: (美)Mark Michaelis    Eric Lippert 译者: 周靖 出版社:人民邮电出版社 ISBN:9787115336750 ...

  5. 关于MySQL的行转列的简单应用(二)---group函数

    MySQL的行转列.列转行.连接字符串  concat.concat_ws.group_concat函数用法使用方法:CONCAT(str1,str2,…) 返回结果为连接参数产生的字符串.如有任何一 ...

  6. 深入理解多线程(三)—— Java的对象头

    上一篇文章中我们从HotSpot的源码入手,介绍了Java的对象模型.这一篇文章在上一篇文章的基础上再来介绍一下Java的对象头.主要介绍一下对象头的作用,结构以及他和锁的关系. Java对象模型回顾 ...

  7. 【ContestHunter】【弱省胡策】【Round7】

    Prufer序列+高精度+组合数学/DP+可持久化线段树 Magic 利用Prufer序列,我们考虑序列中每个点是第几个插进去的,再考虑环的连接方式,我们有$$ans=\sum_{K=3}^n N^{ ...

  8. Android studio 编译失败Error:Could not read entry &#39;:app:processDebugManifest&#39; from cache taskArtifacts.b

    Android studio 编译失败 Error:Could not read entry ':app:processDebugManifest' from cache taskArtifacts. ...

  9. Jackson 转换JSON,SpringMVC ajax 输出,当值为null或者空不输出字段@JsonInclude

    当我们提供接口的时候, Ajax 返回的时候,当对象在转换 JSON (序列化)的时候,值为null或者为“” 的字段还是输出来了.看上去不优雅. 现在我叙述三种方式来控制这种情况. 注解的方式( @ ...

  10. FastReport.Net 入门

    任何一门编程技术入门体验都是以“Hello World”开始的,但我想再复杂一点的“Hello World”,才能算真正的入门.   FastReport.Net V1.2.76 ,vs2008 在 ...