Understanding Components in Angular 1.5 Jeremy Wilken
 @gnomeontherun 

Understanding Components in Angular 1.5 Jeremy Wilken @gnomeontherun About Me 2 JEREMY WILKEN SENIOR SOFTWARE ENGINEER @ TERADATA • Lives in Austin, TX • Author of Angular 2 in Action, Ionic in Action • Instructor for Angular/Frontend Technologies • Avid home brewer • Twitter/Github @gnomeontherun https://manning.com/books/angular-2-in-action https://manning.com/books/ionic-in-action 

What are Components? A better way to build apps 

Components are everywhere 

No content

component (noun): a part or element of a larger whole, especially a part of a machine or vehicle - dictionary “ 6 

HTML is a language of components Web applications are essentially the DOM come to life. 

Understanding Components in Angular 1.5 Jeremy Wilken @gnomeontherun Why Components 8 

Understanding Components in Angular 1.5 Jeremy Wilken @gnomeontherun Why Components 9 Encapsulation Acts as a single unit, easy to reason about 

Understanding Components in Angular 1.5 Jeremy Wilken @gnomeontherun Why Components 10 Encapsulation Isolation Acts as a single unit, easy to reason about Keep internal logic hidden from user 

Understanding Components in Angular 1.5 Jeremy Wilken @gnomeontherun Why Components 11 Encapsulation Isolation Declarative Acts as a single unit, easy to reason about Markup expresses application structure Keep internal logic hidden from user 

Understanding Components in Angular 1.5 Jeremy Wilken @gnomeontherun Why Components 12 Encapsulation Isolation Well Defined API Declarative Acts as a single unit, easy to reason about Expose component options consistently Markup expresses application structure Keep internal logic hidden from user 

Understanding Components in Angular 1.5 Jeremy Wilken @gnomeontherun Why Components 13 Encapsulation Isolation Well Defined API Like Native Declarative Acts as a single unit, easy to reason about Expose component options consistently Markup expresses application structure Keep internal logic hidden from user Functions like normal HTML elements 

Understanding Components in Angular 1.5 Jeremy Wilken @gnomeontherun Why Components 14 Encapsulation Isolation Well Defined API Like Native Declarative Angular 2 Acts as a single unit, easy to reason about Expose component options consistently Markup expresses application structure Keep internal logic hidden from user Functions like normal HTML elements Follows patterns of Angular 2 

The road to components How apps were built over time 

16 The road to components Evolution of Angular 1 App Design 1 Tightly coupled templates and controllers by embedding ngController directly into markup. Difficult to maintain, test, and isolate. Put it in the template! ngController 2 Coupling only increased by using $scope, often leading to controllers having inheritance. Testable, but often hard to maintain. $scope is where its all at! $scope 

17 4 Isolates the data by storing it on a property of $scope that the template cannot access, further reducing coupling, but didn’t bind data to directives controllers. Isolate model from $scope! controllerAs 5 Instead of coupling to a state, directives can glue the template and controllers together, but directives can be tricky to write, have many options, and use $scope. Make component like directives! directives 3 Less coupling by mapping templates and controllers in a state definition, limiting inheritance but still using $scope. Link controllers and templates in states! ui-router 

18 7 Provide sane defaults and simpler syntax for creating components, keeping the focus on smaller components. First class support for components! components 6 Binds the inputs from a directive directly to the controller instead of $scope, but syntax is clunky and easy to over complicate the directive. Make it possible to remove $scope in directives! bindToController 

Using Components How they are declared and consumed 

Understanding Components in Angular 1.5 Jeremy Wilken @gnomeontherun Consuming a component 20 

Understanding Components in Angular 1.5 Jeremy Wilken @gnomeontherun Syntax to declare a component 21 angular.module('App', []) .component('myComponent', { bindings: { title: '=' }, templateUrl: 'my-component.html', controller: function(MyService) { this.data = MyService.load(); }, }); 

Understanding Components in Angular 1.5 Jeremy Wilken @gnomeontherun Component Lifecycle Events 22 1 3 2 4 

Understanding Components in Angular 1.5 Jeremy Wilken @gnomeontherun Component Lifecycle Events 23 1 $onInit() Runs after the controller and bindings are initialized. Use to do any initialization for your component. 3 2 4 

Understanding Components in Angular 1.5 Jeremy Wilken @gnomeontherun Component Lifecycle Events 24 1 $onInit() Runs after the controller and bindings are initialized. Use to do any initialization for your component. 3 2 $postLink() 4 Runs after the element and all children have been linked. If you do any DOM manipulation, this is the place, but be wary of async loading of templates. 

Understanding Components in Angular 1.5 Jeremy Wilken @gnomeontherun Component Lifecycle Events 25 1 $onInit() Runs after the controller and bindings are initialized. Use to do any initialization for your component. 3 $onChanges() Runs anytime a one-way data binding is updated. Use it to trigger updates inside of a component. 2 $postLink() 4 Runs after the element and all children have been linked. If you do any DOM manipulation, this is the place, but be wary of async loading of templates. 

Understanding Components in Angular 1.5 Jeremy Wilken @gnomeontherun Component Lifecycle Events 26 1 $onInit() Runs after the controller and bindings are initialized. Use to do any initialization for your component. $onDestroy() 3 $onChanges() Runs anytime a one-way data binding is updated. Use it to trigger updates inside of a component. 2 $postLink() Runs right before the controller and scope is destroyed. If you setup event listeners or watchers, clean them up here. 4 Runs after the element and all children have been linked. If you do any DOM manipulation, this is the place, but be wary of async loading of templates. 

Types of Components There are different roles components can fill. 

Understanding Components in Angular 1.5 Jeremy Wilken @gnomeontherun Types of Components 28 

