Angular 2

Angular 2

Features

  • Latest Web Standards
  • Great Developer Experience
  • Simple
  • Lightning fast
  • Works everywhere

Developer Experience

TypeScript

ES6 (ES2015)

  • Classes, modules, arrow functions

TypeScript

  • Types, decorators, generics, interfaces
  • Great editor support

Angular 2 IDEs

Modern Tooling

Declarative Templates

Template Syntax

Syntax Binding type
<h1>{{title}}</h1>
<input [value]="firstName">
Interpolation
Property
<button (click)="onClick($event)"> Event

Dependency Injection

Overview

  • Framework for resolving dependencies
  • Injectors Hierarchy
  • Flexible and easy to configure
  • Great testing experience

Component Model

Component

  • @Component decorator
  • Component Data Flow
  • Component Lifecycle Hooks
  • Host element interaction
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,
})
export class App {
  name: string = '';

  constructor() {
    this.name = 'IMWorld!'
  }
}

Components Tree

source: blog

Component Data Flow

source: blog

Change Detection

Change Detection

source: blog

Change Detection

source: blog

Data Layer

DATA CLIENTS

GraphQL

Real-time

ngrx/store

Redux

STATE MANAGEMENT

AoT Compilation

Overview

  • Render templates during Build
  • Reduce Angular bundle size
  • Speed up First Load
  • Reduce Application size

Template Compilation

  • Template Renderer
  • Change detection
  • Just-in-Time Compilation
  • Ahead-of-Time Compilation

ES5/6 Bundle

Change detection

JiT Compilation

V8 (Chrome)

JiT Compilation

Browser

Build

AoT Compilation

ES5/6 Bundle

Change Detection

V8 (Chrome)

AoT Compilation

Build

Browser

Lucidchart using JiT

Lucidchart using AoT

Multi-platform

Web, Mobile and Desktop

Isomorphic Angular 2

Angular 2 Universal

Platforms

DESKTOP

MOBILE

Ionic 2

NativeScript

Electron

MacOS 10.9

Windows 7

Linux

iOS 7

Android 4.2

[Windows 10]

iOS 7

Android 4.1

Windows 8.1

Community

Community Adoption

Why use Angular 2?

Reasons to use Angular 2

  • Improve developer productivity
  • Require great performance
  • Target Web, Mobile or Desktop
  • Vibrant community

Thanks

Thanks

Angular 2 intro

By tomwhite007

Angular 2 intro

Angular 2 is a revolutionary framework for creating applications using the latest standards and powered by the Open Source Community following the success of AngularJS. We will go over its key features and tooling. We will also introduce new support for Desktop, Mobile and Native and how you can start preparing for it Today.

  • 1,431