criação da secao12 e atualização da 10 e 11

secao10/app2/src/app/app.routes.ts

@@ -13,8 +13,8 @@ export const ROUTES: Routes = [
     { path: 'oferta', component: HomeComponent},
     { path: 'oferta/:id', component: OfertaComponent,
         children: [
-                    {path: '', component: HomeComponent},
-                    {path: 'como-utilizar', component: ComoUsarComponent},
+                    {path: '', component: ComoUsarComponent},
+                    {path: 'como-usar', component: ComoUsarComponent},
                     {path: 'onde-fica', component: OndeFicaComponent}
         ]
     }

secao10/app2/src/app/como-usar.service.ts

@@ -0,0 +1,22 @@
+import { URL_API_COMO_USAR } from './shared/app.api';
+import { Enum } from './shared/enum.model';
+import { Http } from '@angular/http';
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class ComoUsarService {
+
+    constructor(private http: Http) {}
+
+    public getComoUsar(): Promise<Enum[]> {
+        return this.http.get(`${URL_API_COMO_USAR}`)
+            .toPromise()
+            .then((resposta: any) => resposta.json());
+    }
+
+    public getComoUsarOfertaPorId(id: string): Promise<string> {
+        return this.http.get(`${URL_API_COMO_USAR}?id=${id}`)
+            .toPromise()
+            .then((resposta: any) => resposta.json()[0].descricao);
+    }
+}

secao10/app2/src/app/oferta/como-usar/como-usar.component.html

@@ -1 +1 @@
-<p>como-usar works!</p>
+<p>{{descricao}}</p>

secao10/app2/src/app/oferta/como-usar/como-usar.component.ts

@@ -1,15 +1,21 @@
+import { ComoUsarService } from './../../como-usar.service';
+import { ActivatedRoute } from '@angular/router';
 import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-como-usar',
   templateUrl: './como-usar.component.html',
-  styleUrls: ['./como-usar.component.css']
+  styleUrls: ['./como-usar.component.css'],
+  providers: [ComoUsarService]
 })
 export class ComoUsarComponent implements OnInit {
 
-  constructor() { }
+  public descricao: string;
+
+  constructor(private route: ActivatedRoute, private comoUsarService: ComoUsarService) { }
 
   ngOnInit(): void {
+    this.comoUsarService.getComoUsarOfertaPorId(this.route.parent.snapshot.params.id).then(descricao => this.descricao = descricao);
   }
 
 }

secao10/app2/src/app/oferta/oferta.component.html

@@ -47,7 +47,7 @@ <h1>R$ {{oferta.valor}}</h1>
     <div class="col">     
       <nav>
         <div class="nav nav-tabs" id="nav-tab" role="tablist">          
-          <a class="nav-item nav-link" data-toggle="tab" routerLink="como-utilizar" role="tab">Como utilizar?</a>
+          <a class="nav-item nav-link" data-toggle="tab" routerLink="como-usar" role="tab">Como usar?</a>
           <a class="nav-item nav-link" data-toggle="tab" routerLink="onde-fica" role="tab">Onde fica?</a>                    
         </div>
       </nav>

secao10/app2/src/app/oferta/onde-fica/onde-fica.component.html

@@ -1 +1 @@
-<p>onde-fica works!</p>
+<p>{{descricao}}</p>

secao10/app2/src/app/oferta/onde-fica/onde-fica.component.ts

@@ -1,15 +1,23 @@
+import { ActivatedRoute } from '@angular/router';
 import { Component, OnInit } from '@angular/core';
+import { OndeFicaService } from 'src/app/onde-fica.service';
 
 @Component({
   selector: 'app-onde-fica',
   templateUrl: './onde-fica.component.html',
-  styleUrls: ['./onde-fica.component.css']
+  styleUrls: ['./onde-fica.component.css'],
+  providers: [OndeFicaService]
 })
 export class OndeFicaComponent implements OnInit {
 
-  constructor() { }
+  public descricao: string;
+
+  constructor(private route: ActivatedRoute, private ondeFicaService: OndeFicaService) { }
 
   ngOnInit(): void {
+    console.log('aaaa: ' + this.route.parent.snapshot.params.id);
+    console.log('bbbb: ' + this.route.snapshot.params.id);
+    this.ondeFicaService.getOndeFicaPorId(this.route.parent.snapshot.params.id).then(
+      descricao => this.descricao = descricao);
   }
-
 }

secao10/app2/src/app/ofertas.service.ts

@@ -1,4 +1,4 @@
-import { URL_API } from './shared/app.api';
+import { URL_API_OFERTAS } from './shared/app.api';
 import { Oferta } from './shared/oferta.model';
 import { Http } from '@angular/http';
 import { Injectable } from '@angular/core';
