Angular 17
Instalar node.js (v20.15.1 LTS)

sudo apt update
sudo apt upgrade
sudo apt install curl gnupg2 ca-certificates lsb-release
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install nodejs
node -v
npm -v
npm install -g @angular/cli
// sudo npm install -g @angular/cli@17 // ubuntu

ng new mi-angular-app
cd mi-angular-app
ng serve

ng serve -o // Este comando arranca un servidor web en forma local y abre el navegador para la ejecución de la aplicación.

En la carpeta 'proyecto01' hay una subcarpeta llamada 'src' y dentro de esta una llamada 'app', busquemos el archivo 'app.component.html' y procedamos a borrar las 337 líneas.

Disponemos el siguiente código remplazando al generado en forma automática:

<h1 style="text-align:center">
  Bienvenido a {{ title }}
</h1>

se crean (más 24.800 archivos y 3400 carpetas en la versión de Angular 17.x

En Angular se programa utilizando el lenguaje TypeScript que vamos a ir aprendiéndolo a lo largo del curso. El archivo donde se declara la clase AppComponent es 'app.component.ts':

Ya hemos nombrado los tres archivos fundamentales que definen toda componente:

app.component.ts
app.component.html
app.component.css



Una de las características fundamentales en Angular es separar la vista del modelo de datos. En el modelo de datos tenemos las variables y en la vista implementamos como se muestran dichos datos.

Modificaremos el proyecto001 para ver este concepto de interpolación.

Abriremos el archivo que tiene la clase AppComponent (app.component.ts) y lo modificaremos con el siguiente código:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  nombre = 'Rodriguez Pablo';
  edad = 40;
  email = 'rpablo@gmail.com';
  sueldos = [1700, 1600, 1900];
  activo = true;

  esActivo() {
    if (this.activo)
      return 'Trabajador Activo';
    else
      return 'Trabajador Inactivo';
  }

  ultimos3Sueldos() {
    let suma = 0;
    for (let x = 0; x < this.sueldos.length; x++)
      suma += this.sueldos[x];
    return suma;
  }
}

Veamos ahora el archivo html que muestra los datos, esto se encuentra en 'app.component.html':

<div>
  <p>Nombre del Empleado:{{nombre}}</p>
  <p>Edad:{{edad}}</p>  
  <p>Los últimos tres sueldos son: {{sueldos[0]}}, {{sueldos[1]}} y {{sueldos[2]}}</p>
  <p>En los últimos 3 meses ha ganado: {{ultimos3Sueldos()}}</p>
  <p>{{esActivo()}}</p>
</div>



Cuando hayas terminado de desarrollar tu aplicación, puedes construirla y empaquetar la versión de producción con el siguiente comando:
ng build --configuration production

Este comando generará los archivos optimizados para producción en la carpeta dist/my-angular-app.

# installs nvm (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# download and install Node.js (you may need to restart the terminal)
nvm install 20

# verifies the right Node.js version is in the environment
node -v # should print `v20.15.1`

# verifies the right NPM version is in the environment
npm -v # should print `10.7.0` Angular CLI (Command Line Interface - Interfaz de línea de comandos) 

https://nodejs.org/en/
https://nodejs.org/en/download/package-manager