Introdução ao Angular

1. Introdução

O que você vai criar

Neste codelab, você criará um app de hospedagem com o Angular. A versão completa do app mostrará as fichas de empresa baseadas na pesquisa do usuário e os detalhes do local da casa.

Você criará tudo com o Angular usando ferramentas eficientes e uma excelente integração do navegador.

Este é o app que você criará hoje

O que você vai aprender

• Como usar a CLI Angular para criar um novo projeto.
• Como usar componentes do Angular para criar uma interface do usuário.
• Como compartilhar dados em componentes e outras partes de um app.
• Como usar manipuladores de eventos no Angular.
• Como implantar o app no Firebase Hosting usando a CLI do Angular.

Pré-requisitos

• Conhecimento básico de HTML, CSS, TypeScript (ou JavaScript), Git e da linha de comando

2. Configuração do ambiente

Configurar seu ambiente local

Para concluir este codelab, você precisa do seguinte software instalado na sua máquina local:

• Node: versão ^12.20.2, ^14.15.5 ou ^16.10.0
• Editor de código: VS Code ou outro editor de código de sua escolha
• Plug-in de serviço do Angular Language para VS Code.

Instalar a CLI do Angular

Depois de configurar todas as dependências, instale a CLI do Angular em uma janela de linha de comando no computador.

npm install -g @angular/cli

Para confirmar que sua configuração está correta, execute este comando na linha de comando do computador:

ng –version

Se o comando funcionar, você verá uma mensagem semelhante à captura de tela abaixo.

Acessar o código

O código deste codelab contém as etapas intermediárias e a solução final em ramificações diferentes. Para começar, faça o download do código no GitHub

1. Abra uma nova guia do navegador e acesse https://github.com/angular/introduction-to-angular.
2. Em uma bifurcação da janela de linha de comando, clone o repositório e cd introduction-to-angular/ no repositório.
3. Na ramificação de código inicial, insira git checkout get-started.
4. Abra o código no editor de código de sua preferência e abra a pasta do projeto introduction-to-angular.
5. Na janela da linha de comando, execute npm install para instalar as dependências necessárias para executar o servidor.
6. Para executar o servidor da Web Angular em segundo plano, abra uma janela de linha de comando separada e execute ng serve para iniciar o servidor.
7. Abra uma guia do navegador no http://localhost:4200.

Depois de instalar o app, você pode começar a criar o app Fairhouse.

3. Criar seu primeiro componente

Os componentes são os elementos básicos dos apps do Angular. Pense nos componentes como tijolos usados para construção. Ao começar, um tijolo não tem muito poder, mas quando combinado com outros blocos, você pode criar estruturas incríveis.

O mesmo vale para apps criados com o Angular.

Os componentes têm três aspectos principais:

• Um arquivo HTML do modelo.
• Um arquivo CSS para os estilos
• Um arquivo TypeScript para o comportamento do app.

O primeiro componente que você atualizará é AppComponent.

1. Abra app.component.html no editor de código. Este é o arquivo de modelo para o AppComponent.
2. Exclua todo o código nesse arquivo e substitua-o por:

<main>
  <header><img src="../assets/logo.svg" alt="fairhouse">Fairhouse</header>
  <section>
  </section>
</main>

3. Salve o código e verifique o navegador. Com o servidor de desenvolvimento em execução, as alterações são refletidas no navegador quando salvamos.

Parabéns! Você atualizou seu primeiro aplicativo do Angular. Prepare-se para mais novidades. Vamos continuar.

Em seguida, você adicionará um campo de texto para pesquisa e um botão à IU.

Os componentes têm muitos benefícios, sendo um deles a capacidade de organizar a IU. Você criará um componente que contém o campo de texto, o botão de pesquisa e, por fim, a lista de locais.

Para criar esse novo componente, você usará a CLI do Angular. A CLI Angular é o conjunto de ferramentas de linha de comando que ajuda na estruturação, na implantação e muito mais.

1. Na linha de comando, digite o seguinte:

ng generate component housing-list

Veja as partes desse comando:

• ng é a CLI Angular.
• O comando gera o tipo de ação a ser executada. Nesse caso, gere o scaffolding para algo.
• O componente representa o que queremos criar.
• hospedagem-lista é o nome do componente.

2. Em seguida, adicione o novo componente ao modelo AppComponent. Em app.component.html, atualize o código do modelo:

