Angular Components

Web Components

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

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.