Angular
Angular CLI es una herramienta de interfaz de línea de comandos que
se utiliza para inicializar, desarrollar, andamios y mantener aplicaciones de
Angular. Puede utilizar la herramienta directamente en un shell de comandos,
o indirectamente a través de una interfaz de usuario interactiva como
la Consola Angular .
Como instalar angular 7 pasó a paso
Paso 1. Instalar NodeJS en su última versión, para eso entraremos a su web
oficial y descargaremos el instalador más actualizado [Link]
Paso 2. Actualizar NPM, el gestor de paquetes de node, para bajarnos las
dependencias más actuales: npm install -g npm@latest
Paso 3. Borrar la cache de NPM: npm cache clean --force
Paso 4. Desactivar las auditorias de NPM para evitar fallos: npm set audit false
Paso 5. Desinstalar los paquetes anteriores de Angular CLI
npm uninstall -g angular-cli
npm uninstall -g @angular/cli
Paso 6. Borrar la cache de NPM de nuevo: npm cache clean --force
Paso 7. Instalar la última versión de Angular CLI para instalar Angular 7:
npm install -g @angular/cli@latest
Ahora ya tenemos instalado y actualizado Angular CLI y ya podemos generar un
nuevo proyecto de Angular 7: ng new
Seguimos el asistente respondiendo paso a paso:
1. Primero nos pedirá el nombre del proyecto
2. Nos preguntará si queremos añadir el routing de angular, diremos que NO
3. Nos preguntará si queremos usar un formato específico para los estilos css, le
daremos a enter simplemente
4. Esperamos a que el asistente acabe de generar nuestro proyecto de Angular 7
Ahora entraremos al directorio de nuestro proyecto y lanzaremos el servidor local
de pruebas para Angular:
cd NOMBRE_DEL_PROYECTO
ng serve
Puedes comprobar la versión de Angular que tienes dentro del fichero
[Link], podrás comprobar que tienes la versión 7.
Con esto ya sabemos cómo actualizar Angular CLI e instalar Angular 7, como
instalar el framework y como usar Angular CLI para generar un proyecto base.
Ahora tendremos disponible la webapp de Angular 7 en [Link]
[Link]
Flujo de trabajo básico
Invoque la herramienta en la línea de comando a través
del ngejecutable. La ayuda en línea está disponible en la línea de
comandos. Ingrese lo siguiente para listar comandos u opciones para un
comando dado (como generar ) con una breve descripción.
ng help
ng generate –help
Para crear, construir y servir un nuevo proyecto Angular básico en un
servidor de desarrollo, vaya al directorio principal de su nueva área de trabajo,
use los siguientes comandos:
ng new my-first-project
cd my-first-project
ng serve
En su navegador, abra http: // localhost: 4200 / para ver cómo se
ejecuta la nueva aplicación. Cuando usa el comando ng serve para crear una
aplicación y servirla localmente, el servidor reconstruye automáticamente la
aplicación y vuelve a cargar la página cuando cambia cualquiera de los
archivos de origen.
Espacios de trabajo y archivos de proyecto.
El comando ng new crea una carpeta de espacio de trabajo angular y
genera un nuevo esqueleto de aplicación. Un espacio de trabajo puede
contener múltiples aplicaciones y bibliotecas. La aplicación inicial creada por
el nuevo comando ng se encuentra en el nivel superior del área de
trabajo. Cuando genera una aplicación o biblioteca adicional en un área de
trabajo, entra en una projects/subcarpeta.
Una aplicación recién generada contiene los archivos de origen para un
módulo raíz, con un componente raíz y una plantilla. Cada aplicación tiene
una srccarpeta que contiene la lógica, los datos y los activos.
Puede editar los archivos generados directamente, o agregarlos y
modificarlos usando los comandos de la CLI. Use el comando ng
generate para agregar nuevos archivos para componentes y servicios
adicionales, y código para nuevas canalizaciones, directivas, etc. Los
comandos como agregar y generar , que crean u operan en aplicaciones y
bibliotecas, deben ejecutarse desde un área de trabajo o carpeta de proyecto.
Espacio de trabajo y configuración del proyecto
Se [Link] crea un único archivo de configuración del espacio de
trabajo, en el nivel superior del espacio de trabajo. Aquí es donde puede
configurar los valores predeterminados por proyecto para las opciones de
comando de la CLI y especificar las configuraciones que se utilizarán cuando
la CLI genere un proyecto para diferentes objetivos.
El comando ng config le permite establecer y recuperar valores de
configuración desde la línea de comandos, o puede editar el [Link]
archivo directamente. Tenga en cuenta que los nombres de las opciones en el
archivo de configuración deben usar camelCase , mientras que los nombres de
opciones proporcionados a los comandos pueden usar camelCase o dash-
case.
Sintaxis de lenguaje de comandos de CLI
La sintaxis del comando se muestra a continuación:
ng commandNameOrAlias requiredArg [ optionalArg ][options]
La mayoría de los comandos, y algunas opciones, tienen alias. Los alias
se muestran en la declaración de sintaxis para cada comando.
Los nombres de las opciones tienen como prefijo un guión doble (-). Los
alias de opciones tienen como prefijo un solo guión (-). Los argumentos
no tienen prefijo. Por ejemplo: ng build my-app -c production
Normalmente, el nombre de un artefacto generado se puede dar como
un argumento al comando o se puede especificar con la opción --name.
Los nombres de argumentos y opciones se pueden dar en camelCase o
dash-case . --myOptionNamees equivalente a --my-option-name.
Opciones booleanas y enumeradas.
Las opciones booleanas tienen dos formas: --thisOptionestablece la
bandera, la --noThisOptionborra. Si no se proporciona ninguna opción, el
indicador permanece en su estado predeterminado, como se indica en la
documentación de referencia.
Los valores permitidos se dan con cada descripción de opción
enumerada, con el valor predeterminado en negrita .
Vías de relativas
Las opciones que especifican archivos se pueden proporcionar como
rutas absolutas o como rutas relativas al directorio de trabajo actual, que
generalmente es el área de trabajo o la raíz del proyecto .
Esquemas
Los comandos ng generar y ng agregar toman como argumento el
artefacto o la biblioteca que se generará o agregará al proyecto
actual. Además de las opciones generales, cada artefacto o biblioteca define
sus propias opciones en un esquema. Las opciones de esquema se
suministran al comando en el mismo formato que las opciones de comando
inmediatas.
Comando general
MANDO ALIAS DESCRIPCIÓN
add Agrega soporte para una biblioteca externa a su proyecto.
build b Compila una aplicación Angular en un directorio de salida
llamado dist / en la ruta de salida dada. Debe ejecutarse
desde un directorio de área de trabajo.
config Recupera o establece los valores de configuración angular
en el archivo [Link] para el espacio de trabajo.
doc d Abre la documentación oficial de Angular ([Link]) en un
navegador y busca una palabra clave determinada.
e2e e Crea y sirve una aplicación Angular, luego ejecuta pruebas
de extremo a extremo utilizando Protractor.
generate g Genera y / o modifica archivos basados en un esquema.
help Enumera los comandos disponibles y sus breves
descripciones.
lint l Ejecuta herramientas de línea en el código de la aplicación
Angular en una carpeta de proyecto determinada.
n Crea un nuevo espacio de trabajo y una aplicación angular
new
inicial.
Ejecuta un destino de Arquitecto con una configuración de
run
constructor personalizada opcional definida en su
proyecto.
s Construye y sirve su aplicación, reconstruyendo en los
serve
cambios de archivos.
t Ejecuta pruebas unitarias en un proyecto.
test
Actualiza tu aplicación y sus
update
dependencias. Ver [Link]
v Salidas de la versión CLI angular.
version
xi18n Extrae mensajes i18n del código fuente.
[Link]