<main>
  <header><img src="../assets/logo.svg" alt="fairhouse">Fairhouse</header>
 <section>
   <app-housing-list></app-housing-list>
 </section>
</main>

3. Salve todos os arquivos e volte ao navegador para confirmar que a mensagem housing-list works é exibida.
4. No editor de código, navegue até housing-list.component.html, remova o código existente e substitua-o por:

<label for="location-search">Search for a new place</label>
<input id="location-search" placeholder="Ex: Chicago"><button>Search</button>

5. Em housing-list.component.css, adicione os seguintes estilos:

input, button {
    border: solid 1px #555B6E;
    border-radius: 2px;
    display: inline-block;
    padding: 0;
}
input {
    width: 400px;
    height: 40px;
    border-radius: 2px 0 0 2px;
    color: #888c9c;
    border: solid 1px #888c9c;
    padding: 0 5px 0 10px;
}

button {
    width: 70px;
    height: 42px;
    background-color: #4468e8;
    color: white;
    border: solid 1px #4468e8;
    border-radius: 0 2px 2px 0;
}

article {
    margin: 40px 0 10px 0;
    color: #202845;
}
article, article > p {
    color: #202845;
}

article> p:first-of-type {
    font-weight: bold;
    font-size: 22pt;
}

img {
    width: 490px;
    border-radius: 5pt;
}

label {
    display: block;
    color: #888c9c;
}

6. Salve os arquivos e volte ao navegador.

Nosso app do Angular está começando a assumir forma.

4. Tratamento de eventos

O app tem um campo de entrada e um botão, mas falta a interação. Na Web, você geralmente interage com os controles e invoca o uso de eventos e manipuladores de eventos. Você usará essa estratégia para criar seu app.

Você fará essas alterações em housing-list.component.html.

Para adicionar um manipulador de cliques, você precisará adicionar o listener de eventos ao botão. No Angular, a sintaxe é colocar o nome do evento entre parênteses e atribuir um valor a ele. Aqui, você nomeia o método chamado quando o botão é clicado. Vamos chamá-lo de searchHousingLocations. Não se esqueça de adicionar parênteses ao final do nome da função para chamá-la.

1. Atualize o código do botão para corresponder a este código:

<button (click)="searchHousingLocations()">Search</button>

2. Salve esse código e verifique o navegador. Agora há um erro de compilação:

O app gera esse erro porque o método searchHousingLocations não existe. Por isso, você precisará mudá-lo.

3. No housing-list.component.ts, adicione um novo método no final do corpo da classe HousingListComponent:

 searchHousingLocations() {}

Em breve, você preencherá os detalhes desse método.

4. Salve este código para atualizar o navegador e resolver o erro.

A próxima etapa é conseguir o valor do campo de entrada e transmiti-lo como um argumento para o método searchHousingLocations. Você usará um recurso do Angular chamado de variável de modelo, que oferece uma maneira de acessar uma referência a um elemento de um modelo e interagir com ele.

1. No housing-list.component.html, adicione um atributo chamado search, com uma hashtag como prefixo da entrada.

<label for="location-search">Search for a new place</label>
<input id="location-search" #search><button (click)="searchHousingLocations()">Search</button>

Agora temos uma referência à entrada. Também temos acesso à propriedade .value da entrada.

2. Transmita o valor da entrada para o método searchHousingLocations.

<input id="location-search" #search><button (click)="searchHousingLocations(search.value)">Search</button>

Até agora, você transmitiu o valor como um parâmetro, mas vamos atualizar o método para usar o parâmetro. No momento, o parâmetro é usado em um comando console.log. Posteriormente, ele é usado como um parâmetro de pesquisa.

3. Em housing-list.component.ts, adicione este código:

 searchHousingLocations(searchText: string) {
   console.log(searchText);
 }

4. Salve o código e abra o Chrome DevTools no navegador, acesse a guia Console. Digite qualquer valor na entrada. Escolha Pesquisar e verifique se o valor é exibido na guia Console do Chrome DevTools.

Você adicionou um manipulador de eventos e seu aplicativo pode receber entradas dos usuários.

5. Resultados da pesquisa

A próxima etapa é exibir resultados com base nas informações fornecidas pelo usuário. Cada local tem propriedades de string para nome, cidade, estado, foto, uma propriedade numérica para availableUnits e duas propriedades booleanas para lavanderia e Wi-Fi:

