Qual o tipo de estrutura de pastas a utilizar com o Angular 2?
Eu sou um desenvolvedor Angular 1 que está começando a aprender sobre Angular 2. Existem muitos tipos diferentes de métodos de estrutura de pastas, dependendo do material de treinamento. Eu vou listar cada um abaixo e eu adoraria obter as opiniões das pessoas sobre as quais eu deveria usar e por quê. Além disso, se há um método que não está listado, mas você sente que ele funciona melhor, por favor sinta-se livre para listá-lo também.
Ao olhar para tudo isto, o método nº3 é como eu estava a fazer o meu trabalho. 1 aplicações angulares.Método 1: angular2-arranque rápido
Fonte: https://angular.io/guide/quickstart
Estrutura De Pastas:
Método 2: ng-book2
Fonte: https://www.ng-book.com/2/ (tem que pagar para ver os arquivos)
Estrutura De Pastas:
Método 3: sementes de mgechev/angular2
Fonte: https://github.com/mgechev/angular2-seed
Estrutura De Pastas:
5 answers
Https://angular.io/guide/styleguide#overall-structural-guidelines
Fonte : http://www.angulartypescript.com/angular-typescript-project-structure/
Então, depois de fazer mais investigações, acabei por ir com uma versão ligeiramente revista do Método 3 (semente de mgechev/angular2).
Basicamente mudei os componentes para um directório de nível principal e depois cada funcionalidade estará dentro dele.
app
|
|___ images
|
|___ fonts
|
|___ css
|
|___ *main.ts*
|
|___ *main.component.ts*
|
|___ *index.html*
|
|___ components
| |
| |___ shared
| |
| |___ home
| |
| |___ about
| |
| |___ product
|
|___ services
|
|___ structures
Esta estrutura de pastas permite-lhe manter o seu projecto raiz limpo e estruturar os seus componentes, evitando a Convenção de nomes redundantes (por vezes inúteis) do Guia de estilos oficial.
Além disso, esta estrutura é útil para agrupar importar quando for necessário e evitar ter 30 linhas de importação para um único arquivo.src
|
|___ app
|
| |___ components/shared
| | |___ header
| |
| |___ containers/layout
| | |___ layout1
| |
| |___ directives
| | |___ sidebar
| |
| |___ services
| | |___ *user.service.ts*
| |
| |___ guards
| | |___ *auth.guard.ts*
| |
| |___ views
| | |___ about
| |
| |___ *app.component.ts*
| |
| |___ *app.module.ts*
| |
| |___ *app.routing.ts*
|
|___ assets
|
|___ environments
|
|___ img
|
|___ scss
|
|___ *index.html*
|
|___ *main.ts*