AngularJS中的组件是什么? [英] What is a component in AngularJS?

问题描述

当我发现AngularJS中有很多组件时，我正在阅读一些有关指令的信息，并且想知道指令和组件之间的区别是什么.

I was doing some reading about directives and was wondering what the distinction was between a directive and a component, when I found that there are lots of components in AngularJS.

有一个功能组件，类型组件，服务组件，过滤器组件，提供程序组件等.然后最重要的是，我发现模块组件是由指令，服务，过滤器，提供程序，模板组成的组件，全局API和测试模拟.这往往使事情变得更加混乱.在Angular文档中找不到组件"的定义来解释列出的组件类型之间的区别.

There is a function component, type component, service component, filter component, provider component, etc... Then to top it off I found that a module component is a component consisting of directives, services, filters, providers, templates, global API’s, and testing mocks. That tended to make things more confusing. I couldn't find a definition of a "component" in the Angular documentation that would explain the distinctions between the types of components listed.

那么AngularJS中的组件"到底是什么?它和可重用的代码块一样简单吗?

So what exactly is a "component" in AngularJS? Is it something as simple as reusable blocks of code?

顺便说一句，我目前正在使用Angular 1.4.2.

By the way, I'm using Angular version 1.4.2 currently.

推荐答案

在1.5版中引入了角组件.

Angular components were introduced in version 1.5.

组件是指令的简化版本.它无法进行dom操作(不是链接或编译方法)，并且替换"也消失了.

A component is a simplified version of a directive. It cannot do dom manipulation (not link or compile methods) and "replace" is gone too.

组件是"restrict:E"，并且它们是使用对象(而不是函数)进行配置的.

Components are "restrict: E" and they are configured using an object (not a function).

一个例子:

  app.component('onOffToggle', {
    bindings: {
      value: '=',
      disabled: '='
    },
    transclude: true,
    template: '<form class="form-inline">\
                       <span ng-transclude></span>\
                       <switch class="small" ng-model="vm.value" ng-disabled="vm.disabled"/>\
                     </form>',
    controllerAs: 'vm',
    controller: ['$scope', function($scope) {
      var vm = this;
      $scope.$watch("vm.disabled", function (val) {
        if (!val) {
          vm.value = undefined;
        }
      })
    }]
  });

进一步阅读: https://toddmotto.com/exploring-the-angular-1- 5-component-method/

这篇关于AngularJS中的组件是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！