Angular 2 in-1

1

Angular 2 in 1. Theory & Practice

Rostyslav SirykSenior Software Engineer

18.12.2017

2

1.Angular Alphabet

Essential elements & some theory

3

Angular Alphabet Letters

A Angular, AOT, Annotation

B Binding, Barrel, Bootstrap

C Component, CD, CLI

D Dependency Injection, Directive

E Event

F Forms

G Guide of Style

H Hooks

I @Input, IoC, Inject

J Just-in-time compilation

K Karma Testing

L Language Service

M Module

N ngIf, ngFor

O @Output, Observable

P Protractor, Pipes

Q Quick Start, Quality

R Reactive

S Service

T Template

U Unit Testing with

Karma

V @ViewChild

W Workflows

X Angular X

Y Angular Y

Z Zone.js

@...$...#...[...](...)[(...)]{{...}}

Core Template

Tokens

4

AngularA.k.a "Angular 2+" or "Angular 2" is a TypeScript-based open-source front-end web application platform led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS.

Current release is Angular 5.

Annotation/Decorator

A function that adds metadata to a class,

A

@Input

@Output

@Component

@NgModule

...decorator

6

Binding

Usually refers to data binding and the act

of binding an HTML object property to a

data object property.

Barrel

A way to roll up exports from several

ES2015 modules into a single convenient

ES2015 module. The barrel itself is an

ES2015 module file that re-exports

selected exports of other ES2015

B

7

ComponentAn Angular class responsible for exposing data to a view and handling most of the view’s display and user-interaction logic.

Change Detection”The basic task of change detection is to take the internal state of a program and make it visible to UI” — thoughtram.

CLI

C

8

DI

A design pattern and mechanism for

creating and delivering parts of an

application to other parts of an

application that request them.

Directive

An Angular class responsible for creating, reshaping, and interacting with HTML elements in the browser DOM. The directive is Angular's most

D

a.k.a. “property binding”

<input [name]="username">

bind input

a.k.a. “event binding”

<input

(change)="onChange($event)">

bind output

<input [(ngModel)]="username">

<p>Hello {{username}}!</p>

bind two-way

12

EventsEvent binding & handling example

HTML (Template):

<div (click)="onDivClicked($event)">Click Me</div>

TS (Component):

onDivClicked(evt) {

console.log('Clicked: ', evt);

}

E

<button

(click)="clicked($event)">

</button>

pass event

14

Forms

Template-driven forms (async)

Vs.

Reactive forms (sync)

F

15

Guide of Stylehttps://angular.io/guide/styleguide

80 %of its lifetime the code is being read, not written

G

16

Hooks of LifecycleAngular offers lifecycle hooks that provide visibility into these key life moments and the

ability to act when they occur. Angular creates it, renders it, creates and renders its

children, checks it when its data-bound properties change, and destroys it before

removing it from the DOM. https://angular.io/guide/lifecycle-hooks

H

17

Input

A directive property that can be the

target of a property binding. Data values

flow into this property from the data

source identified in the template

expression to the right of the equal sign.

Inject

An object in the Angular dependency-

injection system that can find a named

dependency in its cache or create a

I

{{i}}interpolation

<ul>

<li *ngFor="let id of ids">

{{ id }}

</li>

</ul>

1. // Interpolation examples

2. import { Component, Input } from '@angular/core';

3. import { Hero } from './hero';

4.

5. @Component({

6. selector: 'app-hero-child',

7. template: `<h3>{{hero.name}} says:</h3>

8. <p>I, {{hero.name}}, am at your service, {{masterName}}.</p>`

9. })

10. export class HeroChildComponent {

11. @Input() hero: Hero;

12. @Input('master') masterName: string;

13. }

I

20

Just-in-time (JIT) compilation

A bootstrapping method of compiling

components and modules in the browser

and launching the application

dynamically. Just-in-time mode is a

good choice during development.

Consider using the ahead-of-time mode

for production apps.

JIT vs AOT

https://blog.nrwl.io/angular-is-aot-worth-

it-8fa02eaf64d4

J

21

Karma Test Runner

Ideal for writing and running unit tests

while developing the application. It can

be an integral part of the project's

development and continuous integration

processes

Run it like this:

$ ng test

K

22

Language Service

The Angular Language Service is a way

to get completions, errors, hints, and

navigation inside your Angular templates

whether they are external in an HTML file

or embedded in annotations/decorators

in a string. The Angular Language

Service autodetects that you are opening

an Angular file, reads your tsconfig.json

file, finds all the templates you have in

your application, and then provides

L

23

Module

A cohesive block of code dedicated to a

single purpose.

import { BrowserModule } from '@angular/platform-browser';

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

import { AppComponent } from './app.component';

import { HomeComponent } from './home/home.component';

@NgModule({

declarations: [

AppComponent,

HomeComponent

],

imports: [

BrowserModule

],

providers: [],

bootstrap: [AppComponent]

})

M

24

ngModule

Helps you organize an application into

cohesive blocks of functionality. An

NgModule identifies the components,

directives, and pipes that the application

uses along with the list of external

NgModules that the application needs,

such as FormsModule.

ngClass

Attribute directive that can listen to and

N

25

OutputA directive property that can be the target of event

