Angular 2 and You

Back to Where it All Began

Angular 1.x description Watchers Controllers, views, services, etc. Digest Cycle (checks for changes up and down)

What’s New?

Component – These are the main blocks to create apps with. It contains logic and the view.

Directive – Similar to component, but has no template. Just makes additional operations to the existing DOM elements.

Pipe – Gives you the ability to process variables in templates in a specific manner. Service – Injectable class used to share logic between components. Forms – A complex solution for handling forms in the app. HTTP – A service built on top of the observables to handle the connection between the

front end and the API. Router – Now routing directly to the components.

What’s Missing?

No digest cycle (now uses directional graph) No $Scope

Lingua Franca

Default demo written in TypeScript Can use JavaScript or Dart (if you work for Google)

TypeScript is a superset of JavaScript that compiles into plain old JavaScript It is compiled: you can catch errors before code runs Type safety: unlike Javascript you can enforce types Closer to OOP: you can use inheritance much easier

Enough Theory

It is code time!

Quick Start

Very basic app, displays a message Index.html loads system.config.js System.config.js configures app object

Points to main.js in app folder Main opens app.module via bootstrap App.module opens app.component via bootstrap App.component displays message

Selector targets tag in index.html Template inserts html in place of tag

Hero Editor

More complex app.component Multiline template (note the ` character) Properties on AppComponent (replaces $scope)

Data usage Uses handlebars {{property}} to display data Uses [(ngModel)] to databind

Master/Detail

Adding Hero object hero-detail component

Importing hero-detail component in app.module In app.component

Adding hero data Modifying template and styles

Notice *ngFor [class.selected] (click)

Multiple Components

Adding new components for each object In app.module

Import herodetailcomponent Add herodetailcomponent declaration n

In app.component <my-hero-detail [hero]="selectedHero"></my-hero-detail>

Matches herodetailcomponent selector

Services

Adding Hero service Mock heroes

In app.component Importing hero service Adding provider Implementing OnInit

Routing

Change heroescomponent to appcomponent and make it a shell Add routing

Configure routes Add the dashboard

HTTP

Provides access to web apis Not an integral part of Angular, must be imported separately