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

More Related Content

What's hot (20)

Viewers also liked (8)

Similar to Introduction to Angular2 (20)

Recently uploaded (20)

Introduction to Angular2

Editor's Notes