binding

Typescript:

@Output() change = new EventEmitter<any>();

HTML:

<input (change)="onChange($event)">

O

26

PipeIt is a function that transforms input values to output

values for display in a view. Here's an example that

uses the built-in currency pipe to display a numeric

value in the local currency.

Price: {{product.price | currency}}

ProviderCreates a new instance of a dependency for the

dependency injection system. It relates a lookup token

to code—sometimes called a "recipe"—that can create

a dependency value.

P

27

RouterRichly featured mechanism for configuring and managing the entire view navigation process, including the creation and destruction of views.

<router-outlet>Part of HTML template to render router’s output.

Reactivehttps://gist.github.com/staltz/868e7e9bc2a7b8c1f754

R

28

ServiceFor data or logic that is not associated with a specific

view to share across components, build services.

Structural DirectiveA category of directive that can shape or reshape

HTML layout by adding or removing DOM elements.

*ngIf conditional directive and *ngFor repeater

directive are well-known examples.

Storehttps://github.com/ngrx/platform

S

*ngIfcondition

<app-ex *ngIf="exists">

I do exist

</app-ex>

*ngForloop

<ul>

<li *ngFor="let id of ids">

{{ id }}

</li>

</ul>

31

Template

A chunk of HTML that Angular uses to

render a view with the support and

guidance of an Angular directive, most

notably a component.

Good article on Template Syntax.

Transpiling

A specific kind of compiling.

Typescript

Free and open-source programming

language. Main language of Angular.

T

A reference to a DOM element or directive

within a template:

<input #box (keyup)="0">

<p>{{box.value}}</p>

template reference variable

33

Unit Test (with Karma)

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { HomeComponent } from './home.component';

describe('HomeComponent', () => {

let component: HomeComponent;

let fixture: ComponentFixture<HomeComponent>;

beforeEach(async(() => {

TestBed.configureTestingModule({

declarations: [ HomeComponent ]

})

.compileComponents();

}));

beforeEach(() => {

fixture = TestBed.createComponent(HomeComponent);

component = fixture.componentInstance;

fixture.detectChanges();

U

34

View

Displays information and responds to user actions like clicks,

mouse moves, keystrokes, etc.

View is rendered under the control of one or more directives,

especially component directives and their companion

templates.

The component is important that much we can usually save it

is a view. Views can contain other views, can be loaded and

unloaded dynamically during navigation through the

application, under the control of a router.

V

35

WorkflowsThere can be different for your project and you can

benefit from each of them.

W

36

Angular XBasic Angular course you can participate.

Angular YMore advanced course on Angular.

XY

37

Zone.jsEncapsulates and intercepts an app asynchronous activity.

DOM and JavaScript have a limited number of asynchronous

activities: DOM events (clicks etc.), promises, XHR calls to

servers.

Zones intercept these activities and give a "zone client" the

possibility to respond to it before and after the async activity

finishes.

Angular runs application in a zone where it respond to

asynchronous events by checking data changes and updating

the display via data bindings. Brian Ford video explains Zones.

Z

38

Angular Core Template Tokens

@Input

@Output

@Component

@NgModule

...decorator

a.k.a. “property binding”

<input [name]="username">

bind input

a.k.a. “event binding”

<input

(change)="onChange($event)">

bind output

<input [(ngModel)]="username">

<p>Hello {{username}}!</p>

bind two-way

<button

(click)="clicked($event)">

</button>

pass event

A reference to a DOM element or directive

within a template:

<input #box (keyup)="0">

<p>{{box.value}}</p>

template reference variable

*ngIfcondition

<app-ex *ngIf="exists">

I do exist

</app-ex>

*ngForloop

<ul>

<li *ngFor="let id of ids">

{{ id }}

</li>

</ul>

{{i}}interpolation

<ul>

<li *ngFor="let id of ids">

{{ id }}

</li>

</ul>

48

2. Practice

Implementing simplest data-consuming example, using Inputs, Outputs, Services, and Pipes

See the source code here:

https://github.com/rostag/kjs

49

Task: show GitHub’s Users listhttps://api.github.com/users

[{

"login": "defunkt","id": 2,"avatar_url": "https://avatars0.githubusercontent.com/u/2?v=4","gravatar_id": "","url": "https://api.github.com/users/defunkt","html_url": "https://github.com/defunkt","followers_url": "https://api.github.com/users/defunkt/followers","following_url": "https://api.github.com/users/defunkt/following{/other_user}","gists_url": "https://api.github.com/users/defunkt/gists{/gist_id}","starred_url": "https://api.github.com/users/defunkt/starred{/owner}{/repo}","subscriptions_url": "https://api.github.com/users/defunkt/subscriptions","organizations_url": "https://api.github.com/users/defunkt/orgs","repos_url": "https://api.github.com/users/defunkt/repos","events_url": "https://api.github.com/users/defunkt/events{/privacy}","received_events_url": "https://api.github.com/users/defunkt/received_events","type": "User","site_admin": true

}, ...

50

What’sNext● Explore Angular Glossary

● Create your own project using CLI Upload it to GitHub

● Send a link to the repo to rostyslav.siryk@globallogic.com

● Let us know if you like to review it and share it with others.?