Angular 2 in-1

1
Angular 2 in 1. Theory & Practice
Rostyslav Siryk
Senior 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
@...
$...
#...
[...]
(...)
[(...)]
{{...}}
Core Template
Tokens

4
Angular
A.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

@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
B

7
Component
An 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.
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.
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
Events
Event 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 Style
https://angular.io/guide/styleguide
80 %
of its lifetime the code is being read, not
written
G

16
Hooks of Lifecycle
Angular 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
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-
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:
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
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
N

25
Output
A directive property that can be the target of event
binding
Typescript:
@Output() change = new EventEmitter<any>();
HTML:
<input (change)="onChange($event)">
O

26
Pipe
It 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}}
Provider
Creates 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
Router
Richly 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.
Reactive
https://gist.github.com/staltz/868e7e9bc2a7b8c1f75
4
R

28
Service
For data or logic that is not associated with a specific
view to share across components, build services.
Structural Directive
A 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.
Store
https://github.com/ngrx/platform
S

*ngIf
condition
<app-ex *ngIf="exists">
I do exist
</app-ex>

*ngFor
loop
<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
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
Workflows
There can be different for your project and you can
benefit from each of them.
W

36
Angular X
Basic Angular course you can participate.
Angular Y
More advanced course on Angular.
XY

37
Zone.js
Encapsulates 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

a.k.a.
“property binding”
<input [name]="username">
bind input

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 list
https://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.
?

Angular 2 in-1

More Related Content

What's hot (20)

Similar to Angular 2 in-1 (20)

More from GlobalLogic Ukraine (20)

Recently uploaded (20)

Angular 2 in-1