Quick introduction to Angular 4 for AngularJS 1.5 developers

Angular 4
Quick introduction for AngularJS 1.5 developers
Paweł Żurowski <zurowski.pawel@gmail.com> 2017-03-23

Angular 4
Quick introduction for AngularJS 1.5 developers
a.k.a.
How to not write a large or scalable web applications.

Agenda
• @AboutMe()
• Javascript ecosystem (prepare the environment during this part)
• Trends
• Modules
• Javascript fatigue
• Workshop
• Boilerplate
• Blueprints
• Typescript/Angular
• Building blocks – service, component, dependency injection
• Q&A

@AboutMe()
• I started programming 18 years ago
• I code for money from the 9 years
• I code for Decerto 3 years
• I was programming in Pascal, C, PHP, Javascript, Bash, SQL, C++, Java, Typescript
• I did some AJAX before it was popular
• I did some UX before it was so popular
• I did some Devops before it was so named
• I was programming SPAs over the last 4 years in AngularJS
• I observe the development of Angular 2 since AngularJS 1.5-beta.0
• I am doing SPA in Angular 2 the last few months
• I switch to Angular 4 in the coming weeks

Workshop (It is the time to prepare environment)
• You should have installed:
• node >= 6.9.0 (https://nodejs.org/  download and install LTS)
• npm >= 3.0.0 (bundled with node)
• git
• bash (winbash, gitbash, zsh)
• typescript aware IDE
• Intellij Idea Ultimate / Intellij Idea Ultimate EAP
• Microsoft Visual Studio Code
• Microsoft Visual Studio
• Atom
• Your favorite

Task 0 – Hello world
• npm install --global @angular/cli@latest # first time only
• ng new --ng4 my-project # first time only
# Let scripts do the work…

Trends trends trends trends trends

Trends trends trends trends trends trends

Trends…
• Trends proves (almost) every thesis
• angular and react in game
• It’s hard to say which is better
• Angularjs migrates to Angular
• Jquery still popular but it is going down

Task 0 – Hello world (remind)
# Let scripts do the work…

There are frameworks
• Angular
• AngularJS
• Aurelia
• Backbone
• CycleJs
• Elm
• EmberJs
• ExtJs
• Knockout
• Meteor
• Mithril
• Polymer
• Preact
• React
• VueJs

There are packages managers
• Bower
• Npm
• (WebJars)
• Yarn

(modules without Javascript ecosystem)

There are languages
• ClojureScript
• CofeeScript
• Dart
• Ecmascript 5
• Ecmascript 2015
• Ecmasrcipt 2016
• Elm
• Typescript

There are compilers/transpilers
• Babel
• Clojure
• CoffeScript
• Dart
• Elm
• Emscripten
• Google Closure Compiler
• Typescript

There are static analyzis tools
• Codelyzer
• JSHint
• JSLint
• TSLint

There are template engines
• HandleBars
• Jade
• JSX

There are unit test frameworks
• Ava
• Chai
• Jasmine
• Mocha
• Qunit
• Sinon.js
• Wallaby*

There are styling languages/tools
• CSS
• compass
• Less
• PostCSS
• Sass
• Scss
• Stylus

There are boilerplate tools
• @angular/cli
• Seed projects
• yeoman

There are task runners
• (Gradle)
• Grunt
• Gulp
• (Maven)
• (Makefile)
• Npm

There are bundlers
• Brocholi
• Brunch
• Browserify
• Google Closure
• JSPM
• Rollup
• Webpack
• SystemJS

There are core JS Libraries
• Bacon
• Bluebird
• D3
• Hammerjs
• Jquery
• Lodash
• Lunr.js
• Modernizr
• Moment
• Rambda
• RxJs
• Three.js
• Underscore
• Zepto

There is Javascript Fatigue
https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f

Angular
• @angular/cli*
• CSS or SCSS – the only one true decision to make
• Codelyzer
• Jasmine
• Npm
• RxJs
• Webpack
• TSLint
• Typescript*
* You can replace, but you propably don’t want to

Workshop/Demo
• You should have installed:
• node >= 6.9.0 (https://nodejs.org/  download and install LTS)
• npm >= 3.0.0 (budled with node)
• git
• bash (winbash, gitbash, zsh)
• typescript aware IDE
• Intellij Idea Ultimate / Intellij Idea Ultimate EAP
• Microsoft Visual Studio Code
• Microsoft Visual Studio
• Atom
• Your favorite

Task 0 – Hello world (remind)

Typescript (open app.component.ts)
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'app works!';
}
ES2015 import modules Exported symbol from module Module in node_modules
Decorator
(not an annotation!)
POJO
ES2015 export modules
Syntactic sugar for
Object with prototypal inharitance
String property on instance

Task 1 – Count to a random number

AppComponent
CounterComponent
RandomNumberGeneratorService
Plain old button

• Create counter component
• Create Random Number Generator Interface
• Define the inferface
• Create a RNG Service
• Implement counter
• Generate random number
• Handle click

Task 1 – create counter component
• npm run ng -- generate component --inline-style --inline-template
counter

Typescript (open counter.component.ts)
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-counter',
template: `
<p>
counter Works!
</p>
`,
styles: []
})
export class CounterComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
Template string
Constructor
Method Interface

Task 1 – create interface
• npm run ng -- generate interface random-number-generator

Typescript (replace random-number-generator.ts)
export interface RandomNumberGenerator {
readonly name: string;
readonly infoUrl: string;
next (state: any): {state: any, value: number};
reset (seed?: any): any;
}
Readonly property… …of type string
Return type
OptionalMethod signature Value of any type

(Simpliest ever random number generator)

(Simpliest ever random number generator)
https://xkcd.com/221/

Task 1 – create service
• npm run ng -- generate service xkcd-rng