Understanding Components in Angular 1.5 Jeremy Wilken @gnomeontherun Types of Components 29 Houses the primary app framework. Should be as simple as possible. Primarily a template to display app shell. Try to avoid a controller and bindings. App 

Understanding Components in Angular 1.5 Jeremy Wilken @gnomeontherun Types of Components 30 Houses the primary app framework. Should be as simple as possible. Primarily a template to display app shell. Try to avoid a controller and bindings. Components that are loaded specifically to manage a single route, like a view. Can bind additional metadata into the component based on route url params. Should focus on setting up the route and rely on other components to render. App Routing 

Understanding Components in Angular 1.5 Jeremy Wilken @gnomeontherun Types of Components 31 Houses the primary app framework. Should be as simple as possible. Primarily a template to display app shell. Try to avoid a controller and bindings. Components that are loaded specifically to manage a single route, like a view. Can bind additional metadata into the component based on route url params. Should focus on setting up the route and rely on other components to render. Components that manage business logic, load data, and other stateful tasks. Focus on using services and maintaining data, not on presentation. Should render other components for interface. App Routing Stateful 

Understanding Components in Angular 1.5 Jeremy Wilken @gnomeontherun Types of Components 32 Houses the primary app framework. Should be as simple as possible. Primarily a template to display app shell. Try to avoid a controller and bindings. Components that are loaded specifically to manage a single route, like a view. Can bind additional metadata into the component based on route url params. Should focus on setting up the route and rely on other components to render. Components that manage business logic, load data, and other stateful tasks. Focus on using services and maintaining data, not on presentation. Should render other components for interface. Components that are primarily UI interface elements. Should be extremely decoupled from other components. May accept configurations to modify component behavior. App Routing Stateful Stateless 

Component Trees Apps can be a tree of components that mirror the DOM 

Understanding Components in Angular 1.5 Jeremy Wilken @gnomeontherun Apps as Component Trees 34 

Understanding Components in Angular 1.5 Jeremy Wilken @gnomeontherun Apps as Component Trees 35 App 

Understanding Components in Angular 1.5 Jeremy Wilken @gnomeontherun Apps as Component Trees 36 App Routes 

Understanding Components in Angular 1.5 Jeremy Wilken @gnomeontherun Apps as Component Trees 37 App Routes Stateful 

Understanding Components in Angular 1.5 Jeremy Wilken @gnomeontherun Apps as Component Trees 38 App Routes Stateful Stateless 

Components vs Directives Important distinctions and uses 

Understanding Components in Angular 1.5 Jeremy Wilken @gnomeontherun When to use a component or directive 40 Directives Components 

Understanding Components in Angular 1.5 Jeremy Wilken @gnomeontherun When to use a component or directive 41 Use to modify existing elements via attributes Directives Components 

Understanding Components in Angular 1.5 Jeremy Wilken @gnomeontherun When to use a component or directive 42 Use when compile or link is needed Use to modify existing elements via attributes Directives Components 

Understanding Components in Angular 1.5 Jeremy Wilken @gnomeontherun When to use a component or directive 43 Use for modifying the DOM Use when compile or link is needed Use to modify existing elements via attributes Directives Components 

Understanding Components in Angular 1.5 Jeremy Wilken @gnomeontherun When to use a component or directive 44 Use for modifying the DOM Use when compile or link is needed Use to modify existing elements via attributes Use when advanced configuration required Directives Components 

Understanding Components in Angular 1.5 Jeremy Wilken @gnomeontherun When to use a component or directive 45 Use when creating new elements Use for modifying the DOM Use when compile or link is needed Use to modify existing elements via attributes Use when advanced configuration required Directives Components 

Understanding Components in Angular 1.5 Jeremy Wilken @gnomeontherun When to use a component or directive 46 Use when a controller or template is needed Use when creating new elements Use for modifying the DOM Use when compile or link is needed Use to modify existing elements via attributes Use when advanced configuration required Directives Components 

Understanding Components in Angular 1.5 Jeremy Wilken @gnomeontherun When to use a component or directive 47 Use for creating DOM elements Use when a controller or template is needed Use when creating new elements Use for modifying the DOM Use when compile or link is needed Use to modify existing elements via attributes Use when advanced configuration required Directives Components 

Understanding Components in Angular 1.5 Jeremy Wilken @gnomeontherun When to use a component or directive 48 Use for creating DOM elements Use when a controller or template is needed Use when creating new elements Use with basic configuration Use for modifying the DOM Use when compile or link is needed Use to modify existing elements via attributes Use when advanced configuration required Directives Components 

Let’s Build Some Stock tracking app with components 

https://github.com/gnomeontherun/
 angular-1.5-components 50 

Compared to Angular 2 Making Angular 1 more like Angular 2 

52 Components in Angular 1 and 2 Angular 1 Angular 2 angular.module('App', []) .component('myComponent', { bindings: { title: '=' }, templateUrl: 'my-component.html', controller: function(MyService) { this.data = MyService.load(); }, }); @Component({ selector: 'my-component', templateUrl: 'my-component.html' }) export class MyComponent { @Input() title: string; constructor(service: MyService) { this.data = service.load(); } } 

Understanding Components in Angular 1.5 Jeremy Wilken @gnomeontherun Additional Resources 53 • Documentation (https://docs.angularjs.org/guide/component) • ng-metadata (https://github.com/ngParty/ng-metadata) • Exploring the Angular 1.5 .component() method
 (https://toddmotto.com/exploring-the-angular-1-5-component-method/) • Exploring Angular 1.5 Lifecycle Hooks (http://blog.thoughtram.io/angularjs/ 2016/03/29/exploring-angular-1.5-lifecycle-hooks.html) 

Thank You We’re hiring!
 austin.teradata.com @gnomeontherun 54