Capítulo 4 - Compilación
Capítulo 5 - NgModules
Capítulo 6 - Directivas
Capítulo 7 - Componentes Avanzados
Capítulo 8 - Router
Capítulo 9 - Inyección de Dependencias
Capítulo 10 - LifeCycle
Capítulo 11 - Pipes
Capitulo 12 - HTTP
Capítulo 13 - UI AngularMaterial \/ PrimeNG
Final
2.4 - Estructura de una Angular WebAPP

Estructura de una Angular WebAPP

Vamos a crear nuestra WebApp para empezar a ver la estructura de carpetas y contenido que tiene una app en Angular.
ng new entendiendo-angular-01
Ahi podemos observar en la imagen (podria variar algo con el paso del tiempo, ire actualizando), que crear una serie de archivos y carpetas, y luego ejecuta via NPM la descarga de los archivos que necesita... lo hace porque genera un package.json para poder descargar todas las dependencias que tiene un proyecto basico de Angular.
Antes de ver las carpetas y archivos, ejecutemos el servidor para ver que pasa...
ng serve
Okey, ahora que tenemos nuestro servidor en el http://localhost:4200/ podemos entrar a ver que tiene...
Si, un titulo que simplemente dice "app works!" ... vamos a ver como se genera en las carpetas...
Vamos a arrancar por los archivos de la carpeta raiz.
.editorconfig => es de VSC es el archivo de configuracion.. no haremos nada sobre el..
.gitignore => El CLI nos genera un git ya para que podamos subir nuestro codigo a algun repositorio de GIT, puede ser GITHUB o cualquiera que tenga soporte sobre GIT. Y ya que estan nos dejan todo preparado para ignorar las dependencias que no tiene sentido que subamos.
angular-cli.json => Es este archivo vamos a ver la configuración que genero el CLI para el proyecto.
karma.conf.js => Es el archivo de la configuracion de Karma para los tests.
package.json => Es la configuracion para descargar las dependencias de NodeJS.
protractor.conf.js => Es la configuracion de jasmine para los test e2e.
README.md => es el readme para git, que te explica algunos comandos del CLI para quien se baje el proyecto.
tslint.json => es la configuracion de lint para typescript.
/e2e => aqui tendremos los test e2e para ejecutar, por defecto ya viene con uno, que verifica si en la pantalla existe un H1 que tenga el texto "app works!".
/node_modules => aqui estan todas las dependencias del proyecto
/src => aca es donde mas vamos a estar , diria yo que el 99.9% del tiempo (el 0.01% seria para los test y configuración, capaz que exagere y es un poco mas para test, SI!!!!! tenes que hacer test, ya hacer frontend es de profesionales! =D ) , en esta carpeta estara todo el codigo que programemos, asi que esta carpeta la vamos a ver mas en detalle y la vamos a utilizar todo en todo el libro.

src

En esta carpeta como bien imaginaron va a estar toda la programación que hagamos, y donde vamos a trabajar... por lo tanto vamos a ver un poco los archivos de adentro para entender la estructura basica para poder entender todo bien.
/app=> aquí y en sus subcarpetas vamos a crear todos los componentes, directivas, servicios y todo lo que refiera con la vista y su funcionamiento.
/assets=> (creo que no hace falta decirlo) pero aca van todos los assets que tengamos
/environment=> aquí vamos a definir en el entorno que estamos trabajando y que variables se exportan en el mismo.
typings.d.ts => en este archivo vamos a tener las declaraciones globales de typescript
tsconfig.json=> configuracion de TypeScript
test.ts=> Karma
style.css=> nuestra hoja de estilos global
polyfills.ts=> Este archivo incluye polyfills necesarios para Angular 2 y se carga antes de la aplicación.
main.ts=> nuestro archivo de entrada a Angular
index.html => En esta html se renderizaran las paginas.

app

Dentro de app, es donde vamos a programar, por lo tanto vamos a ver los archivos.
app.component.ts => aca tenemos definido el root component
app.module.ts => aca tenemos la entrada del bootstrap del proyecto y manejaremos todos los modulos que contenga
app.component.html => estructura html del componente
index.ts => export de todos los componentes y modulos
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
}
app.component.html
<h1>
{{title}}
</h1>
index.ts
export * from './app.component';
export * from './app.module';

app.module.ts

Este archivo es muy importante mientras desarrollemos en Angular, porque aqui vamos a manejar los hilos principales.
Es importante saber que este archivo es tan importante (tiene el decorador ngModule) que hay todo un capitulo dedicado a su funcionamiento.