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));