Configuração

Estrutura

Para manter a organização e a consistência entre projetos, seu app deve seguir algumas regras de estrutura.

Pastas

Clique nos links dos arquivos ou diretórios para ver como devem ser configurados.


 └── project/
     ├── e2e/
     ├── node_modules/
     ├── src/
     │   ├── app/
     │   │   ├── pages/
     │   │   │   ├── abc/
     │   │   │   │   ├── i18n/
     │   │   │   │   │   ├── en.ts
     │   │   │   │   │   └── pt.ts
     │   │   │   │   ├── abc-list/
     │   │   │   │   ├── abc-detail/
     │   │   │   │   ├── abc-routing.module.ts
     │   │   │   │   └── abc.module.ts
     │   │   │   ├── def/
     │   │   │   ├── ghi/
     │   │   │   ├── pages-routing.module.ts
     │   │   │   └── pages.module.ts
     │   │   └── app.module.ts
     │   ├── assets/
     │   │   ├── apps.svg
     │   │   └── nav.svg
     │   ├── environments/
     │   │   └── ...
     │   ├── browserslist
     │   ├── favicon.ico
     │   ├── index.html
     │   ├── karma.conf.js
     │   ├── main.ts
     │   ├── polyfills.ts
     │   ├── styles.scss
     │   ├── test.ts
     │   ├── tsconfig.app.json
     │   ├── tsconfig.spec.json
     │   └── tslint.json
     ├── .gitignore
     ├── .npmrc
     ├── angular.json
     ├── package.json
     ├── README.rst
     ├── tsconfig.json
     └── tslint.json

Módulos e componentes

AppModule e index.html

Primeiramente, devemos apagar os seguintes arquivos:

app.component.html
app.component.scss
app.component.ts

E editar os seguintes arquivos:

app.module.ts

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

import { VsHttpModule, API_GATEWAY } from '@viasoft/http';
import { VsAppCoreModule } from '@viasoft/app-core';
import { VsNavigationViewComponent } from '@viasoft/navigation';

@NgModule({
 declarations: [],
 imports: [
   <strong>VsHttpModule</strong>,
   <strong>VsAppCoreModule</strong>.forRoot( Ver <strong><a href="#appcore">AppCore</a></strong> ),
   <strong><a href="#rotas">RouterModule</a></strong>.forRoot([
     { path: '', loadChildren: './pages/pages.module#PagesModule' }
   ])
 ],
 providers: [
   { provide: API_GATEWAY, useValue: 'http://192.168.99.100:9999' }
 ],
 bootstrap: [<strong>VsNavigationViewComponent</strong>]
})
export class AppModule { }

index.html

<!doctype html>
<html lang="en">

   <head>
       <meta charset="utf-8">
       <title>App Title</title>
       <base href="/">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="icon" type="image/x-icon" href="favicon.ico">
   </head>

   <body>
       <!-- Trocar app-root por vs-navigation-view -->
       <vs-navigation-view></vs-navigation-view>
   </body>

</html>

Rotas

Em seu app, você deve utilizar rotas por domínio ou página, ou seja, devemos criar os seguintes arquivos:

pages.module.ts


  import { NgModule } from '@angular/core';
  import { VsCommonModule } from '@viasoft/common';
  import { PagesRoutingModule } from './pages-routing.module';

  @NgModule({
    declarations: [],
    imports: [
      VsCommonModule,
      PagesRoutingModule
    ]
  })
  export class PagesModule { }

pages-routing.module.ts


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

const routes: Routes = [
  { path: 'abc', loadChildren: './abc/abc.module#AbcModule' },
  { path: 'def', loadChildren: './def/def.module#DefModule' },
  { path: 'ghi', loadChildren: './ghi/ghi.module#GhiModule' },
  { path: '**', redirectTo: 'abc' },
];

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

Esse arquivo deve conter rotas que redirecionam para os módulos de cada página ou domínio. Caso nenhuma rota seja encontrada, deve ser definida uma página padrão para a aplicação.

Dentro do módulo (no caso, abc), teríamos:

abc.module.ts


 import { NgModule } from '@angular/core';
 import { VsCommonModule } from '@viasoft/common';
 import { AbcRoutingModule } from './abc-routing.module';

 import { VsNavigationViewComponent } from '@viasoft/navigation';
 // ...

 @NgModule({
   declarations: [ /* Module declarations */ ],
   imports: [
     VsCommonModule.forChild( Ver Traduções ),
     AbcRoutingModule
   ]
 })
 export class AbcModule { }

abc-routing.module.ts


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

import { AbcListComponent } from './abc-list/abc-list.component';
import { AbcDetailComponent } from './abc-detail/abc-detail.component';


