angular: elementos básicos app

PPT: 3.3

componentes

piezas funcionales y reutilizables
bajo coste mantenimiento
archivos interelacionados de proposito común
- app.component.css (opcional)
  - estilos CSS exclusivos componente
- app.component.html (opcional)
- app.component.espec.ts (opcional)
- app.component.ts
  - clase OO
  - sección imports
  - sección @Component ← decorador
    - función que recibe un JSON como parámetro
  - sección definición clase
  - ```
  import { Component } from '@angular/core';
  
  @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: './app.component.css'
  })
  
  export class AppComponent {
      mensaje = 'Saludos desde el componente';
  }
```
al menos 1 componente por app → AppComponent por defecto, en src/app

index.html

es la home de la aplicación con el uso del tag indicado en el selector

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>Hola mundo</title>
    <base href="/">
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

modulos

clase en fichero TS que usa un decorador (annotation) específica: @NgModule
trabajar con módulos nos permite:
- escalar aplicación
- evitar complejidad (o tenerla controlada)
- bajo acoplamiento
- alta cohesión
- podría parecer que añaden complejidad innecesaria, pero no es así
- +info: angular: módulos

main.ts

indica cual es el módulo desde el que arrancará la app
toda app Angular debe tener como mínimo un módulo y AppModule (app.module.ts) es el de por defecto

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err));