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.