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.