Skip to content

Latest commit

 

History

History
377 lines (301 loc) · 7.25 KB

ea4.md

File metadata and controls

377 lines (301 loc) · 7.25 KB

class: center, middle

Angular

https://angular.io/

--- web, mobile, desktop ---

class: center, middle

Mintapélda

libra-client

Létrehozás

$ npm install @angular/cli -g
$ ng help
$ ng new libra-client -d
$ ng new libra-client --minimal --skip-install 
--skip-tests --skip-git --prefix libra
$ cd libra-client
$ npm install
$ ng serve

→ http://localhost:4200/

Fontosabb fájlok

  • package.json
  • angular.json
  • src/environments könyvtár
  • src/assets könyvtár
  • src/main.ts
  • srrc/app/app.module.ts
  • app/app.component.ts

Alapfogalmak

  • Modul (NgModule): összefüggő kódrészletek halmaza
    • deklarált entitások
    • exportált entitások
    • importált modulok
    • publikált service-ek (providers)
    • bootstrap
  • Komponens: a UI egy részéért felelős
    • selector
    • template/templateUrl
    • styles/stylesUrl

Milyen működést szeretnénk és mi kell ehhez?

  • localhost:4200/books →
    • hozzáférés a szerverhez, könyvek lekérdezése
    • összes könyv megjelenítése
  • localhost:4200/books/<ISBN>
    • hozzáférés a szerverhez és a könyv lekérdezése
    • könyv adatainak megjelenítése

Szolgáltatások

//libra-api.service.ts
import { Injectable } from '@angular/core';

@Injectable()
export class LibraApiService {
  constructor() { }
}
//app.module.ts
import { LibraApiService } from './libra-api.service';
//...
    providers: [LibraApiService],

Modell leíró

//models.ts
export interface IBook {
    title : string;
    isbn : string;
}

HTTP kommunikáció

//app.module.ts
import { HttpClientModule } from '@angular/common/http';
//...
 imports: [ 
    //...
    HttpClientModule
  ],

HTTP kommunikáció 2

//libra-api.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { IBook } from './models';
import { Observable } from 'rxjs';

@Injectable()
export class LibraApiService {
  constructor(private http: HttpClient) { }

  public getBooks(): Observable<IBook[]> {
    return this.http.get<IBook[]>("http://localhost:3000/books");
  }
  public getBook(isbn: string): Observable<IBook> {
    return this.http.get<IBook>(`http://localhost:3000/books/${isbn}`);
  }
}

Observable

  • Reaktív programozás: aszinkron programozási paradigma (RxJS)
  • Observable: típusos stream
    • 1 → 2 → 4 → 6 ... (Observable<number>)
    • Aszinkron módon érkeznek az új értékek
  • Hány eleme lesz?
  • Használat:
let a: Observable<number>
a.subscribe(value => {
  console.log(value);
});

Observable 2

Manuális leiratkozás

let subscription = a.subscribe(...);
subscription.unsubscribe();

complete esemény: observable vége → automatikus leíratkozás

Könyvek komponens

$ ng g c --help
$ ng g c books --flat --skip-tests -m app

→ books.component.ts

→ books.component.scss

→ books.component.html

//app.module.ts
//...
  declarations: [
    AppComponent,
    BooksComponent
  ],

Könyvek komponens 2

//books.component.ts
@Component({
  selector: 'libra-books',
  templateUrl: './books.component.html',
  styleUrls: ['./books.component.scss']
})
export class BooksComponent implements OnInit {

  constructor(private apiSvc: LibraApiService) { }

  ngOnInit() {
    this.apiSvc.getBooks().subscribe(result => this.books = result);
  }

  books: IBook[]
}

Könyvek komponens 3

<!-- books.component.html --> 
<ul *ngIf="books">
  <li *ngFor="let book of books">
    {{book.title}} (ISBN: {{book.isbn}})
  </li>
</ul>
//app.component.ts
//...
    template: `<libra-books></libra-books>`,

Könyvek komponens 4

  • Kezdetben a books tagváltozó értéke undefined
  • ngOnInit-ben aszinkron hívás → egyszer később megváltozik egy valós listára
  • Komponens osztály és HTML sablon összekötése
  • angular change detection
    • Változásértesítés
    • Mit néz?
    • Mikor fut le?

Komponensek összefoglaló

  • Selector (pl. libra-books)
    • Bent marad a végső HTML-ben → mihez kezd vele a böngésző?
  • Komponens osztály (@Component(...))
    • tagváltozók
    • metódusok
    • Angular életciklus hook-ok (pl. ngOnInit)
  • Angular HTML sablon
    • *ngIf, *ngFor
    • {{}}
    • Speciális jelentéssel bíró tagek (pl. ng-container)
    • események később
  • Sablon és komponens osztály összekötése

Dependency Injection (függőség injektálás)

  • Például: HttpClient, LibraApiService
  • Ki hozza létre a service-eket?
    • Angular
    • Injektálja minden helyre, ahol kérjük
  • Miért?
    • Életcilus management
  • Függőség (dependency)

BookComponent

//book.component.ts
import { Component, OnInit } from '@angular/core';
import { IBook } from './models';
import { ActivatedRoute } from '@angular/router';
import { LibraApiService } from './libra-api.service';
@Component({
  selector: 'libra-book',
  templateUrl: './book.component.html',
  styleUrls: ['./book.component.scss']
})
export class BookComponent implements OnInit {
  constructor() { }
  book : IBook;
  ngOnInit() {
  }
}

BookComponent 2

<!-- book.component.html --> 
<ng-container *ngIf="book">
  {{book.title}} (ISBN: {{book.isbn}})
</ng-container>

Routing

//app-routing.module.ts
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
//app.module.ts
//...
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
//...

Routing 2

//app-routing.module.ts
const routes: Routes = [
  {path: '', component: BooksComponent},
  {path: 'books', component: BooksComponent},
  {path: 'books/:isbn', component: BookComponent}
];
//app.component.ts
//...
    template: `<router-outlet></router-outlet>`,

→ http://localhost:4200/: BooksComponent

→ http://localhost:4200/books: BooksComponent

→ http://localhost:4200/books/ISBN: BookComponent

Routing 3

@Component({
  selector: 'libra-book',
  templateUrl: './book.component.html',
  styleUrls: ['./book.component.scss']
})
export class BookComponent implements OnInit {

  constructor(private route: ActivatedRoute, 
              private libraApiSvc : LibraApiService) { }

  book : IBook;

  ngOnInit() {
    this.route.params.subscribe(parameters => {
      this.libraApiSvc.getBook(parameters.isbn).subscribe(result => 
        this.book = result);
    });
  }
}