Este projeto em Angular é uma continuidade do projeto desenvolvido no curso Conceitos Avançados de performance e otimização usando Angular

• Clonar o projeto

- git clone https://github.com/luizrosalba/projetofinal.git

• Para utilização é necessário ter o Angular instalado:

npm install -g @angular/cli
npm i @angular-devkit/build-angular
npm install -g typescript

• Para utilizar realizar o CRUD deve-se ter o json-server instalado:

npm install -g json-server
na raiz do projeto
cd db   (local onde o banco de dados está)
json-server --watch db.json

• Retornar a pasta raiz do projeto do projeto e iniciar o npm

npm start

Alterei environment.ts para production: true e hmr: false em starter-kit\src\environments\environment.ts Dessa maneira o ProdMode foi ativado.

Tree Shakeable Providers são uma maneira de definir serviçoes e outros, utilizadas pelo Angular para melhorar a performace.

@Injectable({
  providedIn: 'root',
})

Neste projeto utilizamos o Injectable nos componentes list-example, post-list e row-table.

Está sendo feito nos módulos about, no list example e no post-list

  {
    path: 'about',
    loadChildren: () => import('./about/about.module').then((m) => m.AboutModule),
  },
  {
    path: 'list-example',
    loadChildren: () => import('./list-example/list-example.module').then((m) => m.ListExampleModule),
  },
  {
    path: 'post-list',
    loadChildren: () => import('./post-list/post-list.module').then((m) => m.PostListModule),
  },

Ao fazer o import com preloadingStrategy: PreloadAllModules todos os modulos estão sendo carregados após o main uma vez que são módulos pequenos.

imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })], /// carrega o modulos apos carregar o main

Está sendo feito no componente row-table nada é rerenderizado se não houver mudança no campo específico do componente. Quando o botao editar é clicado um patch altera a base de dados e o componente não é rerenderizado ( a mudança já foi feita visualmente)

@Component({
  selector: 'app-row-table',
  templateUrl: './row-table.component.html',
  styleUrls: ['./row-table.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})

O Componente list-example recebe os dados do user via get e repassa para o componente row table.

<table>
  <thead>
    <th>Lista de Usuários</th>
  </thead>
  <tbody>
    <app-row-table *ngFor="let user of usuarios; trackBy: trackById" [user]="user"> </app-row-table>
  </tbody>
</table>

O componente row-table declara uma variável input user. Que recebe o user do list-example. A linha só é rerenderizada quando o componente é deletado e não quando o user é editado.

  @Input() user: Object;

• Criei o component row table que representa cada linha da tabela. O Componente list-example recebe os dados do user via get e repassa para o componente row table.

<app-row-table \*ngFor="let user of usuarios; trackBy: trackById" [user]="user">
</app-row-table>

• Se uma row alterar e o por exemplo o avatar nao alterar ele não renderiza o componente de novo

  @Input() user: Object;

O componente row-table declara uma variável input user. Que recebe o user do list-example. A linha só é rerenderizada quando o componente é deletado e não quando o user é editado.

em cada ngDoCheck para a diretiva ngForof , o angular verifica se o objeto mudou. Ele utiliza um diff que usa a função trackBy para comparação. Neste projeto , foi feito dentro do list-example e estamos usando trackBy pelo id do user.

<app-row-table \*ngFor="let user of usuarios; trackBy: trackById" [user]="user">
</app-row-table>

• Foi utilizado o json server conforme sugestão do professor foram criados o post, patch, delete e na aula já haviamos criado o get

  getUsers() {
    return this.httpClient.get(routes.users()).pipe(catchError(() => of('Error, could not load users')));
  }

  deleteUsers(id: number): Observable<{}> {
    return this.httpClient
      .delete(routes.users() + `/${id}`, httpOptions)
      .pipe(catchError(() => of('Error, could not load users')));
  }

  patchUsers(user: Object): Observable<{}> {
    let id = user['id'];
    let login = user['login'];
    let html_url = user['html_url'];
    let type = user['type'];
    let body = `login=${login}&html_url=${html_url}&type=${type}`;

    return this.httpClient
      .patch(routes.users() + `/${id}`, body, httpOptions)
      .pipe(catchError(() => of('Error, could not load users')));
  }