= 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**
*
Hola mundo
== 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: [[development:angular:modulos|]]
== 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));