Comenzando con Angular

Instalación de Angular usando angular-cli

Este ejemplo es una configuración rápida de Angular y cómo generar un proyecto de ejemplo rápido.

Requisitos previos:

Abra una terminal y ejecute los comandos uno por uno:

npm install -g typings o yarn global add typings

npm install -g @angular/cli o yarn global add @angular/cli

El primer comando instala la [biblioteca de tipos][tipos] globalmente (y agrega el ejecutable tipos a PATH). El segundo instala @angular/cli globalmente, agregando el ejecutable ng a PATH.

Para configurar un nuevo proyecto

Navega con el terminal a una carpeta donde quieras configurar el nuevo proyecto.

Ejecute los comandos:

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve

Eso es todo, ahora tiene un proyecto de ejemplo simple hecho con Angular. Ahora puede navegar hasta el enlace que se muestra en la terminal y ver qué se está ejecutando.

Para agregar a un proyecto existente

Navegue a la raíz de su proyecto actual.

Ejecute el comando:

ng init

Esto agregará el andamiaje necesario a su proyecto. Los archivos se crearán en el directorio actual, así que asegúrese de ejecutar esto en un directorio vacío.

Ejecutar el proyecto localmente

Para ver e interactuar con su aplicación mientras se ejecuta en el navegador, debe iniciar un servidor de desarrollo local que aloje los archivos de su proyecto.

ng serve

Si el servidor se inició correctamente, debería mostrar una dirección en la que se está ejecutando el servidor. Suele ser esto:

http://localhost:4200

Fuera de la caja, este servidor de desarrollo local está conectado con Hot Module Reloading, por lo que cualquier cambio en html, mecanografiado o css activará la recarga automática del navegador (pero se puede desactivar si lo desea).

Generación de Componentes, Directrices, Tuberías y Servicios

El comando ng generate <scaffold-type> <name> (o simplemente ng g <scaffold-type> <name>) le permite generar automáticamente componentes Angular:

# The command below will generate a component in the folder you are currently at
ng generate component my-generated-component
# Using the alias (same outcome as above)
ng g component my-generated-component
# You can add --flat if you don't want to create new folder for a component
ng g component my-generated-component --flat
# You can add --spec false if you don't want a test file to be generated (my-generated-component.spec.ts)
ng g component my-generated-component --spec false

Hay varios tipos posibles de andamios que angular-cli puede generar:

Tipo de andamio Uso
Módulo ng módulo g mi-nuevo-módulo
Componente ng g componente mi-nuevo-componente
Directiva ng g directiva mi-nueva-directiva
Pipa ng g pipe my-new-pipe
Servicio ng g servicio mi-nuevo-servicio
Clase ng g clase mi-nueva-clase
Interfaz ng g interfaz mi-nueva-interfaz
enumeración ng g enum my-new-enum

También puede reemplazar el nombre del tipo por su primera letra. Por ejemplo:

ng g m my-new-module para generar un nuevo módulo o ng g c my-new-component para crear un componente.

Construcción/Paquetes

Cuando haya terminado de crear su aplicación web Angular y desee instalarla en un servidor web como Apache Tomcat, todo lo que necesita hacer es ejecutar el comando de compilación con o sin el indicador de producción establecido. La producción minimizará el código y lo optimizará para una configuración de producción.

ng build

o

ng build --prod

Luego busque en el directorio raíz de los proyectos una carpeta /dist, que contiene el archivo build.

Si desea los beneficios de un paquete de producción más pequeño, también puede usar la compilación de plantillas antes de tiempo, que elimina el compilador de plantillas de la compilación final:

ng build --prod --aot

Examen de la unidad

Angular proporciona pruebas unitarias integradas, y cada elemento creado por angular-cli genera una prueba unitaria básica, que se puede gastar. Las pruebas unitarias se escriben con jazmín y se ejecutan a través de Karma. Para comenzar a probar, ejecute el siguiente comando:

ng test

Este comando ejecutará todas las pruebas del proyecto y las volverá a ejecutar cada vez que cambie un archivo fuente, ya sea una prueba o un código de la aplicación.

Para obtener más información, también visite: angular-cli github page

Programa angular “Hola mundo”

requisitos previos:

Configuración del entorno de desarrollo

Antes de comenzar, tenemos que configurar nuestro entorno.

  • Instale Node.js y npm si aún no están en su máquina.

    Verify that you are running at least node 6.9.x and npm 3.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.

  • Instale Angular CLI globalmente usando npm install -g @angular/cli.


Paso 1: Creando un nuevo proyecto

Abra una ventana de terminal (o el símbolo del sistema de Node.js en Windows).

Creamos un nuevo proyecto y aplicación de esqueleto usando el comando:

ng new my-app

Aquí el ng es para Angular. Obtenemos una estructura de archivo algo como esto.

Estructura de archivo_1

Estructura de archivo_2

Hay muchos archivos. No necesitamos preocuparnos por todos ellos ahora.

Paso 2: Servir la solicitud

Lanzamos nuestra aplicación usando el siguiente comando:

ng serve

Podemos usar un indicador -open (o simplemente -o) que abrirá automáticamente nuestro navegador en http://localhost:4200/

ng serve --open

Navegue por el navegador a la dirección http://localhost:4200/. Se ve algo como esto:

Bienvenido a la aplicación

Paso 3: Editando nuestro primer componente Angular

La CLI creó el componente Angular predeterminado para nosotros. Este es el componente raíz y se llama app-root. Uno puede encontrarlo en ./src/app/app.component.ts.

Abra el archivo del componente y cambie la propiedad del título de ¡Bienvenido a la aplicación! a Hello World. El navegador se recarga automáticamente con el título revisado.

Código original: Observe el título = 'aplicación';

Código original

Código modificado: se cambia el valor de título.

Código modificado

Del mismo modo, hay un cambio en ./src/app/app.component.html.

HTML original

ingrese la descripción de la imagen aquí

HTML modificado

ingrese la descripción de la imagen aquí

Observe que se mostrará el valor de título de ./src/app/app.component.ts. El navegador se recarga automáticamente cuando se realizan los cambios. Se parece a esto.

Hola Mundo

Para encontrar más sobre el tema, visite este enlace aquí.