AN INTRODUCTION TO ANGULAR 2

Ivan MatiishynSenior front-end developer @DataArt2016

Agenda

1. What is Angular22. TypeScript3. Angular2 ecosystem4. Component Architecture

What is Angular2?

4

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

5

TypeScript

6

TypeScript

ES2016

ES2015

ES5

7

TypeScript

Types:• string• number• boolean• Array• any• Custom types

Tools:• VS Code• Playground (link)

8

Angular2 ecosystem

9

Angular2 ecosystem

• @Component

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

@Component({ selector: 'my-app', template: `<h1>Hello World</h1>`})export class AppComponent { }

10

Angular2 ecosystem

• @Component (Styling)

// Styles in Metadata

import { Component } from '@angular/core';@Component({ selector: 'my-app', template: `<h1>Test</h1>`, styles: [` h1 { color: red } `]})export class AppComponent {}

// Style URLs in Metadata

import { Component } from '@angular/core';@Component({ selector: 'my-app', template: `<h1>Test</h1>`, styleUrls: [ 'app/app.component.css' ]})export class AppComponent {}

11

Angular2 ecosystem

• @Component (Lifecycle)

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({ selector: 'my-app', template: `<h1>Test</h1>`})export class AppComponent implements OnInit, OnDestroy { ngOnInit() { } ngOnDestroy() { }}

12

Angular2 ecosystem

• @Component• @NgModule

// decorator defines the metadata for the moduleimport { NgModule } from '@angular/core';// application service providers, common directivesimport { BrowserModule } from '@angular/platform-browser';// root componentimport { 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 { }

13

Angular2 ecosystem

• @Component• @NgModule• Bootstrap application

// Angular's browser platformBrowserDynamic functionimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

// application moduleimport { AppModule } from './app.module';

// bootstrappingplatformBrowserDynamic().bootstrapModule(AppModule);

14

Angular2 ecosystem

• @Component• @NgModule• Bootstrap application• Services

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

@Injectable()export class AppService { getUsers(): any[] { return [] }}

15

Angular2 ecosystem

• @Component• @NgModule• Bootstrap application• Services (DI)

@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(); }}

16

Angular2 ecosystem

• @Component• @NgModule• Bootstrap application• Services• routing, pipes, forms, http, animations…

17

Component Architecture

18

Component Architecture

• Thinking in React Components (link)

19

20

Component Architecture

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

21

22

demo

23

Angular CLI

24

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.

25

Components in Angular 1

26

from Directives to Components

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' }});

27

from Directives to Components

• 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)

28

Thank You