introduction to angular2
TRANSCRIPT
![Page 1: Introduction to Angular2](https://reader033.vdocument.in/reader033/viewer/2022051709/5872b3261a28ab523c8b5f15/html5/thumbnails/1.jpg)
AN INTRODUCTION TO ANGULAR 2
Ivan MatiishynSenior front-end developer @DataArt2016
![Page 2: Introduction to Angular2](https://reader033.vdocument.in/reader033/viewer/2022051709/5872b3261a28ab523c8b5f15/html5/thumbnails/2.jpg)
Agenda
1. What is Angular22. TypeScript3. Angular2 ecosystem4. Component Architecture
![Page 3: Introduction to Angular2](https://reader033.vdocument.in/reader033/viewer/2022051709/5872b3261a28ab523c8b5f15/html5/thumbnails/3.jpg)
What is Angular2?
![Page 4: Introduction to Angular2](https://reader033.vdocument.in/reader033/viewer/2022051709/5872b3261a28ab523c8b5f15/html5/thumbnails/4.jpg)
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
![Page 5: Introduction to Angular2](https://reader033.vdocument.in/reader033/viewer/2022051709/5872b3261a28ab523c8b5f15/html5/thumbnails/5.jpg)
5
TypeScript
![Page 6: Introduction to Angular2](https://reader033.vdocument.in/reader033/viewer/2022051709/5872b3261a28ab523c8b5f15/html5/thumbnails/6.jpg)
6
TypeScript
ES2016
ES2015
ES5
![Page 7: Introduction to Angular2](https://reader033.vdocument.in/reader033/viewer/2022051709/5872b3261a28ab523c8b5f15/html5/thumbnails/7.jpg)
7
TypeScript
Types:• string• number• boolean• Array• any• Custom types
Tools:• VS Code• Playground (link)
![Page 8: Introduction to Angular2](https://reader033.vdocument.in/reader033/viewer/2022051709/5872b3261a28ab523c8b5f15/html5/thumbnails/8.jpg)
8
Angular2 ecosystem
![Page 9: Introduction to Angular2](https://reader033.vdocument.in/reader033/viewer/2022051709/5872b3261a28ab523c8b5f15/html5/thumbnails/9.jpg)
9
Angular2 ecosystem
• @Component
import { Component } from '@angular/core';
@Component({ selector: 'my-app', template: `<h1>Hello World</h1>`})export class AppComponent { }
![Page 10: Introduction to Angular2](https://reader033.vdocument.in/reader033/viewer/2022051709/5872b3261a28ab523c8b5f15/html5/thumbnails/10.jpg)
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 {}
![Page 11: Introduction to Angular2](https://reader033.vdocument.in/reader033/viewer/2022051709/5872b3261a28ab523c8b5f15/html5/thumbnails/11.jpg)
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() { }}
![Page 12: Introduction to Angular2](https://reader033.vdocument.in/reader033/viewer/2022051709/5872b3261a28ab523c8b5f15/html5/thumbnails/12.jpg)
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 { }
![Page 13: Introduction to Angular2](https://reader033.vdocument.in/reader033/viewer/2022051709/5872b3261a28ab523c8b5f15/html5/thumbnails/13.jpg)
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);
![Page 14: Introduction to Angular2](https://reader033.vdocument.in/reader033/viewer/2022051709/5872b3261a28ab523c8b5f15/html5/thumbnails/14.jpg)
14
Angular2 ecosystem
• @Component• @NgModule• Bootstrap application• Services
import { Injectable } from '@angular/core';
@Injectable()export class AppService { getUsers(): any[] { return [] }}
![Page 15: Introduction to Angular2](https://reader033.vdocument.in/reader033/viewer/2022051709/5872b3261a28ab523c8b5f15/html5/thumbnails/15.jpg)
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(); }}
![Page 16: Introduction to Angular2](https://reader033.vdocument.in/reader033/viewer/2022051709/5872b3261a28ab523c8b5f15/html5/thumbnails/16.jpg)
16
Angular2 ecosystem
• @Component• @NgModule• Bootstrap application• Services• routing, pipes, forms, http, animations…
![Page 17: Introduction to Angular2](https://reader033.vdocument.in/reader033/viewer/2022051709/5872b3261a28ab523c8b5f15/html5/thumbnails/17.jpg)
17
Component Architecture
![Page 18: Introduction to Angular2](https://reader033.vdocument.in/reader033/viewer/2022051709/5872b3261a28ab523c8b5f15/html5/thumbnails/18.jpg)
18
Component Architecture
• Thinking in React Components (link)
![Page 19: Introduction to Angular2](https://reader033.vdocument.in/reader033/viewer/2022051709/5872b3261a28ab523c8b5f15/html5/thumbnails/19.jpg)
19
![Page 20: Introduction to Angular2](https://reader033.vdocument.in/reader033/viewer/2022051709/5872b3261a28ab523c8b5f15/html5/thumbnails/20.jpg)
20
Component Architecture
• Thinking in React Components (link)• One way data flow
![Page 21: Introduction to Angular2](https://reader033.vdocument.in/reader033/viewer/2022051709/5872b3261a28ab523c8b5f15/html5/thumbnails/21.jpg)
21
![Page 22: Introduction to Angular2](https://reader033.vdocument.in/reader033/viewer/2022051709/5872b3261a28ab523c8b5f15/html5/thumbnails/22.jpg)
22
demo
![Page 23: Introduction to Angular2](https://reader033.vdocument.in/reader033/viewer/2022051709/5872b3261a28ab523c8b5f15/html5/thumbnails/23.jpg)
23
Angular CLI
![Page 24: Introduction to Angular2](https://reader033.vdocument.in/reader033/viewer/2022051709/5872b3261a28ab523c8b5f15/html5/thumbnails/24.jpg)
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.
![Page 25: Introduction to Angular2](https://reader033.vdocument.in/reader033/viewer/2022051709/5872b3261a28ab523c8b5f15/html5/thumbnails/25.jpg)
25
Components in Angular 1
![Page 26: Introduction to Angular2](https://reader033.vdocument.in/reader033/viewer/2022051709/5872b3261a28ab523c8b5f15/html5/thumbnails/26.jpg)
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' }});
![Page 27: Introduction to Angular2](https://reader033.vdocument.in/reader033/viewer/2022051709/5872b3261a28ab523c8b5f15/html5/thumbnails/27.jpg)
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)
![Page 28: Introduction to Angular2](https://reader033.vdocument.in/reader033/viewer/2022051709/5872b3261a28ab523c8b5f15/html5/thumbnails/28.jpg)
28
Thank You