import {Injectable} from '@angular/core';
import {RandomNumberGenerator} from './random-number-generator';
@Injectable()
export class XkcdRngService implements RandomNumberGenerator {
readonly infoUrl = 'https://xkcd.com/221/';
readonly name = 'XKCD Random Number Generator';
reset() {
return null;
}
next(state: any = null) {
return {state, value: 4};
}
}
Typescript (replace xkcd-rng.service.ts)
Default value
Property shorthand

Angular (replace counter.component.ts)
import {Component, Input, Output, EventEmitter} from '@angular/core';
@Component({
selector: 'app-counter',
template: `{{ tick | async }}`,
})
export class CounterComponent {
@Input() counter = 5;
@Input() delay = 90;
@Output() finish = new EventEmitter<boolean>();
@Output() tick = new EventEmitter<number>();
public start(): void {
this.count(0);
}
private count(n: number): void {
this.tick.emit(n);
if (n >= this.counter) {
this.finish.emit(true);
} else {
setTimeout(() => this.count(n + 1), this.delay);
}
}
}
It will count to 5
unless you specify
otherwise
It will be placed in <app-counter> element
It will display current tick number whenever it comes
It’s a component
It will wait 90ms
between ticks
unless you specify
otherwise
It will tell you about finish
It will tell you about tick
You can start counting down
Look! There is no $apply!

Task 1 – generate random number

Angular (replace app.component.ts, add XkcdRngService in providers in AppModule)
import {Component, OnInit} from '@angular/core';
import {XkcdRngService} from './xkcd-rng.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
counter: number;
constructor(public xkcd: XkcdRngService) {
}
ngOnInit(): void {
this.counter = this.xkcd.next().value;
}
}
Dependency injection
Assigned to component
if public/private specified
Lifecycle hook
providers: [
XkcdRngService,
],

Angular (replace app.component.{html,css}
<section>
<button (click)="cnt.start()">Start</button>
<h2>
<app-counter #cnt
[counter]="counter"></app-counter>
</h2>
</section>
h2 {
display: inline-block;
margin: 0;
}
button {
margin: 10px;
padding: 10px;
}
Input in app-counter Property from app-root
Handle output
Local template variable
- definition and usage
Access target component API

Task 2 – Multiple count to a random numbers

Task 1
RNG name and link
Random
independent
counters
Configurable

• Create another RNG service (this time configurable)
• Multiple counters
• Inject service
• Make service injection configurable which depends on environment

Task 2 – Create another RNG service
• npm run ng -- generate service lcg-rng-factory

Typescript / Angular (replace lcg-rng-factory.service.ts)
import {Injectable} from '@angular/core';
import {RandomNumberGenerator} from './random-number-generator';
interface LcgState { prev: number; multiplier: number; increment: number; modulo: number; }
const LCG_INFO_URL = 'https://en.wikipedia.org/wiki/Linear_congruential_generator';
@Injectable()
export class LcgRngFactoryService {
private createLcg(name: string, initialState: LcgState): RandomNumberGenerator {
return { infoUrl: LCG_INFO_URL, name,
reset: (seed = 1) => Object.assign({}, initialState, {prev: seed}),
next: (state: LcgState = initialState) => {
const prev = (state.multiplier * state.prev + state.increment) % state.modulo;
return {value: prev, state: Object.assign({}, state, {prev})};
}
};
}
public glibc() { return this.createLcg('glibc', {prev: 1, multiplier: 1103515245, increment: 12345, modulo: 2 ** 31 - 1}); }
public random0(){ return this.createLcg('random0', {prev: 1, multiplier: 8121, increment: 28411, modulo: 134456}); }
public minstd(){ return this.createLcg('minstd_rand', {prev: 1, multiplier: 48271, increment: 0, modulo: 2 ** 31 - 1}); }
}
Local
interface
Local
constant
Block
scope
variable Fat arrow function ("fart") – function without this

Angular (replace app.component.html)
<h1>RNG: <a [href]="rng.infoUrl">{{ rng.name }}</a></h1>
<section *ngFor="let counter of numbers">
<button (click)="cnt.start()">Start</button>
<h2>
<app-counter #cnt
[counter]="counter"></app-counter>
</h2>
</section>
ng-repeat replacement
Local variable
No changes here

Task 2 – Injectable RNG service

Angular – DI (replace app.component.ts body)
public numbers: number[];
private rngState: any;
constructor(public xkcd: XkcdRngService, @Inject('RNG') public rng: RandomNumberGenerator) { }
ngOnInit(): void {
this.rngState = this.rng.reset();
const length = 1 + this.xkcd.next().value % 10;
this.numbers = Array.from({length}).map(() => this.random());
}
private random(n = 50): number {
const {state, value} = this.rng.next(this.rngState);
this.rngState = state;
return value % n;
}
DI symbol

export function rngFactory(lcg: LcgRngFactoryService, x: XkcdRngService){
if(environment.production){
return lcg.glibc();
}else{
return x;
}
}
@NgModule({
// ...
providers: [
XkcdRngService,
LcgRngFactoryService,
// {provide: 'RNG', useClass: XkcdRngService},
{provide: 'RNG', useFactory: rngFactory, deps: [LcgRngFactoryService, XkcdRngService]},
],
// ...
})
export class AppModule { }
Angular – DI (replace app.module.ts providers)
DI symbol
Comes from src/enviroments/*.ts

Serve in two variants of the enviroment
• npm run start -- --port 4444
• npm run start -- --port 4444 -e prod

Q&A

Quick introduction to Angular 4 for AngularJS 1.5 developers

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Quick introduction to Angular 4 for AngularJS 1.5 developers (20)

Recently uploaded (20)

Quick introduction to Angular 4 for AngularJS 1.5 developers