11 Encapsulation Isolation Declarative Acts as a single unit, easy to reason about Markup expresses application structure Keep internal logic hidden from user
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
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
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
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
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
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
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.
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.
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.
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
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
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
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
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
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
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
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
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
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
gnomeontherun
yuki_ink
kazz24s
akahane92
kenta_hi
hinono
sadnessojisan
ra0kley
uhyo
kenjikondobai
.jpeg){kind=avatar}
arthur1
iotengineer22
ohnoeight
lauravandoore
maltzj
destraynor
mclloyd
brianwarren
bcantrill
iamctodd
addyosmani
bkeepers
soudai
chriscoyier
marcelosomers
