Quick and dirty introduction to main concepts of Angular Web applications. These slides where accompanied by a workshop that took place in Decerto for fellow professionals.
2. Angular 4
Quick introduction for AngularJS 1.5 developers
a.k.a.
How to not write a large or scalable web applications.
Paweł Żurowski <zurowski.pawel@gmail.com> 2017-03-23
3. Angular 4
Quick introduction for AngularJS 1.5 developers
a.k.a.
How to not write a large or scalable web applications.
Paweł Żurowski <zurowski.pawel@gmail.com> 2017-03-23
4. Angular 4
Quick introduction for AngularJS 1.5 developers
a.k.a.
How to not write a large or scalable web applications.
Paweł Żurowski <zurowski.pawel@gmail.com> 2017-03-23
5. 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
Paweł Żurowski <zurowski.pawel@gmail.com> 2017-03-23
6. @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
Paweł Żurowski <zurowski.pawel@gmail.com> 2017-03-23
7. @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
Paweł Żurowski <zurowski.pawel@gmail.com> 2017-03-23
8. 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
10. 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…
17. 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
18. Task 0 – Hello world (remind)
• npm install --global @angular/cli@latest # first time only
• ng new --ng4 my-project # first time only
# Let scripts do the work…
23. Task 0 – Hello world (remind)
• npm install --global @angular/cli@latest # first time only
• ng new --ng4 my-project # first time only
# Let scripts do the work…
24. There are languages
• ClojureScript
• CofeeScript
• Dart
• Ecmascript 5
• Ecmascript 2015
• Ecmasrcipt 2016
• Elm
• Typescript
34. There is Javascript Fatigue
https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f
35. 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
36. 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
37. Task 0 – Hello world (remind)
• npm install --global @angular/cli@latest # first time only
• ng new --ng4 my-project # first time only
38. Boilerplate, scripts, blueprints
• npm run build
• npm run test
• npm run lint
• npm run e2e
• npm run ng make-this-awesome
• npm run start -- --port 4444
• npm run ng -- generate <class | component | directive | enum |
guard | interface | module | pipe | service> [options] name
39. 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
41. Task 1 – Count to a random number
AppComponent
CounterComponent
RandomNumberGeneratorService
Plain old button
42. Task 1 – Count to a random number
• Create counter component
• Create Random Number Generator Interface
• Define the inferface
• Create a RNG Service
• Implement counter
• Generate random number
• Handle click
43. Task 1 – create counter component
• npm run ng -- generate component --inline-style --inline-template
counter
52. 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);
}
}
}
How to not write a large or scalable web applications.
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!
58. Task 2 – Multiple count to a random numbers
Task 1
RNG name and link
Random
independent
counters
Configurable
59. Task 2 – Multiple count to a random numbers
• Create another RNG service (this time configurable)
• Multiple counters
• Inject service
• Make service injection configurable which depends on environment
60. Task 2 – Create another RNG service
• npm run ng -- generate service lcg-rng-factory