Angular Components

Web Components

• Reusable components for web applications
• W3C
• Custom Elements
• Shadow DOM
• HTML Imports
• HTML Templates
• Encapsulation

Angular 1: Directives

Extend the DOM with custom elements and attributes

Angular 1: Directives

Powerful, but complex

myModule.directive('directiveName', function factory(injectables) {
  var directiveDefinitionObject = {
    priority: 0,
    template: '<div></div>',
    transclude: false,
    restrict: 'A',
    templateNamespace: 'html',
    scope: false,
    controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ... },
    controllerAs: 'stringIdentifier',
    bindToController: false,
    require: 'siblingDirectiveName',
    compile: function compile(tElement, tAttrs, transclude) {
      return {
        pre: function preLink(scope, iElement, iAttrs, controller) { ... },
        post: function postLink(scope, iElement, iAttrs, controller) { ... }
      };
    },
  };
  return directiveDefinitionObject;
});
          

Angular 2

Components are the main primitive from which user interfaces are built.

Attribute directives attach behavior to elements.

Angular 1: Component

Added in 1.5 to make the transition to Angular 2 easier.

Syntactic sugar for creating component directives.

Angular 1: Component

• Restricted to elements. Continue to use directive for things that modify an existing DOM element.
• Defaults controllerAs to $ctrl
• Binds inputs to the controller by default (bindToController: true)