El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

Introducción

Angular CLI (Command Line Interface) es una herramienta poderosa que facilita la creación, desarrollo y mantenimiento de aplicaciones Angular. Proporciona comandos que permiten a los desarrolladores generar componentes, servicios, módulos y más, sin tener que escribir código repetitivo. Además, Angular CLI ayuda a configurar y optimizar el entorno de desarrollo, realizar pruebas y desplegar aplicaciones.

Instalación de Angular CLI

Para instalar Angular CLI, necesitas tener Node.js y npm (Node Package Manager) instalados en tu sistema. Puedes instalar Angular CLI globalmente usando el siguiente comando:

npm install -g @angular/cli

Para verificar que Angular CLI se ha instalado correctamente, puedes ejecutar:

ng --version

Creación de un Nuevo Proyecto Angular

Para crear un nuevo proyecto Angular, utiliza el comando ng new seguido del nombre del proyecto:

ng new nombre-del-proyecto

Este comando te guiará a través de una serie de preguntas para configurar tu proyecto, como el uso de Angular Routing y el estilo de hoja de estilos (CSS, SCSS, etc.).

Estructura del Proyecto

Una vez creado el proyecto, la estructura de directorios será similar a la siguiente:

nombre-del-proyecto/
├── e2e/
├── node_modules/
├── src/
│   ├── app/
│   ├── assets/
│   ├── environments/
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   └── test.ts
├── .editorconfig
├── .gitignore
├── angular.json
├── package.json
├── README.md
└── tsconfig.json

Comandos Básicos de Angular CLI

Servir la Aplicación

Para iniciar un servidor de desarrollo y servir la aplicación, usa el comando:

ng serve

Por defecto, la aplicación estará disponible en http://localhost:4200/.

Generar Componentes, Servicios y Otros

Angular CLI permite generar varios artefactos de Angular con comandos simples. Por ejemplo, para generar un nuevo componente:

ng generate component nombre-del-componente

O de forma abreviada:

ng g c nombre-del-componente

Para generar un servicio:

ng generate service nombre-del-servicio

O de forma abreviada:

ng g s nombre-del-servicio

Construir la Aplicación

Para construir la aplicación para producción, usa el comando:

ng build --prod

Este comando genera una versión optimizada de la aplicación en el directorio dist/.

Ejecutar Pruebas

Para ejecutar pruebas unitarias, usa el comando:

ng test

Para ejecutar pruebas de extremo a extremo (e2e), usa el comando:

ng e2e

Configuración de Angular CLI

El archivo angular.json es el archivo de configuración principal de Angular CLI. Aquí puedes ajustar diversas configuraciones del proyecto, como rutas de archivos, configuraciones de construcción, y más.

Ejemplo de Configuración

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "projects": {
    "nombre-del-proyecto": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/nombre-del-proyecto",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        }
      }
    }
  }
}

Ejercicio Práctico

Ejercicio 1: Crear y Servir una Aplicación Angular

Instala Angular CLI: Si no lo has hecho, instala Angular CLI globalmente.
Crea un nuevo proyecto: Usa ng new para crear un nuevo proyecto llamado mi-app.
Navega al directorio del proyecto: Usa cd mi-app.
Sirve la aplicación: Usa ng serve y abre http://localhost:4200/ en tu navegador.

Solución

npm install -g @angular/cli
ng new mi-app
cd mi-app
ng serve

Conclusión

Angular CLI es una herramienta esencial para cualquier desarrollador Angular. Facilita la creación y gestión de proyectos, automatiza tareas comunes y mejora la eficiencia del desarrollo. Con los comandos y configuraciones adecuados, puedes optimizar tu flujo de trabajo y centrarte en construir aplicaciones robustas y escalables.

En el próximo módulo, exploraremos temas avanzados como la optimización del rendimiento y la internacionalización en Angular.

Angular CLI

Introducción

Instalación de Angular CLI

Creación de un Nuevo Proyecto Angular

Estructura del Proyecto

Comandos Básicos de Angular CLI

Servir la Aplicación

Generar Componentes, Servicios y Otros

Construir la Aplicación

Ejecutar Pruebas

Configuración de Angular CLI

Ejemplo de Configuración

Ejercicio Práctico

Ejercicio 1: Crear y Servir una Aplicación Angular

Solución

Conclusión

Curso de Angular 2+

Módulo 1: Introducción a Angular

Módulo 2: Conceptos Básicos de TypeScript

Módulo 3: Componentes y Plantillas

Módulo 4: Directivas y Pipes

Módulo 5: Servicios e Inyección de Dependencias

Módulo 6: Enrutamiento y Navegación

Módulo 7: Formularios en Angular

Módulo 8: Cliente HTTP y Observables

Módulo 9: Gestión de Estado

Módulo 10: Pruebas en Angular

Módulo 11: Temas Avanzados

Módulo 12: Despliegue y Mejores Prácticas