I'm Tom: a software developer with 10 years experience building web and mobile apps.

My professional career includes:

Co-founded startup, built web-based touch-screen apps.

Head of mobile web at award-winning mobile app development agency.

Web-based consultancy, specialising in JavaScript development and training.

Find me everywhere as @fiznool

AngularJS: a recap

Migrating to Angular 2

Wrap-up and questions

Workshop: building a URL shortener app

A declarative web app framework.

Use custom HTML tags to attach behaviour.

Use JavaScript to create custom behaviours.

Take advantage of a large community:
AngularJS is the most popular web app framework.

Containers for your app's logic.

Manages dependencies between modules via injection.

Manages dependencies between components.

'Inject' one component into another.

Shared singletons that other components can use.

Lazy loaded - instantiated when injected.

Commonly used to manage app state.

Controllers responsible for interaction between
views and other app components.

Views use data bindings to display state.

Use {{ variable }} to bind controller data to view

Use {{ :: variable }} to bind once only

Use {{ variable | filter }} to present
data in a different format

Used to create composable, reusable building blocks

Three types:

1. Component directive

2. Attribute directive

3. Structural directive

A directive which has includes a HTML template

Used to create a custom UI element

<my-component></my-component>

Create with the .component method,
a new feature in Angular 1.5

A directive which changes the appearance or behaviour of an existing element

<input ng-model="$ctrl.name">

<button ng-click="$ctrl.submit()"></button>

Built-in Angular attribute directives include
ng-click, ng-class, ng-model

A directive which manipulates the DOM by
adding or removing DOM elements

<p ng-if="$ctrl.name">{{$ctrl.name}}</p>

<div ng-repeat="item in $ctrl.list">{{item}}</div>

Built-in Angular structural directives include
ng-if, ng-repeat

Component Directive

Attribute Directive

Insert child HTML into directive template

New for Angular 1.5: multi-slot transclusion

Collect and validate data from user

Supports all HTML form controls: input, select etc.

Use built-in HTML5 validation attributes to enforce validation rules on forms

Use ng-class to add/remove classes conditionally

Show/Hide elements in the DOM according to controller variables with ng-show/ng-hide

Use ng-if to remove elements completely from DOM

Use the ng-repeat directive to repeat DOM items

Useful for lists, tables, and other UI elements which repeat based on an array of data

The de-facto solution to flexible routing with nested views in AngularJS.

Unit & integration testing

Runs code-based tests and asserts outputs

End-to-End testing

Simulates interaction by an end user

Karma

Protractor

Heavily influenced by Todd Motto's style guide

Everything built as a component

Architect app as series of
'stateful' and 'stateless' components

We'll be building a URL shortener app

App will speak to an external API to shorten URL

We'll use component-based architecture

Full-featured, component-based framework

BIG departure from Angular 1

Writing apps using component-based architecture
with Angular 1.5 will help a lot with migration

Uses TypeScript, embraces npm and build tooling

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1>'
})

export class AppComponent { }

import * from 'angular';

const AppComponent = {
  template: '<h1>My First Angular 2 App</h1>'
};

angular
  .module('myApp')
  .component('myApp', AppComponent);

Angular 1.5

Angular 2

Angular 2

Stable, mature, big community

Will likely be phased out but not for years

Write code using
ES6/ES5

Angular 1.5

Write code using TypeScript/ES6/ES5

Bleeding edge: breaking changes!

The future of writing web apps

Can only render to DOM

Platform-agnostic: can use DOM, web workers, etc.

Angular 2 documentation is excellent.

You app needs to be component-based to have a chance for migration.

To achieve this, identify areas where you can refactor controllers/templates into components.

This blog post provides a great overview of the refactoring process, although it was written before .component() was available.

ngMigrate: resource for learning how to update Angular 1.5 code to Angular 2

ngUpgrade: official tool from Angular team to help with upgrading

Suggestion: wait a few months yet.

Angular 2 is still under active development
and breaking changes are still happening
with each new release candidate.

Write new apps and refactor existing apps using the component-based architecture

This will stand you in good stead for a future migration path to Angular 2

Keep writing Angular 1.5 code for now!

https://docs.angularjs.org/guide
https://toddmotto.com/exploring-the-angular-1-5-component-method/
https://ordina-jworks.github.io/angularjs/2016/04/25/ryan-de-gruyter-angularjs-components.html
https://github.com/toddmotto/angular-styleguide
https://github.com/chihab/angular-styleguide-sample

http://teropa.info/blog/2015/10/18/refactoring-angular-apps-to-components.html​
http://protractortest.org
http://ramonvictor.github.io/protractor/slides
https://github.com/petehunt/webpack-howto