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

Made with Slides.com