AngularJs中组件---component的相关总结 | GCidea's blog

JerryXia 发表于 2018-02-20 04:20:20 , 阅读 (26)

1. 前言
2. 综述
3. 创建并配置component组件
4. 基于component组件的应用程序结构
5. 使用案例

前言

　　组件component是AngularJs中一个非常重要的概念，一个项目的前端代码结构可以完全以组件component为单位进行实现，也就是说项目的不同页面（比如列表页、详情页、编辑页）或者通用功能（比如表格渲染组件、分页组件）都可以设计为一个独立的component，再通过路由配置关联起来，实现功能需求。本篇以AngularJs官方文档为根据，对组件相关内容进行总结。

综述

　　在Angular中，component是一种特殊的指令（directive），相比于directive，它的配置要更简单，这很适合于基于组件的应用程序结构，也使得使用类似于Web Components或者Angular 2风格的应用程序结构来编写代码要更容易。

组件component的优点

比原生指令（directive）配置更加简单
提供了更加健全的默认设置和最佳实践
可以优化基于component的应用结构
编写component这种directive使得升级到Angular 2更加容易

什么时候不要用component

对那些依赖于DOM元素操作和绑定监听事件的指令不要使用，因为在component中是不能直接编译链接函数的。
当需要定义配置一些更高级的directive选项时不要使用，选项比如：priority, terminal, multi-element。
当你想通过一个属性或者CSS类来触发一个指令，而不是通过一个元素来触发时，不要使用。

创建并配置component组件

　　要想注册一个component组件，可以使用Angular模型module上的.component()方法。（模型module是通过调用angular.module()来返回的。）该方法接收两个参数：

组件名称（字符串）
组件配置对象（注意，不同于.directive()方法，该方法不需要使用工厂函数）

示例

创建heroDetail.js文件,定义一个组件component

function HeroDetailController() {
	//do something
}

angular.module('heroApp').component('heroDetail', {
  templateUrl: 'heroDetail.html',
  controller: HeroDetailController,
  bindings: {
    hero: '='
  }
});

创建heroDetail.html文件,定义组件的DOM结构
1
<span>Name: {{$ctrl.hero.name}}</span>

创建index.js文件，增加控制器，为model变量初始化

angular.module('heroApp', []).controller('MainCtrl', function MainCtrl() {
  this.hero = {
    name: 'Spawn'
  };
});

创建index.html文件，定义文档结构，引入定义好的组件heroDetail(驼峰写法要转换成短横线”-“相连)
1
2
3
4
<div ng-controller="MainCtrl as ctrl">
<b>Hero</b><br>
<hero-detail hero="ctrl.hero"></hero-detail>
</div>

结果如下图：

另外，也可以使用$compileProvider在module的配置阶段引入组件。

附：directive与component的比较

[ 技术文章推荐 ]