Czas uzupełnić plik __name@dasherize__.service.ts odpowiednią treścią. Celem jest generowanie pliku z metodami Http.
Zanim przejdziemy do całości templatki, poznajmy podstawy składni:
- <%= expression %> – Wykonuje umieszczony kod (wsparcie wyłącznie dla wyrażeń, nie można tutaj umieszczać instrukcji typu if, for), tutaj wrzucamy wartości przekazane np. z options
- <%- expression %> – To samo co wyżej, ale nastąpi „escape HTML” w plikach HTML, czyli umieszczenie znaku < spowoduje jego wygenerowanie w treści
- <% inline code %> – Umieszczenie kodu, dobre do IF
- <%# text %> – Komentarz, który zostanie pominięty
Na prostym przykładzie, wygląda to następująco
1 2 3 |
export class PokemonService {} // statycznie, na sztywno export class <%= classify(name) %> {} // dynamicznie |
Przy pierwszej zabawie wychodzą brzydkie wcięcia, nadmiarowe spacje albo ich braki, trzeba nieco poćwiczyć. Cała templatka:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; const ENDPOINTS = { GET_<%= classify(name.toUpperCase()) %>: '', }; @Injectable({providedIn: 'root'}) export class <%= classify(name) %>Service { constructor(private http: HttpClient) {} <% if (methods.includes('get')) { %> get<%= classify(capitalize(name)) %>(): Observable<<%= classify(capitalize(name)) %>[]> { return this.http.get<<%= classify(capitalize(name)) %>[]>(ENDPOINTS.GET_<%= classify(name.toUpperCase()) %>); }<% } %> } |
Zwróć również uwagę też na wykorzystanie utilsów – są dostępne dlatego, że przekalizaliśmy je wcześniej w templateSource:
1 2 3 4 5 6 7 |
const templateSource = apply(url('./files'), [ template({ ...strings, <-- o tutaj, przekazaliśmy utilsy ;) ...options, <-- a dzięki temu, mamy dostęp do chociażby do "name" w templatce }), move(movePath), ]); |
Prawda, że proste? 🙂 pozostaje nam dodać resztę metod Http, ale to pozostawiam Tobie. Wystarczy dodać IF na każdą z metod. Zdefiniujmy jeszcze methods property w Schema:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{ "$schema": "http://json-schema.org/schema", "id": "AngularLoveHttpServiceSchematic", "title": "Creates a httpService Schematic.", "type": "object", "properties": { ... "methods": { "description": "Specifies HTTP methods", "type": "string", "default": "get,post,put,delete" } } } |
Uruchamiam teraz httpService Schematic będąc w głównym katalogu projektu, aby sprwdzić czy wszystko działa:
1 2 |
npm link angularlove ng g angularlove:http-service core/flight |
lub jeśli chcemy wskazać tylko konkretne metody:
1 |
ng g angularlove:http-service core/flight --methods=post,put |
Efekt:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; const ENDPOINTS = { GET_FLIGHT: '', }; @Injectable({providedIn: 'root'}) export class FlightService { constructor(private http: HttpClient) {} getFlight(): Observable<Flight[]> { return this.http.get<Flight[]>(ENDPOINTS.GET_FLIGHT); } } |
Kod:
https://github.com/tomasznastaly/angular-schematics-tutorial/pull/7/files