name: "Location One",
city: "Chicago",
state: "IL",
photo: "/path/to/photo.jpg",
availableUnits: 4,
wifi: true,
laundry: true

Você pode representar esses dados como um objeto JavaScript simples, mas é melhor usar o suporte a TypeScript no Angular. Use tipos para evitar erros durante o tempo de compilação.

Podemos usar tipos para definir as características dos dados, também conhecidas como "modelagem dos dados&&t; No TypeScript, as interfaces são usadas com essa finalidade. Vamos criar uma interface que representa nossos dados de localização de residências. No terminal do editor, use a CLI Angular para criar um tipo HousingLocation.

1. Para fazer isso, digite o seguinte:

ng generate interface housing-location

2. No housing-location.ts, adicione os detalhes do tipo da nossa interface. Dê a cada propriedade o tipo apropriado com base no nosso design:

export interface HousingLocation {
  name: string,
  city: string,
  state: string,
  photo: string,
  availableUnits: number,
  wifi: boolean,
  laundry: boolean,
}

3. Salve o arquivo e abra app.component.ts.
4. Para criar uma matriz contendo dados que representem os locais de habitação, importando a interface de local de hospedagem do ./housing-location.

import { HousingLocation } from './housing-location';

5. Atualize a classe AppComponent para incluir uma propriedade com o nome housingLocationList do tipo HousingLocation[]. Preencha a matriz com os seguintes valores:

housingLocationList: HousingLocation[] = [
  {
    name: "Acme Fresh Start Housing",
    city: "Chicago",
    state: "IL",
    photo: "../assets/housing-1.jpg",
    availableUnits: 4,
    wifi: true,
    laundry: true,
  },
  {
    name: "A113 Transitional Housing",
    city: "Santa Monica",
    state: "CA",
    photo: "../assets/housing-2.jpg",
    availableUnits: 0,
    wifi: false,
    laundry: true,
  },
  {
    name: "Warm Beds Housing Support",
    city: "Juneau",
    state: "AK",
    photo: "../assets/housing-3.jpg",
    availableUnits: 1,
    wifi: false,
    laundry: false,
  }
];

Você não precisa instanciar novas instâncias de uma classe para receber objetos. Podemos aproveitar as informações de tipo fornecidas pela interface. Os dados dos objetos precisam ser os mesmos "shape"; ou seja, devem corresponder às propriedades definidas na interface.

Os dados são armazenados em app.component.ts, mas precisamos compartilhá-los com outros componentes. Uma solução é usar serviços no Angular, mas, para reduzir a complexidade do app, usaremos o decorador de entrada fornecido pelo Angular. O decorador de entrada permite que um componente receba um valor de um modelo. Você a usará para compartilhar a matriz housingLocationList com a HousingListComponent.

6. Em housing-list.component.ts, importe input de @angular/core, bem como HousingLocation de ./housingLocation.

import { Component, OnInit, Input } from '@angular/core';
import {HousingLocation } from '../housing-location';

7. Crie uma propriedade com o nome locationList no corpo da classe de componente. Você usará Input como decorador para locationList.

export class HousingListComponent implements OnInit {

  @Input() locationList: HousingLocation[] = [];
  ...
}

O tipo dessa propriedade é definido como HousingLocation[].

8. No app.component.html, atualize o elemento app-housing-list para incluir um atributo chamado locationList e defina o valor como housingLocationList.

<main>
 ...
 <app-housing-list [locationList]="housingLocationList"></app-housing-list>
</main>

O atributo locationList precisa estar entre colchetes ( [ ]) para que o Angular possa vincular dinamicamente o valor da propriedade locationList a uma variável ou expressão. Caso contrário, o Angular tratará o valor no lado direito do sinal de igual como uma string.

Se você estiver recebendo erros neste momento, verifique se:

• A ortografia do nome do atributo de entrada corresponde à ortografia na propriedade da classe TypeScript. Nesse caso, o caso também é importante.
• O nome da propriedade no lado direito do sinal de igual está escrito corretamente.
• A propriedade de entrada está entre colchetes.

A configuração do compartilhamento de dados foi concluída. A próxima etapa é exibir os resultados no navegador. Como os dados estão no formato de matriz, precisamos usar um recurso do Angular que permite retornar os dados e repetir os elementos nos modelos, *ngFor.

