Skip to content

ch01.md

Latest commit

 

History

History
64 lines (47 loc) · 2.85 KB

ch01.md

File metadata and controls

64 lines (47 loc) · 2.85 KB

Capitulo 1 Primera Aplicación Angular

Instalación y configuración del entorno de desarrollo

Instalar:

  • node y npm
  • Git
  • VSCode

Instalar Angular CLI:

npm install -g @angular/cli

Crear una nueva aplicación Angular (mantener opciones por defecto):

ng new my-app

Probar la aplicación:

cd my-app
ng serve

Instalar [Angular Dev Tools](https://chrome.google.com/webstore/detail/angular-developer- tools/ienfalfjdbdpebioblfackkekamfmbnh).

Crear un perfil VSCode para Angular. Para ello crear un nuevo perfil desde plantilla y seleccionar "Angular" como tipo de perfil. Esto instalará las extensiones recomendadas para Angular y configurará el entorno de desarrollo.

Ficheros principales:

  • .vscode: Incluye archivos de configuración de VSCode
  • node_modules: Incluye paquetes npm instalados que son necesarios para desarrollar y ejecutar la aplicación Angular
  • public: Contiene activos estáticos como fuentes, imágenes e iconos
  • src: Contiene los archivos fuente de la aplicación
  • .editorconfig: Define estilos de codificación para el editor predeterminado
  • .gitignore: Especifica los archivos y carpetas que Git no debe rastrear
  • angular.json: El archivo de configuración principal del espacio de trabajo de Angular CLI
  • package.json y package-lock.json: Proporcionan definiciones de paquetes npm, junto con sus versiones exactas, que son necesarias para desarrollar, probar y ejecutar la aplicación Angular
  • README.md: Un archivo README que se genera automáticamente desde Angular CLI
  • tsconfig.app.json: Una configuración de TypeScript específica para la aplicación Angular
  • tsconfig.json: Una configuración de TypeScript específica para el espacio de trabajo de Angular CLI
  • tsconfig.spec.json: Una configuración de TypeScript específica para las pruebas unitarias de la aplicación Angular

En src tenemos:

  • app: Todos los archivos relacionados con Angular de la aplicación. Interactuarás con esta carpeta la mayor parte del tiempo durante el desarrollo.
  • index.html: La página HTML principal de la aplicación Angular.
  • main.ts: El punto de entrada principal de la aplicación Angular.
  • styles.css: Estilos CSS que se aplican globalmente a la aplicación Angular. La extensión de este archivo depende del formato de hoja de estilos que elijas al crear la aplicación.

En app:

  • app.css: Contiene estilos CSS específicos de la página de ejemplo. La extensión de este archivo depende del formato de hoja de estilos que elijas al crear la aplicación.
  • app.html: Contiene el contenido HTML de la página de ejemplo.
  • app.spec.ts: Contiene pruebas unitarias para la página de ejemplo.
  • app.ts: Define la lógica de presentación de la página de ejemplo.
  • app.config.ts: Define la configuración de la aplicación Angular.
  • app.routes.ts: Define la configuración de enrutamiento de la aplicación Angular.