# 8 Angular

Podemos entrar a la web oficial de Angular (opens new window)
Podemos entrar a la web oficial de Angular CLI (opens new window)
Podemos entrar a la web oficial de Node (opens new window)
Podemos entrar a la web oficial de NPM (opens new window)

# ¿Qué es Angular?

Aviso

Según Victor Robles (opens new window): Angular es un framework de desarrollo para JavaScript creado por Google. La finalidad de Angular es facilitarnos el desarrollo de aplicaciones web SPA y además darnos herramientas para trabajar con los elementos de una web de una manera más sencilla y optima.

# ¿Qué es Angular CLI?

Aviso

Según Desarrollo web (opens new window): Angular CLI, el intérprete de línea de comandos de Angular permite iniciar proyectos y la creación del esqueleto (scaffolding) de todo tipo de artefactos necesarios para el desarrollo de aplicaciones.

# Enlaces utiles

En esta seccion pondremos enlaces utiles:

166. Instalar Angular (opens new window) ----> Master en JavaScript: Aprender JS, jQuery, Angular, NodeJS

91. Instalar Angular paso a paso (opens new window) ----> Master en Frameworks JavaScript: Aprende Angular, React, Vue

50. Instalar Angular (opens new window) ----> Master en webs Full Stack: Angular, Node, Laravel, Symfony + (Sección Laravel y Angular)
180. Instalar Angular y preparar el proyecto (opens new window) ----> Instalar Angular 7 paso a paso - Victor Robles (opens new window) ----> Master en webs Full Stack: Angular, Node, Laravel, Symfony + (Sección Node y Angular)
292. Como instalar Angular y crear un proyecto con Angular CLI (opens new window) ----> Master en webs Full Stack: Angular, Node, Laravel, Symfony + (Sección Symfony y Angular)

Notas de los proyectos

#
Importante: "Two" significa que lo hice yo mismo

# Apuntes varios

En esta seccion pondremos apuntes varios:

# Instalamos Node

Instalamos Node (opens new window) desde su web
También podemos ver las Versiones de Node (opens new window) y las Versiones de Angular (opens new window)

node -v
npm -v

# Instalamos Angular

Instalamos NPM, borramos cache y desactivamos auditorias

npm install -g npm@latest  # NO USAR ESTE COMANDO, sino usar el ejecutable de la web e instalar la versión que necesites o la version LTS (El ejecutable instala Node y la version de NPM con la que viene)
npm cache clean --force
npm cache verify & npm cache clear --force
npm set audit false

Desinstalamos versiones anteriores de Angular CLI, borramos cache

npm uninstall -g angular-cli
npm uninstall -g @angular/cli
npm cache clean --force                     # Borramos de nuevo la cache para eliminar todos los posibles conflictos que tengamos con npm
npm cache verify & npm cache clear --force  # Borramos la cache, se verifico y se comprimio, se elimino lo que se tuvo que eliminar / Para asegurarnos, borramos la cache, y borramos los paquetes antiguos, borramos lo que tenga que borrar

Instalamos Angular CLI en su ultima version

# Recomendacion: Ver 'Lista de compatibilidad para Angular'

# Intalar la ultima version de Angular CLI
npm install -g @angular/cli

# INSTALAR VERSION ESPECIFICA DE ANGULAR CLI
npm install -g @angular/cli@16.2.2

# Verificar version de Angular CLI (globalmente y proyecto) y version de Angular (proyecto)
ng version  # ng --version no funciona
ng

# 6-ejercicios-angular-two (master-javascript)

Notas de la instalación

Cuando cree este proyecto lo hice con Node 18.14.0 instala NPM 9.3.1
Cuando cree este proyecto lo hice con Angular CLI 16.2.2

ChatGPT

# ¿Angular recomienda usar versiones especificas de Node y NPM, cuando usas una version de Angular CLI?

Sí, Angular recomienda usar versiones específicas de Node.js y npm cuando se utiliza una versión particular de Angular CLI. Esto se debe a que diferentes versiones de Angular CLI pueden tener diferentes dependencias y requisitos de versión de Node.js y npm.

Por ejemplo, Angular 13.0.0 requiere Node.js 16.3.x o superior y npm 7.x o superior, mientras que Angular 12.0.0 requiere Node.js 14.x o superior y npm 6.x o superior.

Puedes verificar las versiones recomendadas de Node.js y npm para una versión específica de Angular CLI en la documentación oficial de Angular. Además, al crear un nuevo proyecto de Angular con el CLI, se mostrará un mensaje recomendando la versión de Node.js y npm a usar para esa versión de Angular CLI en particular.

# ¿Donde veo la documentacion de recomendaciones?

Puedes encontrar la documentación oficial de recomendaciones de Angular para las versiones de Node.js y npm en la sección "Prerequisites" de la guía de inicio rápido de Angular. La guía de inicio rápido se puede encontrar en la página principal del sitio web de Angular en la sección "Get started".