const routes: Routes = [
  { path: '', component: AbcListComponent },
  { path: 'new', component: AbcDetailComponent },
  { path: ':id', component: AbcDetailComponent },
  { path: '**', redirectTo: '' },
];


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

Onde AbcListComponent é a página principal com uma listagem de itens e AbcDetailComponent é a página de detalhe de um item, com funcionalidade de criação e/ou edição.

Para rotas adicionais, as seguintes regras se aplicam:

Sempre utilizar o inglês.
- /abc/detail
- /abc/detalhes
Sempre utilizar Kebab Case, ou seja, palavras em letra minúscula separadas por um hífen.
- /abc/simulation-graph
- /abc/simulationGraph
- /abc/simulation_graph
Nunca utilizar barras no path, ao invés disso criar um sub-módulo com seu próprio módulo de rotas.
A rota wildcard (**) deve sempre redirecionar para o componente principal da página ou domínio (no caso, o componente de listagem de itens).

AppCore

Dentro do VsAppCoreModule.forRoot(), devemos passar as seguintes configurações:


imports: [
    // ...

    VsAppCoreModule.forRoot({
        portalConfig: { Ver PortalConfig }
        navigation: { Ver Navigation }
    }),
],

PortalConfig

A propriedade portalConfig aceita os seguintes parâmetros:

portalConfig: {
    appId: 'my-app-id', // ID único do app
    appName: 'my-app-name', // Nome do app
    domain: 'my-domain', // Domínio do app
    navbarTitle: 'My App' // Título mostrado no topo da navbar
},

Navigation

A propriedade navigation controla o menu lateral da aplicação. Recebe um array de IItemMenuOptions, ou seja, um ícone, título, e um caminho ou sub-itens.

Por exemplo, três itens simples seriam configurados da seguinte maneira:

navigation: [
  {
    icon: 'apple',
    label: 'Abc',
    path: '/abc'
  },
  {
    icon: 'carrot',
    label: 'Def',
    path: '/def'
  },
  {
    icon: 'lemon',
    label: 'Ghi',
    path: '/ghi'
  },
]

Alternativamente, um item com três sub-items seria configurado assim:

navigation: [
  {
    icon: 'archive',
    label: 'Páginas',
    children: [
      {
        icon: 'apple',
        label: 'Abc',
        path: '/abc'
      },
      {
        icon: 'carrot',
        label: 'Def',
        path: '/def'
      },
      {
        icon: 'lemon',
        label: 'Ghi',
        path: '/ghi'
      },
    ]
  }
]

i18n

Para manter a consistência entre telas, reutilizar chaves e habilitar a internacionalização das aplicações, utilizamos traduções. Em cada módulo onde utilizaremos essa funcionalidade, devemos criar um diretório chamado i18n. Dentro dele criamos os arquivos en.ts e pt.ts, contendo as traduções para o inglês e o português, respectivamente.

Por exemplo, os arquivos de tradução para o módulo abc ficariam da seguinte maneira:

pt.ts

export const pt = {
  Abc: {
    Hello: "Olá",
    User: "Usuário",
    CloseWindow: "Fechar janela"
  }
}

en.ts

export const en = {
  Abc: {
    Hello: "Hello",
    User: "User",
    CloseWindow: "Close window"
  }
}

Para importar essas chaves, configure seu módulo da seguinte maneira:

abc.module.ts

import { pt } from './i18n/pt';
import { en } from './i18n/en';
// ...

@NgModule({
  // ...
  imports: [

    VsCommonModule.forChild({
      translates: {
        pt: pt,
        en: en
      }
    }),

    // ...
  ]
})
export class AbcModule { }

E para utilizá-las em seus componentes:

<span>{{ 'Abc.Hello' | translate }}</span>

<vs-button model="icon" tooltip="Abc.CloseWindow" icon="times"></vs-button>

Note que dentro de atributos de componentes do @viasoft/components não é necessário utilizar o pipe translate, pois a busca da chave é feita automaticamente.

Regras

As chaves de tradução devem seguir algumas regras:

Nunca repetir chaves em folhas de tradução diferentes.
Sempre utilizar o inglês para os identificadores das chaves.
- Abc.Goodbye
- Abc.Adeus
Sempre utilizar Pascal Case, ou seja, palavras juntas com a primeira letra em maiúsculo.
- Abc.CloseWindow
- abc.closeWindow
- abc.close_window
- abc.CLOSE_WINDOW
Sempre manter a consistência entre idiomas.
- "Welcome" / "Bem vindo"
- "Welcome" / "Olá"
Sempre seguir as regras estruturais e gramaticais de cada idioma. Se estiver em dúvida, peça ajuda a alguém.
- "Bem vindo, usuário"
- "Bem vindo usuario"
Sempre limitar o identificador a uma descrição sucinta e literal da chave de tradução.
- Abc.Hello
- Abc.HelloMessage