Angular: T2-Instalación y Entorno de Trabajo

 Preparar Entorno de Trabajo para Angular

1- Descargar Cmder  console emulators   https://cmder.app/ . Para  usar de consola o terminal para la ejecución de comandos

2- Instalar NodeJs:    node-v20.16.0-x64.msi      https://nodejs.org/en , Node.js permite la ejecución de código JavaScript, , de código abierto, de código abierto. entorno que permite a los desarrolladores crear servidores, aplicaciones web, Herramientas de línea de comandos y scripts.

3- Instalar npm:    npm install -g npm@10.8.2        https://www.npmjs.com/  , para el desarrollo de JavaScript

4- Instalar CLI angular:   npm install -g @angular/cli    https://angular.dev/installation

 

Contenido de Aprendizaje: 

  1.  Angular (v18)- instalación     https://youtu.be/zCGQgg4iGzs
  2.  Angular: entorno 2024     https://youtu.be/xNfqCXTENmY
  3. ANGULAR: Core + Detección de cambios + OnPush   https://youtu.be/aQdV19A6Lk0
  4. Aprendiendo Angular-en.28dias    https://youtu.be/8Fwwhjt3jjE
  5. Angular-Dev (v17):  https://youtu.be/f7unUpshmpA 
  6.  CURSO ANGULAR 17 https://youtu.be/KOb_4BsZ8FA
  7. Angular: entorno de trabajo: https://youtu.be/X0LVIKRwWBs
  8. .


Verificando la instalación correcta en la consola Cmder

Identificando versión, node -versión:    node -v    

Identificando versión, npm -versión:    npm -v    

Instalando Angular CLI    npm install -g @angular/cli    

Identificando versión Angular CLI    ng version     


C:\ANGULAR-v18\Cmder_Consola   (Disco C:\carpeta\carpeta)
    npm install -g npm@10.8.2            (Instalando npm) 

	node -v                             (node -versión, instalado correctamente)                    
	v20.16.0                                
                                        
	npm -v                              (npm -versión, instalado correctamente)                
	10.8.2                                  
                                        
	npm install -g @angular/cli       (Instalando Angular CLI) 
                                        
	ng version                         (Identificando versión Angular CLI)  
Angular CLI: 18.1.2
	Node: 20.16.0
    Package Manager: npm 10.8.2
	OS: win32 x64

 

Creando pimer Proyecto o APP

ng new NOMBRE_APP

 

C:\ANGULAR-v18\Cmder_Consola
ng new practica1_app1 

¿Le gustaría compartir datos de uso seudónimos sobre este proyecto 
con el equipo de Angular en Google ? N    (no)

¿Qué formato de hoja de estilo le gustaría usar? 

¿Desea habilitar la representación del lado del servidor (SSR) y la generación
de sitios estáticos (SSG/Prerendering)? Y   (si)

 

Abriendo el Proyecto o APP con editor de codigo: Visual Studio Code

Entrando la carpeta del primer proyecto    cd practica1_app1     

Abriendo carpeta con visual studio code    code .     

       


C:\ANGULAR-v18\Cmder_Consola      
 cd practica1_app1            (Entrando la carpeta del primer proyecto)
                                                                                    
C:\ANGULAR-v18\Cmder_Consola\practica1_app1 (master)                      
 code . 	    (Abriendo carpeta con visual studio code)

 

Estructura de un proyecto Angular

 

 

Componentes de Angular.js

  1. Modules: Agrupan componentes relacionados, servicios y otras entidades.
  2. Components: Bloques básicos de la interfaz de usuario.
  3. Templates: HTML que define la vista de un componente.
  4. Services: Proveen funcionalidades compartidas entre componentes.
  5. Directives: Añaden comportamiento a elementos DOM.
  6. Pipes: Transforman datos en plantillas.
  7. Routing: Gestión de la navegación entre vistas.

 

Inicalizando el servidor y abriendo el Navegador web

Inicalizando el servidor y abriendo el Navegador web    ng serve --open    

Abrir en el Navegador web    http://localhost:4200/     


C:\ANGULAR-v18\Cmder_Consola\practica1_app1 (master)                      
 ng serve --open     	     (Inicalizando el servidor y abriendo el Navegador web)
                                                              
Browser bundles              (Paquetes del navegador)

Initial chunk files     | Names               |  Raw size    
(Archivos de fragmentos iniciales | Nombres | Tamaño sin procesar) 
               
polyfills.js            | polyfills           |  90.23 kB |                         
main.js                 | main                |  22.76 kB |                         
styles.css              | styles              |  95 bytes |                         
                                                                            
Watch mode enabled. Watching for file changes...    
Modo de observación habilitado. Observando cambios en los archivos... 

  ➜  Local:   http://localhost:4200/    
  (Abrir manualmente atravez del puerto: 4200; en el Navegador web)
  
  ➜  press h + enter to show help       (➜ presione h + enter para mostrar la ayuda)

 


 

Librerías de Angular

  1. RxJS: Librería para programación reactiva.
  2. NgRx: Gestión de estado para Angular.
  3. Angular Material: Componentes UI basados en Material Design.
  4. Angular CLI: Herramienta de línea de comandos para gestionar proyectos Angular.

 

URL y CDN para Angular


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

 

Estructura de un Proyecto Angular:

my-angular-app/
├── e2e/
├── node_modules/
├── src/
│   ├── app/
│   │   ├── components/
│   │   ├── services/
│   │   ├── app.module.ts
│   │   ├── app.component.ts
│   │   ├── app.component.html
│   │   └── app.component.css
│   ├── assets/
│   ├── environments/
│   ├── index.html
│   ├── main.ts
│   └── styles.css
├── angular.json
├── package.json
├── tsconfig.json
└── tslint.json

 

Ejemplo Básico de un Componente Angular: 


// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-angular-app';
}

 


<!-- app.component.html --><div>  <h1>{{ title }}</h1></div>

API 100% Funcional para Ejecutar en tu PC

Back-End con Node.js y Express:


// server.js
const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello, World!');
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}/`);
});

 

Instrucciones:

  1. Instalar Node.js y npm.
  2. Crear un directorio para el proyecto.
  3. Inicializar el proyecto con npm init.
  4. Instalar Express con npm install express.
  5. Crear el archivo server.js con el código proporcionado.
  6. Ejecutar el servidor con node server.js.

Este servidor básico responde con "Hello, World!" cuando se accede a la ruta raíz (/). Puedes ampliarlo añadiendo más rutas y funcionalidad según tus necesidades.


......----