We take developers from good to great
WE ARE THE JSLEAGUE
Intro to Vue.js
26-27th January
Dovelopers Office
Whoami
Andrei Antal
@andrei_antal
- frontend engineer, since i can remember
- web & JS technologies enthusiast
- perpetual learner
Frontend Developer, ThisDot Labs
organizer for ngBucharest
@ngBucharest
groups/angularjs.bucharest
Contents
1. Components
1.1 Component architecture
1.2 Bindings & render flow
1.3 Component communication
2. Directives and pipes
3. Services
4. RxJS and Observables
5. HTTP
6. Routing
7. Forms
8. Tooling and conclusions
The case for Angular
1 App, 3 Frameworks - Angular
The case for Angular
stuff here
Components
Module 1
The case for Angular
Component architecture
The case for Angular
Anatomy of a component
The case for Angular
import { Component } from '@angular/core';
@Component({
selector: 'app-component',
template: '<h1> Hello, world! </h1>',
})
export class AppComponent {
name = 'Andrei';
logGreet() {
console.log(`Hello ${ this.name }`);
}
}A basic component
The case for Angular
A basic component
<div>
<app-component></app-component>
</div><div>
<h1> Hello, world! </h1>
</div>The case for Angular
A basic component
@Component({
selector: 'app-component',
template: '<h1> Hello, world! </h1>',
})<div>
<app-component></app-component>
<app-component></app-component>
<app-component></app-component>
</div><div>
<h1> Hello, world! </h1>
<h1> Hello, world! </h1>
<h1> Hello, world! </h1>
</div><div>
<h1> Hello, Andrei! </h1>
<h1> Hello, Andrei! </h1>
<h1> Hello, Andrei! </h1>
</div>@Component({
selector: 'app-component',
template: '<h1> Hello, Andrei! </h1>',
})The case for Angular
A basic component
@Component({
selector: 'app-component',
template: '<h1> Hello, world! </h1>',
})<div>
<app-component></app-component>
<app-component></app-component>
<app-component></app-component>
</div><div>
<h1> Hello, world! </h1>
<h1> Hello, world! </h1>
<h1> Hello, world! </h1>
</div><div>
<h1> Hello, Andrei! </h1>
<h1> Hello, Andrei! </h1>
<h1> Hello, Andrei! </h1>
</div>@Component({
selector: 'app-component',
template: '<h1> Hello, Andrei! </h1>',
})Change once, reflect everywhere
The case for Angular
A basic component
@Component({
selector: 'app-component',
template: '<h1> Hello, world! </h1>',
})<div>
<app-component></app-component>
<app-component></app-component>
<app-component></app-component>
</div><div>
<h1> Hello, world! </h1>
<h1> Hello, world! </h1>
<h1> Hello, world! </h1>
</div><div>
<h1> Hello, Andrei! </h1>
<h1> Hello, Andrei! </h1>
<h1> Hello, Andrei! </h1>
</div>@Component({
selector: 'app-component',
template: '<h1> Hello, Andrei! </h1>',
})Change once, reflect everywhere
The case for Angular
A basic component
import { Component } from '@angular/core';
@Component({
selector: 'app-component',
template: '<h1> Hello, {{ name }}! </h1>',
})
export class AppComponent {
name = 'Andrei';
logGreet() {
console.log(`Hello ${ this.name }`);
}
}<h1>
Hello, Andrei!
</h1>The case for Angular
A basic component
import { Component } from '@angular/core';
@Component({
selector: 'app-component',
template: `
<h1> Hello, {{ name }}! </h1>
<button (click)="logGreet()">GREET</button>
`,
})
export class AppComponent {
name = 'Andrei';
logGreet() {
console.log(`Hello ${ this.name }`);
}
}<h1> Hello, {{ name }}! </h1>
<button (click)="logGreet()">
GREET
</button>Module title
Module 2
Module subtitle
Module 2
stuff here
Thank you!
email here
Voxxed Days Frontend Bucharest 2019 - 1 App, 3 Frameworks - Angular
By Andrei Antal