@@ -9,23 +9,23 @@ export class OfertasService {
     constructor(private http: Http) {}
 
     public getOfertas(): Promise<Oferta[]> {
-        return this.http.get(`${URL_API}?destaque=true`)
+        return this.http.get(`${URL_API_OFERTAS}?destaque=true`)
             .toPromise()
             .then((resposta: any) => resposta.json());
         //this.http.get('http://localhost:3000/ofertas');  TODO ver depois como isso é implementado
     }
 
 
     public getOfertasPorCategoria(categoria: string): Promise<Oferta[]> {
-        return this.http.get(`${URL_API}?categoria=${categoria}`)
+        return this.http.get(`${URL_API_OFERTAS}?categoria=${categoria}`)
             .toPromise()
             .then((resposta: any) => resposta.json());
         //this.http.get('http://localhost:3000/ofertas');  TODO ver depois como isso é implementado
     }
 
 
     public getOfertasPorId(id: string): Promise<Oferta> {
-        return this.http.get(`${URL_API}?id=${id}`)
+        return this.http.get(`${URL_API_OFERTAS}?id=${id}`)
             .toPromise()
             .then((resposta: any) => resposta.json().shift());
     }

secao10/app2/src/app/onde-fica.service.ts

@@ -0,0 +1,23 @@
+import { URL_API_ONDE_FICA, URL_API_COMO_USAR } from './shared/app.api';
+import { Enum } from './shared/enum.model';
+import { Http } from '@angular/http';
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class OndeFicaService {
+
+    constructor(private http: Http) {}
+
+    public getOndeFica(): Promise<Enum[]> {
+        return this.http.get(`${URL_API_ONDE_FICA}`)
+            .toPromise()
+            .then((resposta: any) => resposta.json());
+    }
+
+    public getOndeFicaPorId(id: string): Promise<string> {
+        return this.http.get(`${URL_API_ONDE_FICA}?id=${id}`)
+            .toPromise()
+            .then((resposta: any) => resposta.json()[0].descricao);
+    }
+
+}

secao10/app2/src/app/shared/app.api.ts

@@ -1 +1,3 @@
-export const URL_API = 'http://localhost:3000/ofertas';
+export const URL_API_OFERTAS = 'http://localhost:3000/ofertas';
+export const URL_API_COMO_USAR = 'http://localhost:3000/como-usar';
+export const URL_API_ONDE_FICA = 'http://localhost:3000/onde-fica';

secao10/app2/src/app/shared/enum.model.ts

@@ -0,0 +1,4 @@
+export class Enum {
+    private id: number;
+    private descricao: string;
+}

secao10/banco_de_dados.json

@@ -88,5 +88,57 @@
 				{"url": "/assets/ofertas/6/img2.jpg"}
 			]
 		}	
+	],
+	"como-usar": [
+		{
+			"id": 1,
+			"descricao": "Não é necessário agendar"
+		},
+		{
+			"id": 2,
+			"descricao": "Válido de segunda a quinta das 12h as 23h"
+		},
+		{
+			"id": 3,
+			"descricao": "Não é necessário agendar"
+		},
+		{
+			"id": 4,
+			"descricao": "Necessário agendar com no mínimo 48 horas de antecedência"
+		},
+		{
+			"id": 5,
+			"descricao": "Válido de segunda a sábado das 12h as 23h. Necessário agendamento prévio"
+		},
+		{
+			"id": 6,
+			"descricao": "Não é necessário agendar. Sujeito à fila."
+		}
+	],
+	"onde-fica": [
+		{
+			"id": 1,
+			"descricao": "Avenida João da Silva, 255, São Paulo - SP"
+		},
+		{
+			"id": 2,
+			"descricao": "Rua Francisco Mendes, 1000, Rio de Janeiro - SP "
+		},
+		{
+			"id": 3,
+			"descricao": "Avenida Lúcio Rodrigues Alves, 33, Fortaleza - CE"
+		},
+		{
+			"id": 4,
+			"descricao": "Avenida José de Oliveira, 550, Campo Grande - MS"
+		},
+		{
+			"id": 5,
+			"descricao": "Avenida Júlia Abrão, 77, São Paulo - SP"
+		},
+		{
+			"id": 6,
+			"descricao": "Estrada Maria das Graças, 12, Salvador - BA "
+		}
 	]
 }

secao10/documentos/passoapasso.txt

@@ -24,4 +24,12 @@
 
 13. rodei o comando  'ng g c diversao'
 
-14. rodei o comando 'ng g c oferta'
+14. rodei o comando 'ng g c oferta'
+
+14. rodei o comando 'ng g c oferta/comoUsar'
+
+14. rodei o comando 'ng g c oferta/ondeFica'
+
+15. atualiza o arquivo banco_de_dados.json com os dados do 'como usar'
+
+16. atualiza o arquivo banco_de_dados.json com os dados do 'onde fica'

secao11/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "git.ignoreLimitWarning": true
+}

secao11/app2/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

secao11/app2/.gitignore

@@ -0,0 +1,46 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+# Only exists if Bazel was run
+/bazel-out
+
+# dependencies
+/node_modules
+
+# profiling files
+chrome-profiler-events*.json
+speed-measure-plugin*.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db

secao11/app2/README.md

@@ -0,0 +1,27 @@
+# App2
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.6.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).