2015-11-04 7 views
6

Я читал о директивах и задавался вопросом, что такое различие между директивой и компонентом, когда я обнаружил, что в Angularjs есть много компонентов.Что такое компонент в Angularjs?

Существует компонент функции, компонент типа, компонент службы, компонент фильтра, компонент поставщика и т. Д. Затем, после этого, я обнаружил, что компонент модуля представляет собой компонент, состоящий из директив, служб, фильтров, поставщиков, шаблоны, глобальные API и тестовые макеты. Это, как правило, делало вещи более запутанными. Я не смог найти определение «компонента» в документации на углы, что объясняло бы различия между перечисленными типами компонентов.

Так что же такое «компонент» в Angularjs? Это что-то такое же простое, как многократные блоки кода?

Кстати, в настоящее время я использую Угловую версию 1.4.2.

+3

Вы можете вызвать компонент любую вещь, которая могла бы быть компонуемы. Вы можете определить директиву и составить ее с другим членом вашего кода. Обычно люди называют многоразовые блоки как компоненты. – Errorpro

ответ

3

Исходя из ориентированного на ООП фона, я пытался различать различные компоненты Angularjs, включая модули. Я думаю, что лучший ответ, который я нашел о модулях был 13 Steps to Angularjs Modularization

В AngularJS контексте модульности является организация функцией вместо типа. Для сравнения, заданные массивы времени = [60, 60, 24, 365] и money = [1, 5, 10, 25, 50], оба имеют один и тот же тип, но их функции совершенно разные.

Это означает, что ваши компоненты (контроллеры, фильтры, директивы) будут жить в модулях вместо того, где они сейчас живут.

Так что да, компоненты являются блоками повторно используемого кода, но в контексте javascript шаблон модуля является повторяющейся структурой для этих блоков кода в Angularjs. Способ реализации этих модулей дает вам тип компонента, то есть структура реализации контроллеров будет отличать его от службы или поставщика, если это имеет смысл. Я также думаю, что документы Angularjs должны были рассмотреть это.

Вот основной шаблон я вижу повторен в Angularjs код:

(function() { 
    // ... all vars and functions are in this scope only 
    // still maintains access to all globals 
}()); 

Вот отличная статья на Javascript Module Pattern in depth.

8

Угловые компоненты были представлены в версии 1.5.

Компонент представляет собой упрощенную версию директивы. Он не может выполнять манипуляции с dom (не ссылки или методы компиляции), а «замена» тоже не работает.

Компоненты «ограничить: E», и они сконфигурированы с использованием объекта (а не функции).

Пример:

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/

Смежные вопросы