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
Component Data Flow
Change Detection
Change Detection
Change Detection
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