1. No housing-list.component.html, atualize o elemento do artigo no modelo para usar *ngFor. Assim, você poderá exibir as entradas da matriz no navegador:

<article *ngFor="let location of locationList"></article>

O valor atribuído ao atributo ngFor é a sintaxe de modelo Angular. Ela cria uma variável local no modelo. O Angular usa a variável local no escopo do elemento article entre as tags de abertura e fechamento.

Para saber mais sobre ngFor e sintaxe do modelo, consulte a documentação do Angular.

O ngFor repete um elemento de artigo para cada entrada da matriz de locationList. Em seguida, você exibirá valores da variável de local.

2. Atualize o modelo para adicionar um elemento de parágrafo (<p>). O filho do elemento de parágrafo é um valor interpolado da propriedade de localização:

<input #search><button (click)="searchHousingLocations(search.value)">Search</button>
<article *ngFor="let location of locationList">
   <p>{{location.name}}</p>
</article>

Nos modelos do Angular, você pode usar a interpolação de texto para exibir valores com a sintaxe de chaves duplas ( {{ }}).

3. Salve e volte ao navegador. Agora, o app exibirá um rótulo para cada entrada na matriz locationList.

Os dados são compartilhados do componente do app com o componente da lista de habitação, e estamos iterando cada um desses valores para exibi-los no navegador.

Abordamos algumas maneiras de compartilhar dados entre componentes e usamos uma nova sintaxe de modelos e a diretiva ngFor.

6. Filtrar os resultados da pesquisa

Atualmente, o app exibe todos os resultados em vez de resultados com base na pesquisa de um usuário. Para mudar isso, você precisa atualizar o HousingListComponent para que o app funcione conforme esperado.

1. No housing-list.component.ts, atualize HousingListComponent para ter uma nova propriedade do tipo HousingLocation[], chamada results:

export class HousingListComponent implements OnInit {

