angularjs component
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:
- for directives that need to perform actions in compile and pre-link functions, because they aren't available
- when you need advanced directive definition options like priority, terminal, multi-element
- when you want a directive that is triggered by an attribute or CSS class, rather than an element
component解决了什么问题:
- app中的某个部分如何重用
- app中各部分之间的scope不是隔离的
- component可以自由的重复使用
- index.html被简化了,细节的实现都分离出来了,提高了可维护性
- component是隔离的,不受外界影响,同时也不会影响app中的其他部分
- 可以独立的测试我们的component
Comparison between Directive definition and Component definition
component使用
- 文件名建议:xxxComponent.component.js
- component名字规则和directive一样,定义的时候使用驼峰样式(myAwesomeComponent),模板中使用的时候使用-分割(my-awesome-component)
- template中使用controller的实例$ctrl替代scope来访问数据,这个实例别名可以自定义 - 使用controllerAs属性
- 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属性, 支持:
@
字符值 - input<
单向绑定 - input&
回调传递 - 父组件的方法,用于向上的交互 - output=
双向绑定 - 设计原则中不推荐使用
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的更多相关文章
- 一篇文章看懂angularjs component组件
壹 ❀ 引 我在 angularjs 一篇文章看懂自定义指令directive 一文中详细介绍了directive基本用法与完整属性介绍.directive是个很神奇的存在,你可以不设置templa ...
- angularjs中directive指令与component组件有什么区别?
壹 ❀ 引 我在前面花了两篇博客分别系统化介绍了angularjs中的directive指令与component组件,当然directive也能实现组件这点毋庸置疑.在了解完两者后,即便我们知道co ...
- Using RequireJS in AngularJS Applications
http://www.sitepoint.com/using-requirejs-AngularJS-applications/ While writing large JavaScript appl ...
- 升级 AngularJS 至 Angular
Victor Savkin 大神撰写了一系列文章详细介绍如何升级 AngularJS 应用: NgUpgrade in Depth Upgrade Shell Two Approaches to Up ...
- 了解angularjs中的生命周期钩子函数$onInit,$onChange,$onDestory,$postLink
壹 ❀ 引 我在前面花了三篇文章用于介绍angularjs的指令directive,组件component,并专门花了一篇文章介绍directive与component的不同,其中提到在compon ...
- angularjs 一篇文章看懂自定义指令directive
壹 ❀ 引 在angularjs开发中,指令的使用是无处无在的,我们习惯使用指令来拓展HTML:那么如何理解指令呢,你可以把它理解成在DOM元素上运行的函数,它可以帮助我们拓展DOM元素的功能.比如 ...
- angular directive 深入理解
由于业务的需要,最近angular 的diretive 研究的比较多,有和同事一起共同协作开发scada的项目, 对directive 有了进一步更深的理解. 感觉才开始真正理解了这句话的意思: In ...
- angularjs directive and component 指令与组件 ( 1.5.0 以后 )
之前写过一篇了 http://www.cnblogs.com/keatkeat/p/3903673.html 但某些部分写的不太清楚,甚至有点错误,所以今天特地在这里再来谈谈. 这篇主要是说指令的隔离 ...
- AngularJs学习笔记--Understanding the Model Component
原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model 在angular文档讨论的上下文中,术语“model”可以 ...
随机推荐
- Windows:C:\Windows\System32\drivers\etc\hosts
原文地址:http://zhumeng8337797.blog.163.com/blog/static/100768914201001983953188/. host是一个没有扩展名的系统文件,可以用 ...
- 使用DDMS中的内存监测工具Heap来优化内存
最近在做一个照片墙的应用,涉及到很多知识,其中难点在于如何应对数量庞大的图片,这就涉及到内存管理的知识了.今天介绍的工具是DDMS中自带的Heap,它可以显示出当前引用占用的内存,剩余的内存等信息.下 ...
- 《例说XBee无线模块开发》
<例说XBee无线模块开发> 基本信息 原书名:The Hands-on XBee Lab Manual:Experiments that Teach you XBee Wireless ...
- 《C#本质论(第4版)》
<C#本质论(第4版)> 基本信息 作者: (美)Mark Michaelis Eric Lippert 译者: 周靖 出版社:人民邮电出版社 ISBN:9787115336750 ...
- 关于MySQL的行转列的简单应用(二)---group函数
MySQL的行转列.列转行.连接字符串 concat.concat_ws.group_concat函数用法使用方法:CONCAT(str1,str2,…) 返回结果为连接参数产生的字符串.如有任何一 ...
- 深入理解多线程(三)—— Java的对象头
上一篇文章中我们从HotSpot的源码入手,介绍了Java的对象模型.这一篇文章在上一篇文章的基础上再来介绍一下Java的对象头.主要介绍一下对象头的作用,结构以及他和锁的关系. Java对象模型回顾 ...
- 【ContestHunter】【弱省胡策】【Round7】
Prufer序列+高精度+组合数学/DP+可持久化线段树 Magic 利用Prufer序列,我们考虑序列中每个点是第几个插进去的,再考虑环的连接方式,我们有$$ans=\sum_{K=3}^n N^{ ...
- Android studio 编译失败Error:Could not read entry ':app:processDebugManifest' from cache taskArtifacts.b
Android studio 编译失败 Error:Could not read entry ':app:processDebugManifest' from cache taskArtifacts. ...
- Jackson 转换JSON,SpringMVC ajax 输出,当值为null或者空不输出字段@JsonInclude
当我们提供接口的时候, Ajax 返回的时候,当对象在转换 JSON (序列化)的时候,值为null或者为“” 的字段还是输出来了.看上去不优雅. 现在我叙述三种方式来控制这种情况. 注解的方式( @ ...
- FastReport.Net 入门
任何一门编程技术入门体验都是以“Hello World”开始的,但我想再复杂一点的“Hello World”,才能算真正的入门. FastReport.Net V1.2.76 ,vs2008 在 ...