angular2-swapi

Angular2Swapi library will help developers building angular and ionic applications which are using data from StarWars API.

Installation

To install this library run:

npm install angular2-swapi --save

Bootstrap

Import Angular2SwapiModule in your app.module.ts file and add it into imports array:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { Angular2SwapiModule } from 'angular2-swapi';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    Angular2SwapiModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angular2SwapiService

angular2-swapi is actually service library providing methods to call https://swapi.co and return resources based on your query. You can say it is HTTP client for StarWars API.

List of available methods

People

Method	Parameters	Return	Description
getPeople()	page?: number	Observable<People[]>	Returns list of people as Observable
getPeopleById(id)	id: number	Observable< People >	Returns character by id
searchPeople(name)	name: string	Observable<People[]>	Search people by name

Films

Method	Parameters	Return	Description
getFilms()	page?: number	Observable<Film[]>	Returns list of films as Observable
getFilm(id)	id: number	Observable < Film >	Returns film by id
searchFilms(title)	title: string	Observable<Film[]>	Search films by title

Starships

Method	Parameters	Return	Description
getStarships(page)	page?: number	Observable<Starship[]>	Return list of starships as Observable
getStarship(id)	id: number	Observable< Starship >	Return starship by id
searchStarships(name)	name: string	Observable<Starship[]>	Search starships by name or model

Vehicles

Method	Parameters	Return	Description
getVehicles(page)	page?: number	Observable<Vehicle[]>	Return list of vehicles as Observable
getVehicle(id)	id: number	Observable< Vehicle >	Returns vehicle by id
searchVehicles(name)	name: string	Observable<Vehicle[]>	Search vehicles by name or model

Species

Method	Parameters	Return	Description
getSpecies(page)	page?: number	Observable<Species[]>	Return list of species as Observable
getSpeciesById(id)	id: number	Observable< Species >	Returns species by id
searchSpecies(name)	name: string	Observable<Species[]>	Search species by name

Planets

Method	Parameters	Return	Description
getPlanets(page)	page?: number	Observable<Planet[]>	Return list of planets as Observable
getPlanet(id)	id: number	Observable< Planet >	Returns planet by id
searchPlanets(name)	name: string	Observable<Planet[]>	Search planets by name

Using Angular2SwapiService

Get list of films and display data:

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Angular2SwapiService, Film } from 'angular2-swapi';

@Component({
  selector: 'app-root',
  template: `
    <li *ngFor="let film of film$ | async">
      <h1>{{ film.title }}</h1>
      <h3>{{ film.release_date | date }}</h3>
      <p>{{ film.opening_crawl }}</p>
    </li>
  `,
  styles: []
})
export class AppComponent implements OnInit {

  film$: Observable<Film[]>;

  constructor(private _swapi: Angular2SwapiService) {}

  ngOnInit() {
    // Get list of films you can specify page
   this.film$ = this._swapi.getFilms();
  }

}

Search films by title:

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Angular2SwapiService, Film } from 'angular2-swapi';

@Component({
  selector: 'app-root',
  template: `
    <li *ngFor="let film of film$ | async">
      <h1>{{ film.title }}</h1>
      <h3>{{ film.release_date | date }}</h3>
      <p>{{ film.opening_crawl }}</p>
    </li>
  `,
  styles: []
})
export class AppComponent implements OnInit {

  film$: Observable<Film[]>;

  constructor(private _swapi: Angular2SwapiService) {}

  ngOnInit() {
    // Search films by title
   this.film$ = this._swapi.searchFilms('menace');
  }

}

Get film by id:

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Angular2SwapiService, Film } from 'angular2-swapi';

@Component({
  selector: 'app-root',
  template: `
    <li *ngIf="film$ | async as film">
      <h1>{{ film.title }}</h1>
      <h3>{{ film.release_date | date }}</h3>
      <p>{{ film.opening_crawl }}</p>
    </li>
  `,
  styles: []
})
export class AppComponent implements OnInit {

  film$: Observable<Film>;

  constructor(private _swapi: Angular2SwapiService) {}

  ngOnInit() {
    // Get film with id=2
   this.film$ = this._swapi.getFilm(2);
  }

}

You can use the same pattern to get all the other resources from Star Wars API and display them in your application.

Where is Wookiee?

I don't speak wookie, do you? Still working on it.

StarWars API Resources

Please check full Star Wars API documentation by Paul Hallet at https://swapi.co/documentation