- This was a live coding session to do a recap on some of the content the students covered in angular CLI week 2.
- Introduction to consuming simple REST APIs.
- Introduction to Routing Module .
- Introduction to Dependency Injection and Services.
- Introduction to HttpModule & HttpClient using promises.
- Passing parameters to routes
- Read the docs here https://developers.giphy.com/docs
- Checkout to this branch to see the all the code in this section
git checkout 1.creating-navbar-and-basic-routing
- Link to branch https://github.com/jakhax/giphy-the-angular-workshop/tree/1.creating-navbar-and-basic-routing
- First we create a navbar then do some basic routing for the home page and a 404 page.
- We did the:
ng new giphy
cd giphy
npm install bootstrap
src/styles.css
@import '~bootstrap/dist/css/bootstrap.min.css';
- create
GiphyComponent
cd src/app
ng c giphy
- First created navbar component
GiphyNavbarComponent
ng g c giphy-navbar
file: src/app/giphy-navbar/giphy-navbar.component.html
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Giphy</a>
</nav>
file: src/app/app.component.html
<app-giphy-navbar></app-giphy-navbar>
<div class="container">
<router-outlet></router-outlet>
</div>
- create a not-found component
ng g c not-found
file: src/app/not-found/not-found.component.html
<h2>Error 404</h2>
file: src/app/app-routing.module.ts
....
import {GiphyComponent} from './giphy/giphy.component'
import {NotFoundComponent} from './not-found/not-found.component';
....
const routes: Routes = [
{"path":"home","component":GiphyComponent},
{"pathMatch":"full","redirectTo":"home","path":"" },
{"path":"**","component":NotFoundComponent},
];
- Checkout to this branch to see the all the code in this section
git checkout 2.Gif-Search-Form-and-Emitting-To-Parent-Component
- link to branch https://github.com/jakhax/giphy-the-angular-workshop/tree/2.Gif-Search-Form-and-Emitting-To-Parent-Component
- in this section we did the following
Repo https://github.com/jakhax/giphy-the-angular-workshop/tree/3e7d79ce457947d81b9acf5328b58ebb6fa68490
ng g c giphy-search-form1.creating-navbar-and-basic-routing
- Add the search component to the root component
- Create the search form
repo : https://github.com/jakhax/giphy-the-angular-workshop/tree/b5830db38f42639fda96d876f43202b1a3d2c29d
- Import
FormsModule
- Create binding variable
ngModel
binding
Repo: https://github.com/jakhax/giphy-the-angular-workshop/tree/3b07f6c3850a7eed59debcb641498cbb3737b743
- create event emitter and click function to emit event when button is pressed.
- https://github.com/jakhax/giphy-the-angular-workshop/blob/3b07f6c3850a7eed59debcb641498cbb3737b743/src/app/giphy-search-form/giphy-search-form.component.html
- https://github.com/jakhax/giphy-the-angular-workshop/blob/3b07f6c3850a7eed59debcb641498cbb3737b743/src/app/giphy-search-form/giphy-search-form.component.ts
- Get event in parent component and console log search input.
- Checkout to this branch to see the all the code in this section
git checkout 3.Create-http-service-for-giphy]
- link to repo https://github.com/jakhax/giphy-the-angular-workshop/tree/3.Create-http-service-for-giphy
- In this section we did the following
repo: https://github.com/jakhax/giphy-the-angular-workshop/tree/6cbe245389314497d6edb37d12d40729b0cbeaae
ng g s services/giphy-http-service
- create method
searchGiphies
in service - Inject service to parent component.
Repo:https://github.com/jakhax/giphy-the-angular-workshop/tree/4b9435a6990bcb952e1a1b9a697acc5e2b7b1a34
- import
HttpClientModule
- Add api key to environment (generate your own api key!!!)
- Make API request using promise and console log results.
Repo:https://github.com/jakhax/giphy-the-angular-workshop/tree/7069cd163b0c8945404d6324747ebc42c3356d12
- Create Class
Giphy
to storeurl
offixed_height
gif. - Create an array
Giphy[]
and store the response in the array. - Once the promise resolves copy the data from the service to the parent component.
Repo: https://github.com/jakhax/giphy-the-angular-workshop/tree/2550addc9a7c4a363d7bf4eb8ffabb9d23bc7f40
- Add a search for
lion king
gifs onngOnInit
life cycle hook of the parent component to search when the component loads. - Display search results when available.
- todo