Introduction to Angular2

AN INTRODUCTION TO
ANGULAR 2
Ivan Matiishyn
Senior front-end developer @DataArt
2016

Agenda
1. What is Angular2
2. TypeScript
3. Angular2 ecosystem
4. Component Architecture

What is Angular2?
• JavaScript framework for SPA (link)
• DI, Change Detection
• Everything you need for complex app
• Current state - RC5
• Server-side Rendering (link)
• Lazy Loading
• Native App Support (link)
• Web Workers
4

TypeScript
ES2016
ES2015
ES5
6

TypeScript
Types:
• string
• number
• boolean
• Array
• any
• Custom types
7
Tools:
• VS Code
• Playground (link)

Angular2 ecosystem
• @Component
9
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<h1>Hello World</h1>`
})
export class AppComponent { }

Angular2 ecosystem
• @Component (Styling)
10
// Styles in Metadata
@Component({
selector: 'my-app',
template: `<h1>Test</h1>`,
styles: [` h1 { color: red } `]
})
export class AppComponent {}
// Style URLs in Metadata
@Component({
selector: 'my-app',
template: `<h1>Test</h1>`,
styleUrls: [ 'app/app.component.css' ]
})
export class AppComponent {}

Angular2 ecosystem
• @Component (Lifecycle)
11
import { Component, OnInit, OnDestroy } from
'@angular/core';
@Component({
selector: 'my-app',
template: `<h1>Test</h1>`
})
export class AppComponent implements OnInit, OnDestroy {
ngOnInit() { }
ngOnDestroy() { }
}

Angular2 ecosystem
• @Component
• @NgModule
12
// decorator defines the metadata for the module
import { NgModule } from '@angular/core';
// application service providers, common directives
import { BrowserModule } from '@angular/platform-browser';
// root component
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ], // importing other modules
declarations: [ AppComponent ], // components, directives that are part of this module
bootstrap: [ AppComponent ] // root component that Angular should bootstrap
})
export class AppModule { }

Angular2 ecosystem
• @Component
• @NgModule
• Bootstrap application
13
// Angular's browser platformBrowserDynamic function
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// application module
import { AppModule } from './app.module';
// bootstrapping
platformBrowserDynamic().bootstrapModule(AppModule);

Angular2 ecosystem
• @Component
• @NgModule
• Services
14
import { Injectable } from '@angular/core';
@Injectable()
export class AppService {
getUsers(): any[] {
return []
}
}

Angular2 ecosystem
• @Component
• @NgModule
• Services (DI)
15
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent],
bootstrap: [ AppComponent ],
providers: [ AppService ]
})
export class AppModule { }
import { Component, OnInit } from '@angular/core';
import {AppService} from './app.service'
@Component({
selector: 'my-app',
templateUrl: 'app.component.html',
providers: [AppService]
})
export class AppComponent implements OnInit {
users: any[]
// Angular Dependency Injection
constructor( private appService: AppService){}
// Using service
ngOnInit() {
this.users = this.appService.getUsers();
}
}

Angular2 ecosystem
• @Component
• @NgModule
• Services
• routing, pipes, forms, http, animations…
16

Component Architecture
• Thinking in React Components (link)
18

Component Architecture
• Thinking in React Components (link)
• One way data flow
20

Angular CLI (GitHub)
• create a project from scratch
• scaffold components, directives, services, etc.
• lint your code
• serve the application
• run your unit tests and end to end tests.
24

from Directives to Components
26
app.directive('myApp', function () {
return {
template: '<div>{{ctrl.name}}</div>',
scope: {
name: '='
},
controller: function () {
this.name = 'John'
},
controllerAs: 'ctrl',
bindToController: true
};
});
app.component('myApp', {
template: '<div>{{$ctrl.name}}</div>',
binding: {
name: '<' // one-way binding
},
controller: function () {
this.name = 'John'
}
});

from Directives to Components
27
• Components have a well-defined public API - Inputs and Outputs
– Inputs should be using < and @ bindings
– Outputs are realized with & bindings
• Components have a well-defined lifecycle
– $onInit()
– $onChanges(changesObj)
– $doCheck()
– $onDestroy()
– $postLink()
• An application is a tree of components (minimize two-way data
binding)

Introduction to Angular2

Related slideshows

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (8)

Similar to Introduction to Angular2

Similar to Introduction to Angular2 (20)

Recently uploaded

Recently uploaded (20)

Introduction to Angular2

Editor's Notes