introduction to angular2
TRANSCRIPT
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