javascript - Como entender a arquitetura MVC no Angular 4? - Stack Overflow em Português
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.
editada 28/02/19 às 17:08
Mayro MyllerMayro Myller
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.
respondida 30/05/18 às 10:00
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. – Mayro Myller 30/05/18 às 17:46
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:
template: '<código HTML aqui>',
styles: '<código CSS aqui>'
Ou com arquivos externos, desse jeito:
templateUrl: './department.component.html',
'./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.
respondida 29/05/18 às 20:10
Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag javascript angularjs mvc angular ou faça sua própria pergunta.