angular-notes/day2/use_an_api.md

Using an API with AJAX

Lesson Objectives

1. Create a new app
2. Generate a new component
3. Clean up app.component.html
4. Add search component to app
5. Add Form HTML to search component
6. Import Form functionality into the app
7. Set a component property to the value of an input
8. Invoke a function when the user clicks a button
9. Add the ability to make AJAX requests
10. Make an AJAX request
11. Display AJAX results in app
12. Display more data in the HTML

Create a new app

ng new starwars
cd starwars
ng serve --open

Generate a new component

ng generate component search

Clean up app.component.html

Set src/app/app.component.html contents to:

<h1>Star Wars Character Search App</h1>

Add search component to app

Edit src/app/app.component.html:

<h1>Star Wars Character Search App</h1>
<app-search></app-search>

Add Form HTML to search component

Edit src/app/search/search.component.html:

<section>
    <h2>Search For A Star Wars Character</h2>
    <input type="text" placeholder="Character Name"/>
    <input type="submit" value="Search"/>
</section>

Import Form functionality into the app

Edit src/app/app.module.ts to import FormsModule and place it as an import:

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

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

import { FormsModule } from '@angular/forms'; //import FormsModule

@NgModule({
    declarations: [
        AppComponent,
        SearchComponent
    ],
    imports: [
        BrowserModule,
        FormsModule //add it as an import
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Set a component property to the value of an input

In src/app/search/search.component.html, add [(ngModel)] to the text input:

<section>
    <h2>Search For A Star Wars Character</h2>
    Search String: {{name}}
    <input [(ngModel)]="name" type="text" placeholder="Character Name"/>
    <input type="submit" value="Search"/>
</section>

Test this by changing the text in the input field

Invoke a function when the user clicks a button

In src/app/search/search.component.ts add a findCharacter method to SearchComponent:

findCharacter(name){
    console.log('finding ' + name);
}

Call it in src/app/search/search.component.html (also remove the Search String:{{name}} test code):

<section>
    <h2>Search For A Star Wars Character</h2>
    <input [(ngModel)]="name" type="text" placeholder="Character Name"/>
    <input (click)="findCharacter(name)" type="submit" value="Search"/>
</section>

Test this by looking in the console

Add the ability to make AJAX requests

Add HttpModule to src/app/app.module.ts:

import { HttpModule } from '@angular/http'; //import module

@NgModule({
    declarations: [
        AppComponent,
        SearchComponent
    ],
    imports: [
        BrowserModule,
        HttpModule, //add HttpModule here
        FormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})

Now edit src/app/search/search.component.ts to import appropriate modules:

import { Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';

And tell the constructor of the SearchComponent class to add an http property:

constructor(
    private http: Http
) { }

Make an AJAX request

In src/app/search/search.component.ts, findCharacter(name) should make a request to swapi.io:

findCharacter(name){
    this.http.get('http://swapi.co/api/people/?search=' + name)
    .toPromise()
    .then(response => console.log(response.json()));
}

The rxjs/add/operator/toPromise import that we previously wrote adds the ability to change the Observable (more on this in another lecture) into a Promise

You can test this by looking in the console

Display AJAX results in app

In src/app/search/search.component.ts add a public results property and set it to the results of the AJAX call when it succeeds:

export class SearchComponent implements OnInit {

    results; //add the public property here

    constructor(
        private http: Http
    ) { }

    findCharacter(name){
        this.http.get('http://swapi.co/api/people/?search=' + name)
        .toPromise()
        .then(response => this.results = response.json().results); //set it here
    }

    ngOnInit() {
    }

}

Now add some HTML to src/app/search/search.component.html to display the results:

<section *ngIf="results">
    <h2>Search Results</h2>
    <ul>
        <li *ngFor="let character of results">{{character.name}}</li>
    </ul>
</section>

You can test this in the app

Display more data in the HTML

Edit src/app/search/search.component.html:

<section *ngIf="results">
    <h2>Search Results</h2>
    <ul>
        <li *ngFor="let character of results">
            <h3>{{character.name}}</h3>
            <dl>
                <dt>Birth Year</dt>
                <dd>{{character.birth_year}}</dd>
                <dt>Eye Color</dt>
                <dd>{{character.eye_color}}</dd>
                <dt>Hair Color</dt>
                <dd>{{character.hair_color}}</dd>
                <dt>Gender</dt>
                <dd>{{character.gender}}</dd>
                <dt>Height</dt>
                <dd>{{character.height}}</dd>
                <dt>Mass</dt>
                <dd>{{character.mass}}</dd>
                <dt>Skin Color</dt>
                <dd>{{character.skin_color}}</dd>
            </dl>
        </li>
    </ul>
</section>