Angular 1.5 

.component()

Background

• HTML
• $scope
• ng-controller
• ng-include

Directives

• template
• controller
• scope
  • true
  • false
  • isolate
• restrict: "EACM"
• require: "?^foo"

• compile()
• controller()
• link()
  • pre
  • post
• controllerAs
• bindToController

Component

• template
• controller
• bindings
• require

let fooListTemplate = `
<ul>
  <li ng-repeat="foo in $ctrl.foos">
    {{foo.name}}: {{ foo.cost }}
  </li>
</ul>
Total cost: {{ $ctrl.total }}
`;

function FooListController() {
  let sum = (acc, val) => acc + val;
  this.total = this.foos.reduce(sum, 0);
}

// Register the component declaration

module.component("fooList", {
  template: fooListTemplate.html,
  controller: FooController,
  bindings: { foos: '<' }
});

----------------------------------------

<!-- Use the component -->
<foo-list foos="$ctrl.data.foos"></foo-list>

So what???

• Best practices
• Fewer Choices - Reduced complexity
• Encapsulation
  • template
  • controller
• Less boilerplate (than directives)

• Well defined inputs and outputs
• Only modify owned data
  • Isolate scope
  • One-time binding
• Avoid $scope abuse
• Lifecycle hooks which mimic ng2 components

Components all

the

way

down!