2

Estudei o Angular Js 1.x e pude entender perfeitamente onde se encaixa a arquitetura MVC no framework, mas não senti o mesmo no Angular 4. É eu sei, isso é bem louco, mas alguém poderia me explicar.

  • Como se dá esse padrão no Angular 4?
  • Quais arquivos que o compõe?

Estou com essa pequena dúvida e desde já agradeço.

2 Respostas 2

3

O angular não tem uma arquitetura MVC, pelo que se é recomendado no style guide seria uma arquitetura por feature.

No geral o modelo e fácil definir com typescript tanto com classes ou preferencialmente por interfaces.

O controle e o view não tem uma separação clara no angular. Isto por que você pode manter o estado da aplicação em services ou components se ele so for usado somente no componente. O mesmo vale pra funções se ela for especifica de um componente não tem muito sentido de coloca-la num serviço apesar de no style guide ele recomenda colocar logica complexa no serviços. Você também pode usar algo como ngrx para gerir o estado o que gera uma arquitetura um pouco diferente e você pode ver a aplicação de exemplo deles para ter uma ideia.

No geral uma arquitetura mvc não faz sentido no angular pois você não vai por todos os services juntos ou todos componentes juntos separados de seus respectivos html. Essa arquitetura e desencorajada desde o angularJS pois não escala bem. Imagina se você tem 50 components tem que achar ele no meio de 50 dentro de uma pasta components não e uma boa.

Outra vantagem de fazer a arquitetura por features e que você pode fazer um lazy-loading dos seus módulos somente quando eles forem necessários. Fazendo uma aplicação grande muito mais rápida. Imagina que você tem uma rota /admin pode ser que 80% dos seus usuários nunca acessem aquela rota e pode ser que ela contenha components bem pesados que deixariam seu site devagar pra carregar. Por isso faz todo sentido carregar ela somente quando aquela rota for acessado deixando seu site bem mais leve.

Sendo assim deve ser mais especificamente uma arquitetura por rotas. E consequentemente por features.

Neste caso se vc tiver por exemplo uma rota /usuarios que lista usuários.

voce teria uma pasta

usuario

  • usuario.module.ts
  • usuario.routing.module.ts
  • usuario.container.component.ts
  • usuario.container.component.scss
  • usuario.container.component.html
  • usuario.interface.ts --> este seria o equivalente ao model.
  • usuario.service.ts

usuario-list dentro desta pasta usuario

  • usuario.list.component.ts
  • usuario.list.component.scss
  • usuario.list.component.html
1
  • Certo, entendi. Mas bem é como eu tinha dito na pergunta né, comecei pelo angularJS. Tinha feito um curso onde o cara fez toda a aplicação em MVC e logo após me aventurei no angular na versão 4. Senti muita dificuldade para entender isso. Commented 30/05/2018 às 17:46
0

Um projeto Angular 4 no eclipse tem a seguinte estrutura de pastas:

node_modules (onde ficam as bibliotecas do node.js)

src (onde fica todos os arquivos do código fonte)

arquivos "soltos" (aqui é onde fica alguns arquivos importantes, como package.json, tsconfig.json, tslint.json)

Dentro da pasta src, temos a seguinte estrutura:

app (onde fica todos os componentes que o Angular vai usar)

assets (imagens, icones, tudo fica aqui)

environments (arquivos de configuração de ambiente de produção/desenvolvimento)

Dentro da pasta src, ficam arquivos como o favicon, o index.html que é a base do projeto (aqui que ficam as tags head e body da aplicação!).

Aqui também fica o webconfig.xml para que faça as configurações quando for fazer um ZipDeploy na Azure, por exemplo.

Quando se trata de fazer um módulo, você faz dois arquivos, o <modulo>-routing.ts e o <modulo>-module.ts. O routing faz o roteamento do módulo e o module é a definição do módulo em si, como imports, declarations e providers.

Quando se trata de componentes, você obrigatóriamente tem um arquivo .ts para definí-lo, e pode colocar todo o código HTML e CSS dentro desse mesmo arquivo, fazendo assim:

@Component({
selector: 'app-department',
template: '<código HTML aqui>',
styles: '<código CSS aqui>'
})

Ou com arquivos externos, desse jeito:

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

E existem ainda outras propriedades para se usar nos componentes, que você pode checar na página da API do angular 4.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .