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:
- Angular (v18)- instalación https://youtu.be/zCGQgg4iGzs
- Angular: entorno 2024 https://youtu.be/xNfqCXTENmY
- ANGULAR: Core + Detección de cambios + OnPush https://youtu.be/aQdV19A6Lk0
- Aprendiendo Angular-en.28dias https://youtu.be/8Fwwhjt3jjE
- Angular-Dev (v17): https://youtu.be/f7unUpshmpA
- CURSO ANGULAR 17 https://youtu.be/KOb_4BsZ8FA
- Angular: entorno de trabajo: https://youtu.be/X0LVIKRwWBs
- .
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
- Modules: Agrupan componentes relacionados, servicios y otras entidades.
- Components: Bloques básicos de la interfaz de usuario.
- Templates: HTML que define la vista de un componente.
- Services: Proveen funcionalidades compartidas entre componentes.
- Directives: Añaden comportamiento a elementos DOM.
- Pipes: Transforman datos en plantillas.
- 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
- RxJS: Librería para programación reactiva.
- NgRx: Gestión de estado para Angular.
- Angular Material: Componentes UI basados en Material Design.
- 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:
- Instalar Node.js y npm.
- Crear un directorio para el proyecto.
- Inicializar el proyecto con
npm init. - Instalar Express con
npm install express. - Crear el archivo
server.jscon el código proporcionado. - 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.
......----