Angular Tutorial
Empezando con Angular
Buscar..
Observaciones
Angular (comúnmente denominado " Angular 2+ " o " Angular 2 ") es un marco web de front-end de código abierto basado en TypeScript liderado por el Angular Team en Google y por una comunidad de individuos y corporaciones para abordar todos los Partes del flujo de trabajo del desarrollador al crear aplicaciones web complejas. Angular es una reescritura completa del mismo equipo que creó AngularJS . ¹
El marco consta de varias bibliotecas , algunas de ellas básicas ( @ angular / core por ejemplo) y otras opcionales ( @ angular / animations ).
Las aplicaciones de Angular se escriben mediante la composición de plantillas HTML con marcado Angularized, la escritura de clases de componentes para administrar esas plantillas, la adición de la lógica de la aplicación en los servicios y los componentes de boxeo y los servicios en los módulos .
A continuación, inicie la aplicación mediante el arranque del módulo raíz . Angular asume el control, presenta el contenido de su aplicación en un navegador y responde a las interacciones de los usuarios de acuerdo con las instrucciones que ha proporcionado.
Podría decirse que la parte más fundamental del desarrollo de aplicaciones angulares son los componentes . Un componente es la combinación de una plantilla HTML y una clase de componente que controla una parte de la pantalla. Aquí hay un ejemplo de un componente que muestra una cadena simple:
src / app / app.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>` }) export class AppComponent { name = 'Angular'; }
Cada componente comienza con una función decoradora @Component que toma un objeto de metadatos . El objeto de metadatos describe cómo la plantilla HTML y la clase de componente trabajan juntas.
La propiedad del selector le dice a Angular que muestre el componente dentro de una etiqueta personalizada <my-app> en el archivo index.html .
index.html (dentro de la etiqueta del
body)<my-app>Loading AppComponent content here ...</my-app>
La propiedad de plantilla define un mensaje dentro de un encabezado <h1> . El mensaje comienza con "Hola" y termina con {{name}} , que es una expresión de enlace de interpolación angular. En tiempo de ejecución, Angular reemplaza {{name}} con el valor de la propiedad de name del componente. El enlace de interpolación es una de las muchas características angulares que descubrirá en esta documentación. En el ejemplo, cambie la propiedad de name la clase de componente de 'Angular' a 'World' y vea qué sucede.
Este ejemplo está escrito en TypeScript , un superconjunto de JavaScript. Angular utiliza TypeScript porque sus tipos facilitan el soporte de la productividad del desarrollador con herramientas. Además, casi todo el soporte es para TypeScript y, por lo tanto, será difícil usar JavaScript plano para escribir su aplicación. Escribir código angular en JavaScript es posible, sin embargo; Esta guía explica cómo.
Más información sobre la arquitectura de Angular se puede encontrar aquí.
Versiones
| Versión | Fecha de lanzamiento |
|---|---|
| 5.0.0-beta.1 (más reciente) | 2017-07-27 |
| 4.3.2 | 2017-07-26 |
| 5.0.0-beta.0 | 2017-07-19 |
| 4.3.1 | 2017-07-19 |
| 4.3.0 | 2017-07-14 |
| 4.2.6 | 2017-07-08 |
| 4.2.5 | 2017-06-09 |
| 4.2.4 | 2017-06-21 |
| 4.2.3 | 2017-06-16 |
| 4.2.2 | 2017-06-12 |
| 4.2.1 | 2017-06-09 |
| 4.2.0 | 2017-06-08 |
| 4.2.0-rc.2 | 2017-06-01 |
| 4.2.0-rc.1 | 2017-05-26 |
| 4.2.0-rc.0 | 2017-05-19 |
| 4.1.3 | 2017-05-17 |
| 4.1.2 | 2017-05-10 |
| 4.1.1 | 2017-05-04 |
| 4.1.0 | 2017-04-26 |
| 4.1.0-rc.0 | 2017-04-21 |
| 4.0.3 | 2017-04-21 |
| 4.0.2 | 2017-04-11 |
| 4.0.1 | 2017-03-29 |
| 4.0.0 | 2017-03-23 |
| 4.0.0-rc.6 | 2017-03-23 |
| 4.0.0-rc.5 | 2017-03-17 |
| 4.0.0-rc.4 | 2017-03-17 |
| 2.4.10 | 2017-03-17 |
| 4.0.0-rc.3 | 2017-03-10 |
| 2.4.9 | 2017-03-02 |
| 4.0.0-rc.2 | 2017-03-02 |
| 4.0.0-rc.1 | 2017-02-24 |
| 2.4.8 | 2017-02-18 |
| 2.4.7 | 2017-02-09 |
| 2.4.6 | 2017-02-03 |
| 2.4.5 | 2017-01-25 |
| 2.4.4 | 2017-01-19 |
| 2.4.3 | 2017-01-11 |
| 2.4.2 | 2017-01-06 |
| 2.4.1 | 2016-12-21 |
| 2.4.0 | 2016-12-20 |
| 2.3.1 | 2016-12-15 |
| 2.3.0 | 2016-12-07 |
| 2.3.0-rc.0 | 2016-11-30 |
| 2.2.4 | 2016-11-30 |
| 2.2.3 | 2016-11-23 |
| 2.2.2 | 2016-11-22 |
| 2.2.1 | 2016-11-17 |
| 2.2.0 | 2016-11-14 |
| 2.2.0-rc.0 | 2016-11-02 |
| 2.1.2 | 2016-10-27 |
| 2.1.1 | 2016-10-20 |
| 2.1.0 | 2016-10-12 |
| 2.1.0-rc.0 | 2016-10-05 |
| 2.0.2 | 2016-10-05 |
| 2.0.1 | 2016-09-23 |
| 2.0.0 | 2016-09-14 |
| 2.0.0-rc.7 | 2016-09-13 |
| 2.0.0-rc.6 | 2016-08-31 |
| 2.0.0-rc.5 | 2016-08-09 |
| 2.0.0-rc.4 | 2016-06-30 |
| 2.0.0-rc.3 | 2016-06-21 |
| 2.0.0-rc.2 | 2016-06-15 |
| 2.0.0-rc.1 | 2016-05-03 |
| 2.0.0-rc.0 | 2016-05-02 |
Instalación de Angular utilizando angulo-cli.
Este ejemplo es una configuración rápida de Angular y cómo generar un proyecto de ejemplo rápido.
Requisitos previos:
- Node.js 6.9.0 o mayor.
- npm v3 o mayor o hilo .
- Typings v1 o mayor.
Abra un 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 mecanografía globalmente (y agrega las typings ejecutables a PATH). El segundo instala @ angular / cli globalmente, agregando el ejecutable ng a PATH.
Para configurar un nuevo proyecto
Navegue con el terminal a una carpeta donde desee configurar el nuevo proyecto.
Ejecutar los comandos:
ng new PROJECT_NAME
cd PROJECT_NAME
ng serve
Eso es todo, ahora tienes 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.
Ejecuta el comando:
ng init
Esto agregará los andamios necesarios para su proyecto. Los archivos se crearán en el directorio actual, así que asegúrese de ejecutar esto en un directorio vacío.
Ejecutando 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 para su proyecto.
ng serve
Si el servidor se inició correctamente, debe mostrar una dirección en la que se ejecuta el servidor. Por lo general es esto:
http://localhost:4200
Fuera de la caja, este servidor de desarrollo local está conectado con la recarga de módulos calientes, por lo que cualquier cambio en el html, mecanografiado o css, hará que el navegador se vuelva a cargar automáticamente (pero se puede desactivar si se desea).
Generación de componentes, directivas, tuberías y servicios.
El comando ng generate <scaffold-type> <name> (o simplemente ng g <scaffold-type> <name> ) le permite generar automáticamente componentes Angulares:
# 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 g module my-new-module |
| Componente | ng g component my-new-component |
| Directiva | ng g directive my-new-directive |
| Tubo | ng g pipe my-new-pipe |
| Servicio | ng g service my-new-service |
| Clase | ng g class my-new-class |
| Interfaz | ng g interface my-new-interface |
| Enumerar | ng g enum my-new-enum |
También puede reemplazar el nombre del tipo por su primera letra. Por ejemplo:
ng gm my-new-module para generar un nuevo módulo o ng gc my-new-component para crear un componente.
Construcción / Bundling
Cuando haya terminado de construir 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 conjunto de indicadores de producción. La producción minimiza el código y se optimiza para un entorno de producción.
ng build
o
ng build --prod
Luego busque en la carpeta raíz del proyecto una carpeta /dist , que contiene la compilación.
Si desea obtener los beneficios de un paquete de producción más pequeño, también puede usar la compilación de la plantilla Anticipada, que elimina el compilador de la plantilla 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 puede gastarse. Las pruebas unitarias se escriben con jazmín y se ejecutan a través de Karma. Para iniciar la prueba ejecuta el siguiente comando:
ng test
Este comando ejecutará todas las pruebas en el 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 más información también visite: página angular-cli github
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.
Verifique que esté ejecutando al menos el nodo 6.9.xy npm 3.xx ejecutando los nodos -v y npm -v en una ventana de terminal / consola. Las versiones más antiguas producen errores, pero las versiones más nuevas están bien.
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 Node.js en Windows).
Creamos un nuevo proyecto y una aplicación de esqueleto usando el comando:
ng new my-app
Aquí la ng es para angular. Obtenemos una estructura de archivos algo como esto.
Hay muchos archivos. No tenemos que preocuparnos por todos ellos ahora.
Paso 2: Servir la aplicación
Lanzamos nuestra aplicación usando el siguiente comando:
ng serve
Podemos usar una bandera -open (o simplemente -o ) que abrirá automáticamente nuestro navegador en http://localhost:4200/
ng serve --open
Navegue el navegador a la dirección http://localhost:4200/ . Se ve algo como esto:
Paso 3: Editando nuestro primer componente angular.
El 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 ¡ Welcome to app!! a Hello World . El navegador se vuelve a cargar automáticamente con el título revisado.
Código original: Observe el title = 'app';
Código modificado: Se modifica el valor del title .
Del mismo modo, hay un cambio en ./src/app/app.component.html .
HTML original
HTML modificado
Observe que se mostrará el valor del title de ./src/app/app.component.ts . El navegador se vuelve a cargar automáticamente cuando se realizan los cambios. Se ve algo como esto.
Para encontrar más sobre el tema, visite este enlace aquí .