angular 2 in-1
TRANSCRIPT
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 [email protected]
● Let us know if you like to review it and share it with others.?