====== Angular ======

Actualize mis apuntes de programar Angular a la versión 22.

  * [[https://www.youtube.com/watch?v=APtSLRo6b-M]]
  * [[https://www.youtube.com/watch?v=4PYwCI1LFqs]]
  * [[https://www.youtube.com/watch?v=zCGQgg4iGzs&list=PLkghgffjLQkLzyl7mx_5t-ZjHnG43fR0F|Angular v18 desde cero - 01 🚀 ¡Empieza desde Cero con la instalación! 🛠️ de youtube@jftics]]
  * [[https://www.youtube.com/watch?v=ik-5twMh2Vc&list=PL_euSNU_eLbcQNN3J9bmQfoKA44J87FCV&index=1|46. Introduction to Angular Routing. Set up and load routes with RouterModule in angular. youtube@LeelaWebDev]]

La Carpeta donde se renderiza el html y el javascript por defecto es:
<code> dist/<project-name>/browser/ </code>
  * [[https://v17.angular.io/guide/deployment#building-and-serving-from-disk]]
Si es que con en el navegador se pone en el URL la carpeta y no se logra ver la página por enlaces erróneos por que el href es una ruta explicita o absoluta, en archivo index.html:
<code><base href="/"></code>

Se puede hacer relativa con el comando
<code>ng build --base-href ./</code>

Se la puede configurar una ruta absoluta con el comando:
<code>
ng build --base-href /<RUTA>/
</code>

o modificando el archivo de configuración "angular.json":
<code>
"projects": {
  "app": {
    "architect": {
      "build": {
        "options": {
          "baseHref": "/production-folder/"
        }
      }
    }
  }
}

</code>

Código básico:

<code javascript>
//typescript

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

@Component({
  selector: 'app-root',
  imports: [],
  template: ` <h1>Default</h1> `,
  styleUrls: ['./app.css'],
})
export class App {
  title = 'default';
}

</code>


{{page>informatica:lenguajes_de_programacion:typescript:spa:angular:instalacion:instalacion}}


{{page>informatica:lenguajes_de_programacion:typescript:spa:angular:crear_nuevo_proyecto:crear_nuevo_proyecto}}
==== Notas ====

routers, componentes, componentes stand alones


===== Component y Routes ====

  * [[https://www.youtube.com/watch?v=AVRU4p4HaVo|Sorry React - Angular 20 es mejor.]]



el archivo "app.routes.ts"

<code>
<Proyecto-Nombre>
  |
  ├─ /app/
  |  ├─ app.routes.ts
</code>

El contenido por default es:

<code javascript>

import { Routes } from '@angular/router';

export const routes: Routes = [];

</code>

Para agregar un componente se debe escribir en linea de comandos:
<code javascript>

ng generate component <nombre o carpeta/nombre>

//forma acortada:

ng g c <nombre o carpeta/nombre>
</code>

{{page>informatica:lenguajes_de_programacion:typescript:spa:angular:components}}

{{page>informatica:lenguajes_de_programacion:typescript:spa:angular:routes}}

===== Deploy =====

Deploy para el tipo SSR Server Side Rendering, usando Apache o Nginx

  * [[https://blog.daudr.me/painless-angular-ssr/]]
  * [[https://v17.angular.io/guide/deployment]]

En Apache:
  * [[https://victorroblesweb.es/2021/01/24/poner-un-proyecto-de-angular-en-un-servidor-apache/]]

Usando WebPack:
  * [[https://webpack.js.org/guides/development/#webpack-dev-server]]

Usando Hydration:
  * [[https://www.angulararchitects.io/blog/guide-for-ssr/]]