Angular Framework – Instalación y conceptos básicos
1. Prerequisites
Herramientas previamente definidas:
[Link]
Node Packange Manager (NPM)
Para verificar si tiene ambos instalados o no, visite su línea de comando o consola y
escriba:
$ node -v
$ npm -v
En windows
node –version
npm –version
Angular CLI: 15.0.1
Node: 18.12.1
Package Manager: npm 9.1.2
OS: win32 x64
Si no reconoce alguno de estos comandos, visite la sección de descargas de [Link]
y descargue / ejecute el instalador apropiado según su sistema operativo.
[Link]
Siga los pasos de instalación con la configuración predeterminada, que instalará NPM
de forma predeterminada. Una vez que haya terminado, vuelva a cargar su línea de
comando / consola y vuelva a escribir los comandos anteriores; ahora deberían darle
los números de versión.
Installing Angular through the CLI
Angular CLI (Command Line Interface) es la forma más rápida y sencilla de comenzar
con un nuevo proyecto de Angular 16.
Vamos a usar NPM (también puede usar yarn) para instalar la CLI de Angular a través
del siguiente comando:
$ npm install @angular/cli -g
Una vez instalada, puede acceder a la herramienta CLI escribiendo ng.
Para verificar la versión de su CLI angular, escriba:
ng version
2. Crear proyectos en angular
ng new miprimerapp
Escoger SASS, SCSS o CSS
Para instalar Angular a traces de CLI, tipear:
$ ng new my-new-project --style=scss --routing
Los dos indicadores que agregamos al final especifican que queremos que CSS use el
compilador Sass, y --routing le dice a la CLI que nos proporcione el andamio de
enrutamiento.
Se ejecutará durante un tiempo y luego le indicará que puede acceder a la nueva
carpeta del proyecto. Para hacer eso, simplemente escriba:
$ cd my-new-project
Para servir su proyecto en el navegador, que es útil para el desarrollo, ya que compila
automáticamente su proyecto y lo vuelve a cargar en el navegador, escriba:
$ ng serve
¡Y eso es todo! Tiene una copia nueva de Angular lista y esperando que la desarrolle.
Angular CLI Options
Ejecutamos el comando: ng new my-new-project, que son los requisitos mínimos para
usar la CLI para iniciar un nuevo proyecto.
Sin embargo, hay otros indicadores que puede pasar al comando ng new. La página
wiki oficial de Angular CLI le mostrará todos los comandos, y si hace clic en el nuevo
comando ng, encontrará que admite las siguientes banderas:
directory
dry-run
inline-style
inline-template
minimal
prefix
routing
skip-commit
skip-git
skip-install
skip-tests
source-dir
style
verbose
La documentación le permite hacer clic en cada opción anterior, proporcionándole el
indicador real para usar durante la instalación y el valor predeterminado.
Entonces, por ejemplo, si quisiera configurar su nuevo proyecto Angular 5 para
trabajar con el estilo Sass, ejecutaría el siguiente comando:
$ new new projectName --style=scss (or --style=sass)
Otra bandera común que agrego a nuevos proyectos que sé que requerirán
enrutamiento es:
$ ng new projectName --routing
Luego, por supuesto, si desea combinar los dos anteriores (un proyecto con soporte y
enrutamiento de Sass), como lo hicimos con nuestro proyecto inicial:
$ ng new projectName --style=scss --routing
Esto configurará la estructura básica para manejar una aplicación Angular 12 con
múltiples rutas (o dicho de otra manera, múltiples URL).
No revisaré todas las otras opciones, ya que puede usar la documentación para ver
qué ofrecen según sus necesidades.
Installing Angular without the CLI
La página de inicio rápido de Angular le permite descargar un archivo zip que contiene
la estructura básica de un proyecto de Angular 12.
Una vez descargado, extraiga todas las carpetas y el archivo a una nueva carpeta de
proyecto.
Luego, una vez en el directorio dentro de su consola o línea de comando, escriba:
$ npm install
En ese punto, puede ejecutar ng serve como lo haría normalmente.
Ejecutar la aplicación
ng serve
3. Estructura de una aplicación Angular
Una vez generada y comprobada la ejecución, toca estudiar cómo es la estructura de la
aplicación. Para ello revisa carpeta a carpeta. Las malas noticias son que hay una
enorme cantidad de archivos y carpetas, las buenas son que como verás, casi todo
es configuración e infraestructura.
3.1 Visual Studio Code
Para ver y editar los archivos se puede usar cualquier editor de código, pero
recomiendo VSCode. Es un gran editor, gratuito y multiplataforma. Viene con un
terminal integrado y puedes mejorarlo instalando extensiones.
Antes de empezar debes instalar un paquete de extensiones ya configurado y
preparado para el desarrollo de aplicaciones con Angular, se llama Angular Essentials.
[Link]
Con eso y el Material Icon Theme verás Angular en colores.
3.2 Carpetas y Archivos principales
Volviendo a la estructura de archivos y carpetas te encontrás con muchos archivos de
distintos tipos. Si eres completamente nuevo en Angular, te llamará la atención las
extensiones .ts. Son para archivos TypeScript, una evolución del JavaScript con
facilidades para el programador. Por ahora sólo tienes que familiarizarte con estos:
[Link] : configuración del propio CLI. La madre de todos los configuradores
[Link] : dependencias de librerías y scripts
src/ : la carpeta donde están los archivos fuentes
[Link] : un archivo HTML índice estándar
[Link] : archivo TypeScript de arranque de la aplicación
app/ : la carpeta con el código específico de tu aplicación
[Link] : las aplicaciones son árboles de módulos, y este es su
raíz
[Link] : las páginas son árboles de componentes, y este
es su raíz
Echa un vistazo a estos archivos, pronto los modificaremos para sentirnos
programadores.
4. Edición
Angular CLI instala y configura un conjunto de herramientas que te harán la vida más
fácil. Entre otras, destaca la capacidad de recargar la aplicación en caliente en cuanto
guardas tu trabajo como programador. En esta última versión, la 6, se ha mejorado el
proceso y es realmente rápido.
Para probarlo sólo tienes que dejar arrancada la aplicación con el comando npm
start; cambiar un archivo de código y comprobar el resultado en el navegador. Te
propongo empezar como en cualquier otro lenguaje; por el famoso hola mundo.