Aquí está el enlace directo a la guía de inicio rápido de Angular: https://angular.io/guide/setup-local (opens new window)

En la sección "Prerequisites", se proporciona una tabla que muestra las versiones recomendadas de Node.js y npm para cada versión de Angular. También se proporcionan enlaces a las páginas de descarga de Node.js y npm.

# Para obtener información sobre los requisitos de versión específicos, consulte la `engines` clave en el archivo package.json (opens new window)

ng new ejercicios-angular  # Creamos el proyecto
npm start                  # Levantamos el proyecto con el script definido en el archivo package.json
ng serve                   # Levantamos el proyecto
ng serve --open            # Levantamos el proyecto y abrimos en navegador

# Dependencias
    Las dependencias siempre estan instaladas en packgage.json del proyecto

    npm install  # Puedes recuperar node_modules y package-lock.json con el archivo package.json
    npm update   # Actualizar las dependencias que ya tenga, pero ademas instalara las dependencias que faltan

# Componentes
    ng g component components/home
    ng g component components/videojuego
    ng g component components/zapatillas
    ng g component components/cursos
    ng g component components/externo
    ng g component components/contacto

# 8-proyecto-angular-two (master-javascript)

Notas de la instalación

Cuando cree este proyecto lo hice con Node 18.14.0 instala NPM 9.3.1
Cuando cree este proyecto lo hice con Angular CLI 16.2.2

Instalamos jquery (opens new window)

ng new proyecto-angular  # Creamos el proyecto
npm start                # Levantamos el proyecto con el script definido en el archivo package.json
ng serve                 # Levantamos el proyecto
ng serve --open          # Levantamos el proyecto y abrimos en navegador

# Dependencias
    Las dependencias siempre estan instaladas en packgage.json del proyecto

    npm install  # Puedes recuperar node_modules y package-lock.json con el archivo package.json
    npm update   # Actualizar las dependencias que ya tenga, pero ademas instalara las dependencias que faltan

    npm i jquery  # Instalamos jquery

# Componentes
    ng g component components/about
    ng g component components/create
    ng g component components/edit
    ng g component components/projects
    ng g component components/detail
    ng g component components/contact
    ng g component components/error

# 2-blog-angular-two (master-fullstack)

Notas de la instalación

Cuando cree este proyecto lo hice con Node 18.14.0 instala NPM 9.3.1
Cuando cree este proyecto lo hice con Angular CLI 16.2.2

Paginación

Creando una tabla paginada con back-end (server-side) en Angular y Laravel

ng new blog-angular  # Creamos el proyecto
npm start            # Levantamos el proyecto con el script definido en el archivo package.json
ng serve             # Levantamos el proyecto
ng serve --open      # Levantamos el proyecto y abrimos en navegador

# Dependencias
    Las dependencias siempre estan instaladas en packgage.json del proyecto

    npm install  # Puedes recuperar node_modules y package-lock.json con el archivo package.json
    npm update   # Actualizar las dependencias que ya tenga, pero ademas instalara las dependencias que faltan

    npm i jquery                  # Instalamos jquery
    npm i bootstrap               # Instalamos bootstrap
    npm i angular-froala-wysiwyg  # Instalamos angular-froala-wysiwyg
    npm i angular-file-uploader   # Instalamos angular-file-uploader
    npm i ngx-pagination          # Instalamos ngx-pagination

# Componentes
    ng g component components/login
    ng g component components/home
    ng g component components/register
    ng g component components/user-edit
    ng g component components/profile
    ng g component components/error

    ng g component components/category/category-index
    ng g component components/category/category-create
    ng g component components/category/category-edit
    ng g component components/category/category-post
    ng g component components/category/category-nav-item

    ng g component components/post/post-create
    ng g component components/post/post-edit
    ng g component components/post/post-detail
    ng g component components/post/post-list

Prueba de codigo bash en Markdown

Prueba de codigo php en Markdown

Prueba de codigo javascript en Markdown

Prueba de codigo markdown en Markdown

← 7 React 9 MongoDB →

# 8 Angular

# ¿Qué es Angular?

# ¿Qué es Angular CLI?

# Enlaces utiles

# Importante: "Two" significa que lo hice yo mismo

# Apuntes varios

# Instalamos Node

# Instalamos Angular

# 6-ejercicios-angular-two (master-javascript)

# ¿Angular recomienda usar versiones especificas de Node y NPM, cuando usas una version de Angular CLI?

# ¿Donde veo la documentacion de recomendaciones?

# Para obtener información sobre los requisitos de versión específicos, consulte la engines clave en el archivo package.json (opens new window)

# 8-proyecto-angular-two (master-javascript)

# 2-blog-angular-two (master-fullstack)

#
Importante: "Two" significa que lo hice yo mismo

# Para obtener información sobre los requisitos de versión específicos, consulte la `engines` clave en el archivo package.json (opens new window)