 @Input() locationList: HousingLocation[] = [];
 results: HousingLocation[] = [];
 ...

A matriz de resultados representa os locais de residência que correspondem à pesquisa do usuário. A próxima etapa é atualizar o método searchHousingLocations para filtrar os valores.

2. Remova o console.log e atualize o código para atribuir a propriedade de resultados à saída da filtragem de locationList, filtrada por searchText:

searchHousingLocations(searchText: string) {
  this.results = this.locationList.filter(
  (location: HousingLocation) => location.city
    .toLowerCase()
    .includes(
        searchText.toLowerCase()
  ));
}

Nesse código, usamos o método de filtro de matriz e aceitamos somente valores que contenham o searchText. Todos os valores são comparados usando as versões em letras minúsculas das strings.

Dois pontos a serem observados:

• O prefixo this precisa ser usado ao referenciar propriedades de uma classe dentro de métodos. É por isso que estamos usando this.results e this.locationList.
• A função de busca aqui corresponde apenas à propriedade de um local, mas você pode atualizar o código para incluir mais propriedades.

Embora este código funcione como está, é possível melhorá-lo.

3. Atualize o código para evitar a pesquisa na matriz se searchText estiver em branco:

searchHousingLocations(searchText: string) {
  if (!searchText) return;
  ...
}

O método foi atualizado e há uma mudança no modelo que você precisa fazer antes que os resultados sejam exibidos no navegador.

4. Em housing-location.component.html, substitua locationList por results no ngFor:

<article *ngFor="let location of results">...</article>

5. Salve o código e volte ao navegador. Usando a entrada, pesquise um local usando os dados de amostra (por exemplo, Chicago).

O app exibe apenas os resultados correspondentes:

Você acabou de concluir a funcionalidade adicional necessária para vincular totalmente a entrada do usuário aos resultados da pesquisa. O app está quase concluído.

Em seguida, você exibirá mais detalhes sobre o app para concluir o processo.

7. Exibir os detalhes

O app precisa ser compatível com o clique em um resultado da pesquisa e a exibição das informações em um painel de detalhes. O HousingListComponent sabe qual resultado foi clicado porque os dados são exibidos nesse componente. Precisamos de uma forma de compartilhar os dados do HousingListComponent com o componente pai AppComponent.

No Angular, o @Input() envia dados do pai para o filho, enquanto o @Output() permite que os componentes enviem um evento com os dados do filho para o componente pai. O decorador de saída usa um EventEmitter para notificar os listeners de eventos. Nesse caso, é recomendável emitir um evento que represente o clique de um resultado da pesquisa. Além do evento de seleção, você quer enviar o item selecionado como parte do payload.

1. No housing-list.component.ts, atualize a import para incluir Output e EventEmitter do @angular/core e da HousingLocation do local:

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { HousingLocation } from '../housing-location';

2. No corpo de HousingListComponent, atualize o código para adicionar uma nova propriedade chamada locationSelectedEvent do tipo EventEmitter<HousingLocation>();:

@Output() locationSelectedEvent = new EventEmitter<HousingLocation>();

A propriedade locationSelectedEvent é decorada com @Output(), o que faz com que ela faça parte da API desse componente. Com EventEmitter, você aproveita a API Genérica para a classe, fornecendo a ela o tipo HousingLocation. Quando um evento é emitido pelo locationSelectedEvent, os listeners do evento podem esperar que os dados correspondentes sejam do tipo HousingLocation. Esse é o tipo de segurança que apoia nosso desenvolvimento e reduz o potencial de alguns erros.

É necessário acionar o locationSelectedEvent sempre que um usuário clicar em um local da lista.

3. Atualize HousingListComponent para adicionar um novo método chamado selectLocation que aceita um valor do tipo housingLocation como parâmetro:

selectHousingLocation(location: HousingLocation) { }

4. No corpo do método, emita um novo evento do emissor locationSelectedEvent. O valor emitido é o local selecionado pelo usuário.

selectHousingLocation(location: HousingLocation) {
  this.locationSelectedEvent.emit(location);
}

Vamos vinculá-lo ao modelo.

5. No housing-list-component.html, atualize o elemento do artigo para que um novo botão seja filho com uma click event. Esse evento chama o método selectHousingLocation na classe TypeScript e transmite uma referência à location clicada como um argumento.

<article *ngFor="let location of results" >
  <p>{{location.name}}</p>
  <button (click)="selectHousingLocation(location)">View</button>
</article>

As localizações agora têm um botão clicável e você retorna os valores para o componente.

A etapa final do processo é atualizar a AppComponent para ouvir o evento e atualizar a exibição conforme necessário.

6. No app.component.html, atualize o elemento app-housing-list para ouvir o locationSelectedEvent e processar o evento com o método updateSelectedLocation:

<app-housing-list [locationList]="housingLocationList" (locationSelectedEvent)="updateSelectedLocation($event)"></app-housing-list>

O $event é fornecido pelo Angular ao lidar com manipuladores de eventos em modelos. O argumento $event é um objeto do tipo HousingLocation porque é esse que definimos o parâmetro de tipo EventEmitter's. O Angular processa tudo isso para você. Você só precisa confirmar que seus modelos estão corretos.

7. No app.component.ts, atualize o código para incluir uma nova propriedade chamada selectedLocation do tipo HousingLocation | undefined.

selectedLocation: HousingLocation | undefined;

Isso usa um recurso do TypeScript chamado Union Type. As funções UNION permitem que as variáveis aceitem um dos vários tipos. Nesse caso, você quer que o valor de selectedLocation seja HousingLocation ou undefined porque um valor padrão para selectedLocation não está especificado.

Você precisa implementar updateSelectedLocation.

8. Adicione um novo método com o nome updateSelection e um parâmetro com o nome location e um tipo HousingLocation.

updateSelectedLocation(location: HousingLocation) { } searchHousingLocations() {}

9. No corpo do método, defina o valor de selectedLocation como o parâmetro location:

updateSelectedLocation(location: HousingLocation) {
  this.selectedLocation = location;
}

Quando estiver concluída, a última etapa é atualizar o modelo para exibir o local selecionado.

10. No app.component.html, adicione um novo elemento <article> que usaremos para exibir as propriedades do local selecionado. Atualize o modelo com o seguinte código:

<article>
  <img [src]="selectedLocation?.photo">
  <p>{{selectedLocation?.name}}</p>
  <p>{{selectedLocation?.availableUnits}}</p>
  <p>{{selectedLocation?.city}}, {{selectedLocation?.state}}</p>
  <p>{{selectedLocation?.laundry ? "Has laundry" : "Does Not have laundry"}}</p>
  <p>{{selectedLocation?.wifi ? "Has wifi" : "Does Not have wifi"}}</p>
 </article>

Como selectedLocation pode ser undefined, você usa o operador de encadeamento opcional para recuperar os valores da propriedade. Você também está usando a sintaxe ternária para os valores booleanos wifi e laundry. Isso permite exibir uma mensagem personalizada, dependendo do valor.

11. Salve o código e verifique o navegador. Pesquise um local e clique nele para ver os detalhes:

Parece ótimo, mas ainda há um problema para resolver. Quando a página é carregada inicialmente, há alguns artefatos de texto do painel de detalhes que não devem ser exibidos. O Angular tem algumas maneiras de exibir condicionalmente conteúdo que você usará na próxima etapa.

Por enquanto, fique feliz com a distância que o app chegou. Veja o que você implementou até agora:

• Você pode compartilhar dados dos componentes filhos com os componentes pai usando o decorador de saída e o EventEmitter.
• Você também permitiu que seus usuários inserissem e pesquisassem um valor usando esse valor.
• O app pode exibir os resultados da pesquisa, e os usuários podem clicar para ver mais detalhes.

Esse trabalho é excelente até o momento. Vamos atualizar os modelos e concluir o app.

8. Otimizar os modelos

Atualmente, a IU contém artefatos de texto do painel de detalhes que precisam ser exibidos condicionalmente. Usaremos dois recursos do Angular, ng-container e *ngIf.

Se você aplicar a diretiva ngIf diretamente ao elemento article, haverá uma mudança de layout quando o usuário fizer a primeira seleção. Para melhorar essa experiência, é possível unir os detalhes de local em outro elemento filho de um article. Esse elemento não tem estilo ou função e apenas adiciona peso ao DOM. Para evitar isso, use o ng-container. Você pode aplicar diretivas a ela, mas ela não será exibida no DOM final.

1. No app.component.html, atualize o elemento article para corresponder a este código:

<article>
  <ng-container>
  <img [src]="selectedLocation?.photo">
  <p>{{selectedLocation?.name}}</p>
  <p>{{selectedLocation?.city}}, {{selectedLocation?.state}}</p>
  <p>Available Units: {{selectedLocation?.availableUnits}}</p>
  <p>{{selectedLocation?.laundry ? "Has laundry" : "Does Not have laundry"}}</p>
  <p>{{selectedLocation?.wifi ? "Has wifi" : "Does Not have wifi"}}</p>
  </ng-container>
</article>

2. Em seguida, adicione o atributo *ngIf ao elemento ng-container. O valor deve ser selectedLocation.

<article>
  <ng-container *ngIf="selectedLocation">
  ...
  </ng-container>
</article>

Agora, o app só exibirá o conteúdo do elemento ng-container se selectedLocation for Truthy.

3. Salve esse código e confirme que o navegador não exibe mais os artefatos de texto quando a página é carregada.

Há uma atualização final que podemos fazer no nosso app. Os resultados da pesquisa em housing-location.component.html exibirão mais detalhes.

4. No housing-location.component.html, atualize o código para:

<label for="location-search">Search for a new place</label>
<input id="location-search" #search placeholder="Ex: Chicago"><button
    (click)="searchHousingLocations(search.value)">Search</button>
<article *ngFor="let location of results" (click)="selectHousingLocation(location)">
  <img [src]="location.photo" [alt]="location.name">
  <p>{{location.name}}</p>
  <p>{{location.city}}, {{location.state}}</p>
  <button (click)="selectHousingLocation(location)">View</button>
</article>

5. Salve o código e volte ao navegador para ver o app concluído.

Agora o app está ótimo e está totalmente funcional. Muito bem!

9. Parabéns

Agradecemos por fazer isso na jornada e usar o Angular para criar a Fairhouse.

Você criou uma interface do usuário usando o Angular. Usando a CLI Angular, você criou componentes e interfaces. Depois, você usou os recursos avançados do modelo no Angular para criar um app funcional que exibe imagens, processa eventos e muito mais.

A seguir

Se você quiser continuar criando funcionalidades, veja algumas ideias:

• Os dados são codificados no app. Uma ótima refatoração é adicionar um serviço para conter os dados.
• A página de detalhes é exibida na mesma página, mas seria legal mover os detalhes para uma página própria e aproveitar o roteamento do Angular.
• Outra atualização seria hospedar os dados em um endpoint de descanso e usar o pacote HTTP no Angular para carregar os dados no momento da execução.

Muitas oportunidades de diversão.