Inicio de Angular

Ficheros principales de la aplicación:

El primer fichero que tenemos es index.html que referenencia al componente raiz, es el fichero de entrada a la aplicación. El código que contiene es el siguiente:

<!doctype html>

<head>

<title>Pruebas</title>

</head>

<body>

<app-root></app-root>

</body>

</html>

El body tiene una etiqueta llamada <app-root></app-root> que es la que define el componente principal de Angular.

El componente raíz se encuentra ubicado en la carpeta app y se llama app.component.

import { Component } from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'pruebas';

}

Donde en @Component se define de la siguiente manera:

selector: Establece el selector app-root.
templateUrl: Establece la plantilla del componente.
styleUrls: Establece la hoja de estilo del componente.

Después tenemos el modulo app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

El cual tiene declarations por componente AppComponent

Y por ultimo tenemos el archivo de entrada a la aplicación main.ts donde en bootstrapModule carga el modulo anterior:

src/app/app/main.ts:

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.error(err));

NodeJS y Angular

viernes, 21 de agosto de 2020