Angular 2

2 is a bigger number than 1, True Story.

Why it be
What it do
How you do

Angular 2 is pretty different

Consider the Timeline

• Angular was first developed in 2009
  • Knockout, backbone, jQuery
• Then came HTML5 and angular and frameworks!

Why the changes

New Things

• ES6
• Isomorphic rendering
• More complex apps with demanding performance requirements
• Web Components
• Explosion of useful Javascript libraries

Why the changes

DOM

&
DATA

The dom is kinda like this

Angular 1.x was kind of  like this

Interacting

with

the dom

by Angular 2

Components

Components are how things are built in angular.

• Applied to a class using a decorator
• Selector is the name used to identify the component to other components 
• Mustache brackets here to stay

Template Bindings

• Bind to any DOM property

• Bind to nested properties

• Styles and classes included

Template Bindings

• Handle DOM event
  • Any DOM event

• Two way binding
  • One way bind to title
  • handle titleChanged DOM event

#Variables & Embedded templates

• Variables allow us to reference elements by naming them with a #
• * will turn the current element into an embedded template

Why the *

These are the same

Built in Directives - pt 1

• ngIf toggles whether elements are on the DOM.
• Use [style.display] to toggle the display property

ngSwitch for conditional layouts

Built in Directives - pt 2

ngClass for multiple classes

*ngFor for repeating an element

Nested Components

Data

and

Services

by Angular 2

JavaScript

Typescript

Typescript

Http

Some Gotchas

• Silent errors when you forget to include something as a directive or a provider
• "A browser ignores HTML tags and attributes that it doesn't recognize. So does Angular"

  • directives: [HeroDetailComponent]

• * are important on certain directives
• Many examples are in Typescript
• Providers are nested, re-registration makes a new instance
• HTTP gives you an observable, not a promise

Prepping for 1.x to 2

• Migrate to Typescript
• Use 'require' or 'import' via gulp/webpack/babel 
• Write components using directives
  • templateUrl
  • Controller (ControllerAs)
  • Isolated scope
  • Nest them and pass data through the isolate scope
• Use the UpgradeAdapter 

Angular 1 component

See component API in Angular 1.5

Summary

• More Javascript less 'Angular'
  • Flexibility
  • Interoperability
  • Swappability
  • Modifiability
• Modular component tree structure
• More explicit in its syntax
• Still Learning curve
• Keeping:
  • Dependency Injection
  • Declarative template syntax
  • Toolbox of useful things like HTTP

Jeremy Robertson

Jeremy@devmounta.in