You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
82 lines
1.6 KiB
82 lines
1.6 KiB
# Using an API with AJAX
|
|
|
|
## Lesson Objectives
|
|
|
|
1. Create a new app
|
|
1. Generate a new component
|
|
1. Clean up app.component.html
|
|
1. Add search component to app
|
|
1. Add Form HTML to search component
|
|
1. Import Form functionality into the app
|
|
|
|
## 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:
|
|
|
|
```html
|
|
<h1>Star Wars Character Search App</h1>
|
|
```
|
|
|
|
## Add search component to app
|
|
|
|
Edit `src/app/app.component.html`:
|
|
|
|
```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`:
|
|
|
|
```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:
|
|
|
|
```javascript
|
|
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 { }
|
|
```
|