Olá, mundo!

O objetivo desta série é criar um pequeno CRUD com o THF, explorando alguns dos seus componentes e, conforme a série avançar, adicionar novas funcionalidades ao projeto.

Não vamos desenvolver nada relacionado ao back-end, vamos focar 100% no desenvolvimento usando o THF.

Sobre o projeto

Vamos criar uma aplicação básica de cadastro de clientes, o velho e bom Customers. Se surgirem novas ideias, vamos incorporando ao projeto.

Usaremos a versão @totvs/thf-cli@3.0.0 para gerar nossa aplicação.

Pré requisitos

Vontade de aprender, conhecer Angular e ler o artigo que ensina a criar uma aplicação com o THF Cli em três passos.

Não esqueça de instalar o THF Cli.

Passo 1 – Criando e preparando o projeto

Para iniciar, vamos criar nossa aplicação. Vá até o seu diretório de trabalho e execute os seguintes comandos para dar início ao projeto:

thf new thf-customers --title "THF | My Customers"
cd thf-customers
ng serve

Fazendo isso e acessando a url http://localhost:4200 no seu browser favorito, você já deve ter algo parecido com isso:

Passo 2 –  Limpando o que não precisa

Abra o projeto em seu editor favorito e remova a pasta src\app\users. Não vamos precisar desse módulo agora.

Eu uso e recomendo o Visual Studio Code.

Agora vamos apagar o menu Users e a rota do módulo que acabamos de remover.

Acesse o arquivo src/app/app.component.ts e remova o item do menu com o label Users.

import { Component } from '@angular/core';

import { ThfMenuItem } from '@totvs/thf-ui';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  readonly menus: Array<ThfMenuItem> = [
    { label: 'Home', link: '/home' },
    { label: 'Users', link: '/users' }, // REMOVA ESSA LINHA
  ];

}

Por último, acesse o arquivo src/app/app-routing.module.ts e remova a rota que aponta para o módulo Users.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: 'home', loadChildren: './home/home.module#HomeModule' },
  { path: 'users', loadChildren: './users/users.module#UsersModule' }, // REMOVA ESSA LINHA
  { path: '', redirectTo: '/home', pathMatch: 'full'}
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule { }

Sua aplicação deve ficar assim:

E agora?

Esse foi só o início do nosso projeto. No próximo artigo vou disponibilizar nosso back-end de teste para darmos início à criação da nossa lista de clientes.

Você pode encontrar os fontes do projeto no repositório do GitHub.

Referências e dicas de leitura

• Portal com a documentação do THF
• Repositótio do THF Cli
• Documentação oficial do Angular
• Curso de Angular da Loiane

***

Artigo original publicado no TOTVS Developers e republicado com autorização do autor, Jhosef Marks: https://medium.com/totvsdevelopers/criando-um-crud-com-thf-iniciando-o-projeto-2bb79138eea6