Angular 2 - Guía rápida

Angular JS es un marco de código abierto construido sobre JavaScript. Fue construido por los desarrolladores de Google. Este marco se utilizó para superar los obstáculos encontrados al trabajar con aplicaciones de página única. Además, las pruebas se consideraron un aspecto clave al construir el marco. Se aseguró que el marco se pudiera probar fácilmente. El lanzamiento inicial del marco fue en octubre de 2010.

Características de Angular 2

Las siguientes son las características clave de Angular 2:

  • Components- La versión anterior de Angular tenía un enfoque de controladores, pero ahora ha cambiado el enfoque para tener componentes sobre controladores. Los componentes ayudan a construir las aplicaciones en muchos módulos. Esto ayuda a mantener mejor la aplicación durante un período de tiempo.

  • TypeScript- La versión más nueva de Angular se basa en TypeScript. Este es un superconjunto de JavaScript y es mantenido por Microsoft.

  • Services- Los servicios son un conjunto de código que pueden compartir diferentes componentes de una aplicación. Entonces, por ejemplo, si tuviera un componente de datos que recogiera datos de una base de datos, podría tenerlo como un servicio compartido que podría usarse en múltiples aplicaciones.

Además, Angular 2 tiene mejores capacidades de manejo de eventos, potentes plantillas y mejor soporte para dispositivos móviles.

Componentes de Angular 2

Angular 2 tiene los siguientes componentes:

  • Modules- Se utiliza para dividir la aplicación en piezas lógicas de código. Cada pieza de código o módulo está diseñado para realizar una sola tarea.

  • Component - Esto se puede utilizar para unir los módulos.

  • Templates - Esto se usa para definir las vistas de una aplicación Angular JS.

  • Metadata - Esto se puede usar para agregar más datos a una clase Angular JS.

  • Service - Esto se utiliza para crear componentes que se pueden compartir en toda la aplicación.

Discutiremos todos estos componentes en detalle en los capítulos siguientes de este tutorial.

El sitio oficial de Angular es https://angular.io/ El sitio tiene toda la información y documentación sobre Angular 2.

Para comenzar a trabajar con Angular 2, debe instalar los siguientes componentes clave.

  • Npm- Esto se conoce como el administrador de paquetes de nodos que se utiliza para trabajar con los repositorios de código abierto. Angular JS como marco tiene dependencias de otros componentes. Ynpm se puede utilizar para descargar estas dependencias y adjuntarlas a su proyecto.

  • Git - Este es el software de código fuente que se puede utilizar para obtener la aplicación de muestra del github sitio angular.

  • Editor- Hay muchos editores que se pueden usar para el desarrollo de Angular JS, como el código de Visual Studio y WebStorm. En nuestro tutorial, usaremos el código de Visual Studio que es gratuito de Microsoft.

Instalación de npm

Veamos ahora los pasos para instalar npm. El sitio oficial de npm eshttps://www.npmjs.com/

Step 1 - Vaya a la sección "empezar con npm" en el sitio.

Step 2- En la siguiente pantalla, elija el instalador a descargar, dependiendo del sistema operativo. Para el propósito de este ejercicio, descargue la versión de Windows de 64 bits.

Step 3- Inicie el instalador. En la pantalla inicial, haga clic en el botón Siguiente.

Step 4 - En la siguiente pantalla, acepte el acuerdo de licencia y haga clic en el botón siguiente.

Step 5 - En la siguiente pantalla, elija la carpeta de destino para la instalación y haga clic en el botón Siguiente.

Step 6- Elija los componentes en la siguiente pantalla y haga clic en el botón Siguiente. Puede aceptar todos los componentes para la instalación predeterminada.

Step 7 - En la siguiente pantalla, haga clic en el botón Instalar.

Step 8 - Una vez completada la instalación, haga clic en el botón Finalizar.

Step 9- Para confirmar la instalación, en el símbolo del sistema puede emitir el comando npm version. Obtendrá el número de versión de npm como se muestra en la siguiente captura de pantalla.

Instalación de Visual Studio Code

A continuación se muestran las características de Visual Studio Code:

  • Editor ligero en comparación con la versión real de Visual Studio.

  • Se puede utilizar para codificar lenguajes como Clojure, Java, Objective-C y muchos otros lenguajes.

  • Extensión de Git incorporada.

  • Función IntelliSense incorporada.

  • Muchas más extensiones para desarrollo.

El sitio oficial para el código de Visual Studio es https://code.visualstudio.com/

Step 1- Una vez completada la descarga, siga los pasos de instalación. En la pantalla inicial, haga clic en el botón Siguiente.

Step 2 - En la siguiente pantalla, acepte el acuerdo de licencia y haga clic en el botón Siguiente.

Step 3 - En la siguiente pantalla, elija la ubicación de destino para la instalación y haga clic en el botón siguiente.

Step 4 - Elija el nombre del acceso directo del programa y haga clic en el botón Siguiente.

Step 5 - Acepte la configuración predeterminada y haga clic en el botón Siguiente.

Step 6 - Haga clic en el botón Instalar en la siguiente pantalla.

Step 7 - En la pantalla final, haga clic en el botón Finalizar para iniciar Visual Studio Code.

Instalación de Git

Algunas de las características clave de Git son:

  • Fácil bifurcación y fusión de código.
  • Provisión para usar muchas técnicas para el flujo de código dentro de Git.
  • Git es muy rápido en comparación con otras herramientas SCM.
  • Ofrece una mejor garantía de datos.
  • Libre y de código abierto.

El sitio oficial de Git es https://git-scm.com/

Step 1- Una vez completada la descarga, siga los pasos de instalación. En la pantalla inicial, haga clic en el botón Siguiente.

Step 2- Elija los componentes que necesita instalar. Puede aceptar los componentes predeterminados.

Step 3 - En el siguiente paso, elija el nombre del acceso directo del programa y haga clic en el botón Siguiente.

Step 4 - Acepte el ejecutable SSH predeterminado y haga clic en el botón Siguiente.

Step 5 - Acepte la configuración predeterminada de "Obtener estilo de Windows, confirmar finales de estilo Unix" y haga clic en el botón Siguiente.

Step 6 - Ahora, acepte la configuración predeterminada del emulador de terminal y haga clic en el botón Siguiente.

Step 7 - Acepte la configuración predeterminada y haga clic en el botón Siguiente.

Step 8 - Puede omitir las opciones experimentales y hacer clic en el botón Instalar.

Step 9 - En la pantalla final, haga clic en el botón Finalizar para completar la instalación.

Hay varias formas de comenzar con su primera aplicación Angular JS.

  • Una forma es hacer todo desde cero, que es la forma más difícil y no la preferida. Debido a las muchas dependencias, resulta difícil obtener esta configuración.

  • Otra forma es utilizar el inicio rápido en Angular Github. Contiene el código necesario para comenzar. Esto es normalmente lo que optan todos los desarrolladores y esto es lo que mostraremos para la aplicación Hello World.

  • La última forma es usar Angular CLI. Discutiremos esto en detalle en un capítulo separado.

Los siguientes son los pasos para poner en marcha una aplicación de muestra a través de github.

Step 1 - Ir a la URL de github - https://github.com/angular/quickstart

Step 2- Vaya a su símbolo del sistema, cree un directorio de proyecto. Puede ser un directorio vacío. En nuestro ejemplo, hemos creado un directorio llamado Proyecto.

Step 3- A continuación, en el símbolo del sistema, vaya a este directorio y emita el siguiente comando para clonar el repositorio de github en su sistema local. Puede hacer esto emitiendo el siguiente comando:

git clone https://github.com/angular/quickstart Demo

Esto creará una aplicación de muestra de Angular JS en su máquina local.

Step 4 - Abra el código en código de Visual Studio.

Step 5 - Vaya al símbolo del sistema y en la carpeta de su proyecto nuevamente y emita el siguiente comando:

npm install

Esto instalará todos los paquetes necesarios que se requieren para que funcione la aplicación Angular JS.

Una vez hecho esto, debería ver una estructura de árbol con todas las dependencias instaladas.

Step 6- Vaya a la carpeta Demo → src → app → app.component.ts. Encuentra las siguientes líneas de código:

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent  { name = 'Angular'; }

Y reemplace la palabra clave Angular con World como se muestra a continuación:

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent  { name = 'World'; }

Hay otros archivos que se crean como parte de la creación del proyecto para la aplicación Angular 2. Por el momento, no necesita preocuparse por los otros archivos de código porque todos están incluidos como parte de su aplicación Angular 2 y no es necesario cambiarlos para la aplicación Hello World.

Discutiremos estos archivos en los capítulos siguientes en detalle.

Note - Visual Studio Code compilará automáticamente todos sus archivos y creará archivos JavaScript para todos sus archivos mecanografiados.

Step 7- Ahora vaya a su símbolo del sistema y emita el comando npm start. Esto hará que el administrador de paquetes de Node inicie un servidor web ligero e inicie su aplicación Angular.

La aplicación Angular JS ahora se iniciará en el navegador y verá "Hello World" en el navegador como se muestra en la siguiente captura de pantalla.

Despliegue

Este tema se centra en la implementación de la aplicación Hola mundo anterior. Dado que se trata de una aplicación Angular JS, se puede implementar en cualquier plataforma. Tu desarrollo puede estar en cualquier plataforma.

En este caso, estará en Windows usando código de Visual Studio. Ahora veamos dos opciones de implementación.

Implementación en servidores NGNIX en Windows

Tenga en cuenta que puede usar cualquier servidor web en cualquier plataforma para alojar aplicaciones Angular JS. En este caso, tomaremos el ejemplo de NGNIX, que es un servidor web popular.

Step 1 - Descargue el servidor web NGNIX desde la siguiente URL http://nginx.org/en/download.html

Step 2- Después de extraer el archivo zip descargado, ejecute el componente exe nginx que hará que el servidor web se ejecute en segundo plano. Luego podrá ir a la página de inicio en la URL -http://localhost

Step 3 - Vaya a la carpeta del proyecto Angular JS en el explorador de Windows.

Step 4 - Copie la carpeta Project → Demo → node-modules.

Step 5 - Copie todo el contenido de la carpeta Proyecto → Demo → src.

Step 6 - Copie todo el contenido en la carpeta nginx / html.

Ahora ve a la URL - http://localhost, verá la aplicación Hola mundo como se muestra en la siguiente captura de pantalla.

Configuración en Ubuntu

Ahora veamos cómo alojar la misma aplicación Hello World en un servidor Ubuntu.

Step 1 - Emita los siguientes comandos en su servidor Ubuntu para instalar nginx.

apt-get update

El comando anterior garantizará que todos los paquetes del sistema estén actualizados.

Una vez hecho esto, el sistema debería estar actualizado.

Step 2 - Ahora, instale GIT en el servidor de Ubuntu emitiendo el siguiente comando.

sudo apt-get install git

Una vez hecho esto, GIT se instalará en el sistema.

Step 3 - Para comprobar el git versión, emita el siguiente comando.

sudo git –version

Step 4 - Instalar npmque es el administrador de paquetes de nodos en Ubuntu. Para hacer esto, emita el siguiente comando.

sudo apt-get install npm

Una vez hecho, npm se instalará en el sistema.

Step 5 - Para comprobar el npm versión, emita el siguiente comando.

sudo npm -version

Step 6 - A continuación, instale nodejs. Esto se puede hacer mediante el siguiente comando.

sudo npm install nodejs

Step 7 - Para ver la versión de Node.js, simplemente ejecute el siguiente comando.

sudo nodejs –version

Step 8 - Cree una carpeta de proyecto y descargue el proyecto de inicio de github usando el siguiente comando de git.

git clone https://github.com/angular/quickstart Demo

Esto descargará todos los archivos en el sistema local.

Puede navegar por la carpeta para ver que los archivos se han descargado correctamente desde github.

Step 9 - A continuación, emita el siguiente comando para npm.

npm install

Esto instalará todos los paquetes necesarios que se requieren para que la aplicación Angular JS funcione.

Una vez hecho esto, verá todas las dependencias instaladas en el sistema.

Step 10- Vaya a la carpeta Demo → src → app → app.component.ts. Utilice el editor vim si es necesario. Encuentra las siguientes líneas de código:

import { Component } from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   template: '<h1>Hello {{name}}</h1>'; 
}) 
export class AppComponent { name = 'Angular'; }

Y reemplace la palabra clave Angular con World como se muestra en el siguiente código.

import { Component } from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   template: '<h1>Hello {{name}}</h1>'; 
}) 
export class AppComponent { name = 'World'; }

Hay otros archivos que se crean como parte de la creación del proyecto para la aplicación Angular 2. Por el momento, no necesita preocuparse por los otros archivos de código porque están incluidos como parte de su aplicación Angular 2 y no es necesario cambiarlos para la aplicación Hello World.

Discutiremos estos archivos en los capítulos siguientes en detalle.

Step 11- A continuación, instale el servidor lite que se puede utilizar para ejecutar la aplicación Angular 2. Puede hacer esto emitiendo el siguiente comando:

sudo npm install –save-dev lite-server

Una vez hecho esto, verá el estado de finalización. No necesita preocuparse por las advertencias.

Step 12- Cree un enlace simbólico a la carpeta del nodo mediante el siguiente comando. Esto ayuda a garantizar que el administrador de paquetes de nodos pueda ubicar la instalación de nodejs.

sudo ln -s /usr/bin/nodejs /usr/bin/node

Step 13- Ahora es el momento de iniciar la aplicación Angular 2 a través del comando npm start. Esto primero creará los archivos y luego iniciará la aplicación Angular en el servidor lite que se instaló en el paso anterior.

Emita el siguiente comando:

sudo npm start

Una vez hecho esto, se le presentará la URL.

Si va a la URL, ahora verá la aplicación Angular 2 cargando el navegador.

Implementación de nginx en Ubuntu

Note- Puede utilizar cualquier servidor web en cualquier plataforma para alojar aplicaciones Angular JS. En este caso, tomaremos el ejemplo de NGNIX, que es un servidor web popular.

Step 1 - Emita el siguiente comando en su servidor Ubuntu para instalar nginx como servidor web.

sudo apt-get update

Este comando asegurará que todos los paquetes del sistema estén actualizados.

Una vez hecho esto, el sistema debería estar actualizado.

Step 2 - Ahora emita el siguiente comando para instalar nginx.

apt-get install nginx

Una vez hecho esto, nginx se ejecutará en segundo plano.

Step 3 - Ejecute el siguiente comando para confirmar que el nginx los servicios están funcionando.

ps –ef | grep nginx

Ahora, de forma predeterminada, los archivos para nginx se almacenan en la carpeta / var / www / html. Por lo tanto, otorgue los permisos necesarios para copiar sus archivos Hello World en esta ubicación.

Step 4 - Emita el siguiente comando.

sudo chmod 777 /var/www/html

Step 5 - Copie los archivos usando cualquier método para copiar los archivos del proyecto a la carpeta / var / www / html.

Ahora, si navega hasta la URL ... http://192.168.1.200/index.html encontrará la aplicación Hello world Angular JS.

Los módulos se utilizan en Angular JS para poner límites lógicos en su aplicación. Por lo tanto, en lugar de codificar todo en una aplicación, puede construir todo en módulos separados para separar la funcionalidad de su aplicación. Inspeccionemos el código que se agrega a la aplicación de demostración.

En el código de Visual Studio, vaya a la carpeta app.module.ts en la carpeta de su aplicación. Esto se conoce como la clase de módulo raíz.

El siguiente código estará presente en el app.module.ts archivo.

import { NgModule }      from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser';  
import { AppComponent }  from './app.component';  

@NgModule ({ 
   imports:      [ BrowserModule ], 
   declarations: [ AppComponent ], 
   bootstrap:    [ AppComponent ] 
}) 
export class AppModule { }

Repasemos cada línea del código en detalle.

  • La declaración de importación se utiliza para importar la funcionalidad de los módulos existentes. Por lo tanto, las primeras 3 declaraciones se utilizan para importar los módulos NgModule, BrowserModule y AppComponent en este módulo.

  • El decorador NgModule se utiliza para definir posteriormente las opciones de importación, declaración y arranque.

  • El BrowserModule es necesario de forma predeterminada para cualquier aplicación angular basada en web.

  • La opción bootstrap le dice a Angular qué Componente arrancar en la aplicación.

Un módulo se compone de las siguientes partes:

  • Bootstrap array- Esto se usa para decirle a Angular JS qué componentes deben cargarse para que se pueda acceder a su funcionalidad en la aplicación. Una vez que incluya el componente en la matriz de arranque, debe declararlos para que puedan usarse en otros componentes en la aplicación Angular JS.

  • Export array - Se utiliza para exportar componentes, directivas y canalizaciones que luego se pueden utilizar en otros módulos.

  • Import array - Al igual que la matriz de exportación, la matriz de importación se puede utilizar para importar la funcionalidad de otros módulos de Angular JS.

La siguiente captura de pantalla muestra la anatomía de una aplicación Angular 2. Cada aplicación consta de componentes. Cada componente es un límite lógico de funcionalidad para la aplicación. Debe tener servicios en capas, que se utilizan para compartir la funcionalidad entre los componentes.

A continuación se muestra la anatomía de un componente. Un componente consta de:

  • Class - Es como una clase C ++ o Java que consta de propiedades y métodos.

  • Metadata - Esto se utiliza para decorar la clase y ampliar la funcionalidad de la clase.

  • Template - Se utiliza para definir la vista HTML que se muestra en la aplicación.

A continuación se muestra un ejemplo de un componente.

import { Component } from '@angular/core';

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   appTitle: string = 'Welcome';
}

Cada aplicación está compuesta por módulos. Cada aplicación de Angular 2 debe tener un módulo raíz angular. Cada módulo de raíz angular puede tener varios componentes para separar la funcionalidad.

A continuación se muestra un ejemplo de un módulo raíz.

import { NgModule }      from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent }  from './app.component';  

@NgModule ({ 
   imports:      [ BrowserModule ], 
   declarations: [ AppComponent ], 
   bootstrap:    [ AppComponent ] 
}) 
export class AppModule { }

Cada aplicación se compone de módulos de funciones donde cada módulo tiene una función separada de la aplicación. Cada módulo de funciones de Angular puede tener varios componentes para separar la funcionalidad.

Los componentes son una pieza lógica de código para la aplicación Angular JS. Un componente consta de lo siguiente:

  • Template- Se utiliza para representar la vista de la aplicación. Contiene el HTML que se debe procesar en la aplicación. Esta parte también incluye las directivas vinculantes.

  • Class- Es como una clase definida en cualquier lenguaje como C. Contiene propiedades y métodos. Tiene el código que se utiliza para respaldar la vista. Está definido en TypeScript.

  • Metadata- Esto tiene los datos adicionales definidos para la clase Angular. Se define con un decorador.

Vayamos ahora al archivo app.component.ts y creemos nuestro primer componente Angular.

Agreguemos el siguiente código al archivo y veamos cada aspecto en detalle.

Clase

El decorador de clases. La clase está definida en TypeScript. La clase normalmente tiene la siguiente sintaxis en TypeScript.

Sintaxis

class classname {
   Propertyname: PropertyType = Value
}

Parámetros

  • Classname - Este es el nombre que se le dará a la clase.

  • Propertyname - Este es el nombre que se le dará a la propiedad.

  • PropertyType - Dado que TypeScript está fuertemente tipado, debe asignar un tipo a la propiedad.

  • Value - Este es el valor que se le dará a la propiedad.

Ejemplo

export class AppComponent {
   appTitle: string = 'Welcome';
}

En el ejemplo, deben tenerse en cuenta las siguientes cosas:

  • Estamos definiendo una clase llamada AppComponent.

  • La palabra clave export se usa para que el componente se pueda usar en otros módulos en la aplicación Angular JS.

  • appTitle es el nombre de la propiedad.

  • A la propiedad se le da el tipo de cadena.

  • La propiedad recibe un valor de 'Bienvenida'.

Modelo

Esta es la vista que debe renderizarse en la aplicación.

Sintaxis

Template: '
   <HTML code>
   class properties
'

Parámetros

  • HTML Code - Este es el código HTML que debe procesarse en la aplicación.

  • Class properties - Estas son las propiedades de la clase a las que se puede hacer referencia en la plantilla.

Ejemplo

template: '
   <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div>
'

En el ejemplo, deben tenerse en cuenta las siguientes cosas:

  • Estamos definiendo el código HTML que se renderizará en nuestra aplicación.

  • También estamos haciendo referencia a la propiedad appTitle de nuestra clase.

Metadatos

Esto se usa para decorar la clase Angular JS con información adicional.

Echemos un vistazo al código completo con nuestra clase, plantilla y metadatos.

Ejemplo

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: ` <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div> `,
})

export class AppComponent {
   appTitle: string = 'Welcome';
}

En el ejemplo anterior, se deben tener en cuenta las siguientes cosas:

  • Estamos usando la palabra clave de importación para importar el decorador 'Componente' del módulo angular / core.

  • Luego usamos el decorador para definir un componente.

  • El componente tiene un selector llamado 'my-app'. Esto no es más que nuestra etiqueta html personalizada que se puede utilizar en nuestra página principal html.

Ahora, vayamos a nuestro archivo index.html en nuestro código.

Asegurémonos de que la etiqueta del cuerpo ahora contenga una referencia a nuestra etiqueta personalizada en el componente. Por lo tanto, en el caso anterior, debemos asegurarnos de que la etiqueta del cuerpo contenga el siguiente código:

<body>
   <my-app></my-app>
</body>

Salida

Ahora, si vamos al navegador y vemos la salida, veremos que la salida se representa como está en el componente.

En el capítulo de Componentes, ya hemos visto un ejemplo de la siguiente plantilla.

template: '
   <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div>
'

Esto se conoce como inline template. Hay otras formas de definir una plantilla y eso se puede hacer a través del comando templateURL. La forma más sencilla de utilizar esto en el componente es la siguiente.

Sintaxis

templateURL:
viewname.component.html

Parámetros

  • viewname - Este es el nombre del módulo del componente de la aplicación.

Después del nombre de la vista, el componente debe agregarse al nombre del archivo.

Los siguientes son los pasos para definir una plantilla en línea.

Step 1- Cree un archivo llamado app.component.html. Este contendrá el código html de la vista.

Step 2 - Agregue el siguiente código en el archivo creado anteriormente.

<div>{{appTitle}} Tutorialspoint </div>

Esto define una etiqueta div simple y hace referencia a la propiedad appTitle de la clase app.component.

Step 3 - En el archivo app.component.ts, agregue el siguiente código.

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'  
})

export class AppComponent {
   appTitle: string = 'Welcome';
}

A partir del código anterior, el único cambio que se puede notar es en templateURL, que proporciona el enlace al archivo app.component.html que se encuentra en la carpeta de la aplicación.

Step 4 - Ejecute el código en el navegador, obtendrá el siguiente resultado.

En la salida, se puede ver que el archivo de plantilla (app.component.html) se llama en consecuencia.

UN directivees un elemento HTML personalizado que se utiliza para ampliar el poder de HTML. Angular 2 tiene las siguientes directivas que se llaman como parte del módulo BrowserModule.

  • ngif
  • ngFor

Si ve el archivo app.module.ts, verá el siguiente código y el módulo BrowserModule definido. Al definir este módulo, tendrá acceso a las 2 directivas.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

@NgModule ({
   imports:      [ BrowserModule ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
})
export class AppModule { }

Ahora veamos cada directiva en detalle.

ng Si

los ngif El elemento se usa para agregar elementos al código HTML si se evalúa como verdadero; de lo contrario, no agregará los elementos al código HTML.

Sintaxis

*ngIf = 'expression'

Si la expresión se evalúa como verdadera, se agrega el correspondiente; de ​​lo contrario, los elementos no se agregan.

Veamos ahora un ejemplo de cómo podemos usar la directiva * ngif.

Step 1- Primero agregue una propiedad a la clase llamada appStatus. Este será de tipo booleano. Mantengamos este valor como verdadero.

import { Component } from '@angular/core';  

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   appTitle: string = 'Welcome';
   appStatus: boolean = true;
}

Step 2 - Ahora en el archivo app.component.html, agregue el siguiente código.

<div *ngIf = 'appStatus'>{{appTitle}} Tutorialspoint </div>

En el código anterior, ahora tenemos la directiva * ngIf. En la directiva estamos evaluando el valor de la propiedad appStatus. Dado que el valor de la propiedad debe evaluarse como verdadero, significa que la etiqueta div debe mostrarse en el navegador.

Una vez que agreguemos el código anterior, obtendremos el siguiente resultado en el navegador.

Salida

ngFor

los ngFor element se usa para elementos basados ​​en la condición del bucle For.

Sintaxis

*ngFor = 'let variable of variablelist'

La variable es una variable temporal para mostrar los valores en el variablelist.

Echemos ahora un vistazo a un ejemplo de cómo podemos usar la directiva * ngFor.

Step 1- Primero agregue una propiedad a la clase llamada appList. Este será del tipo que se puede utilizar para definir cualquier tipo de matrices.

import { Component } from '@angular/core';
 
@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   appTitle: string = 'Welcome';
   appList: any[] = [ {
      "ID": "1",
      "Name" : "One"
   },

   {
      "ID": "2",
      "Name" : "Two"
   } ];
}

Por lo tanto, estamos definiendo appList como una matriz que tiene 2 elementos. Cada elemento tiene 2 subpropiedades como ID y Nombre.

Step 2 - En app.component.html, defina el siguiente código.

<div *ngFor = 'let lst of appList'> 
   <ul> 
      <li>{{lst.ID}}</li> 
      <li>{{lst.Name}}</li> 
   </ul> 
</div>

En el código anterior, ahora estamos usando la directiva ngFor para iterar a través de la matriz appList. Luego definimos una lista donde cada elemento de la lista es el parámetro de ID y nombre de la matriz.

Una vez que agreguemos el código anterior, obtendremos el siguiente resultado en el navegador.

Salida

Los metadatos se utilizan para decorar una clase de modo que pueda configurar el comportamiento esperado de la clase. A continuación se muestran las diferentes partes de los metadatos.

Annotations- Estos son decoradores a nivel de clase. Esta es una matriz y un ejemplo que tiene el decorador @Component y @Routes.

A continuación se muestra un código de muestra, que está presente en el archivo app.component.ts.

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
})

El decorador de componentes se utiliza para declarar la clase en el archivo app.component.ts como un componente.

  • Design:paramtypes - Estos solo se usan para los constructores y se aplican solo a Typecript.

  • propMetadata - Estos son los metadatos que se aplican a las propiedades de la clase.

A continuación se muestra un código de ejemplo.

export class AppComponent {
   @Environment(‘test’)
   appTitle: string = 'Welcome';
}

Aquí, @Environment son los metadatos aplicados a la propiedad appTitle y el valor dado es 'prueba'.

Parameters - Esto lo establecen los decoradores a nivel de constructor.

A continuación se muestra un código de ejemplo.

export class AppComponent {
   constructor(@Environment(‘test’ private appTitle:string) { }
}

En el ejemplo anterior, los metadatos se aplican a los parámetros del constructor.

El enlace bidireccional era una funcionalidad en Angular JS, pero se ha eliminado de Angular 2.x en adelante. Pero ahora, desde el evento de clases en Angular 2, podemos vincularnos a propiedades en la clase AngularJS.

Suponga que tiene una clase con un nombre de clase, una propiedad que tiene un tipo y un valor.

export class className {
   property: propertytype = value;
}

A continuación, podría vincular la propiedad de una etiqueta html a la propiedad de la clase.

<html tag htmlproperty = 'property'>

El valor de la propiedad se asignaría a la propiedad html del html.

Veamos un ejemplo de cómo podemos lograr la vinculación de datos. En nuestro ejemplo, veremos cómo se muestran las imágenes en las que la fuente de las imágenes vendrá de las propiedades de nuestra clase. Los siguientes son los pasos para lograrlo.

Step 1- Descargue 2 imágenes. Para este ejemplo, descargaremos algunas imágenes simples que se muestran a continuación.

Step 2 - Almacene estas imágenes en una carpeta llamada Imagesen el directorio de la aplicación. Si la carpeta de imágenes no está presente, créela.

Step 3 - Agregue el siguiente contenido en app.component.ts como se muestra a continuación.

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   appTitle: string = 'Welcome';
   appList: any[] = [ {
      "ID": "1",
      "url": 'app/Images/One.jpg'
   },

   {
      "ID": "2",
      "url": 'app/Images/Two.jpg'
   } ];
}

Step 4 - Agregue el siguiente contenido en app.component.html como se muestra a continuación.

<div *ngFor = 'let lst of appList'>
   <ul>
      <li>{{lst.ID}}</li>
      <img [src] = 'lst.url'>
   </ul>
</div>

En el archivo app.component.html anterior, estamos accediendo a las imágenes desde las propiedades de nuestra clase.

Salida

La salida del programa anterior debería ser así:

La operación CRUD básica que veremos en este capítulo es la lectura de datos de un servicio web usando Angular 2.

Ejemplo

En este ejemplo, vamos a definir una fuente de datos que es un simple jsonarchivo de productos. A continuación, vamos a definir un servicio que se utilizará para leer los datos deljsonarchivo. Y luego, usaremos este servicio en nuestro archivo principal app.component.ts.

Step 1 - Primero definamos nuestro archivo product.json en código de Visual Studio.

En el archivo products.json, ingrese el siguiente texto. Estos serán los datos que se tomarán de la aplicación Angular JS.

[{
   "ProductID": 1,
   "ProductName": "ProductA"
},

{
   "ProductID": 2,
   "ProductName": "ProductB"
}]

Step 2- Definir una interfaz que será la definición de clase para almacenar la información de nuestro archivo products.json. Cree un archivo llamado products.ts.

Step 3 - Inserte el siguiente código en el archivo.

export interface IProduct {
   ProductID: number;
   ProductName: string;
}

La interfaz anterior tiene la definición de ProductID y ProductName como propiedades para la interfaz.

Step 4 - En el archivo app.module.ts incluya el siguiente código -

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { HttpModule } from '@angular/http';

@NgModule ({
   imports:      [ BrowserModule,HttpModule],
   declarations: [ AppComponent],
   bootstrap:    [ AppComponent ]
})
export class AppModule { }

Step 5 - Definir un archivo products.service.ts en código de Visual Studio

Step 6 - Inserte el siguiente código en el archivo.

import { Injectable } from '@angular/core';
import { Http , Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import { IProduct } from './product';

@Injectable()
export class ProductService {
   private _producturl='app/products.json';
   constructor(private _http: Http){}
   
   getproducts(): Observable<IProduct[]> {
      return this._http.get(this._producturl)
      .map((response: Response) => <IProduct[]> response.json())
      .do(data => console.log(JSON.stringify(data)));
   }
}

Es necesario señalar los siguientes puntos sobre el programa anterior.

  • La declaración import {Http, Response} de '@ angular / http' se usa para garantizar que la función http se pueda usar para obtener los datos del archivo products.json.

  • Las siguientes declaraciones se utilizan para hacer uso del marco reactivo que se puede utilizar para crear una variable observable. El marco Observable se utiliza para detectar cualquier cambio en la respuesta http que luego se puede enviar de vuelta a la aplicación principal.

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
  • La declaración private _producturl = 'app / products.json' en la clase se usa para especificar la ubicación de nuestra fuente de datos. También puede especificar la ubicación del servicio web si es necesario.

  • A continuación, definimos una variable del tipo Http que se utilizará para obtener la respuesta de la fuente de datos.

  • Una vez que obtenemos los datos de la fuente de datos, usamos el comando JSON.stringify (data) para enviar los datos a la consola en el navegador.

Step 7 - Ahora en el archivo app.component.ts, coloque el siguiente código.

import { Component } from '@angular/core';
import { IProduct } from './product';
import { ProductService } from './products.service';
import { appService } from './app.service';
import { Http , Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Component ({
   selector: 'my-app',
   template: '<div>Hello</div>',
   providers: [ProductService]
})

export   class   AppComponent  {
   iproducts: IProduct[];
   constructor(private _product: ProductService) {
   }
   
   ngOnInit() : void {
      this._product.getproducts()
      .subscribe(iproducts => this.iproducts = iproducts);
   }
}

Aquí, lo principal en el código es la opción de suscripción que se usa para escuchar la función Observable getproducts () para escuchar los datos de la fuente de datos.

Ahora guarde todos los códigos y ejecute la aplicación usando npm. Vaya al navegador, veremos el siguiente resultado.

En la consola, veremos los datos que se recuperan del archivo products.json.

Las aplicaciones de Angular 2 tienen la opción de manejo de errores. Esto se hace al incluir la biblioteca catch de ReactJS y luego usar la función catch.

Veamos el código requerido para el manejo de errores. Este código se puede agregar en la parte superior del capítulo para operaciones CRUD usando http.

En el archivo product.service.ts, ingrese el siguiente código:

import { Injectable } from '@angular/core'; 
import { Http , Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 

import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/do'; 
import 'rxjs/add/operator/catch'; 
import { IProduct } from './product';  

@Injectable() 
export class ProductService { 
   private _producturl = 'app/products.json'; 
   constructor(private _http: Http){}  

   getproducts(): Observable<IProduct[]> { 
      return this._http.get(this._producturl) 
      .map((response: Response) => <IProduct[]> response.json()) 
      .do(data => console.log(JSON.stringify(data))) 
      .catch(this.handleError); 
   }  
   
   private handleError(error: Response) { 
      console.error(error); 
      return Observable.throw(error.json().error()); 
   } 
}
  • La función de captura contiene un enlace a la función de controlador de errores.

  • En la función del controlador de errores, enviamos el error a la consola. También devolvemos el error al programa principal para que la ejecución pueda continuar.

Ahora, siempre que reciba un error, será redirigido a la consola de errores del navegador.

El enrutamiento ayuda a dirigir a los usuarios a diferentes páginas según la opción que elijan en la página principal. Por lo tanto, según la opción que elijan, el componente angular requerido se mostrará al usuario.

Veamos los pasos necesarios para ver cómo podemos implementar el enrutamiento en una aplicación Angular 2.

Step 1 - Agregue la etiqueta de referencia base en el archivo index.html.

<!DOCTYPE html>
<html>
   <head>
      <base href = "/">
      <title>Angular QuickStart</title>
      <meta charset = "UTF-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      
      <base href = "/">
      <link rel = "stylesheet" href = "styles.css">

      <!-- Polyfill(s) for older browsers -->
      <script src = "node_modules/core-js/client/shim.min.js"></script>
      <script src = "node_modules/zone.js/dist/zone.js"></script>
      <script src = "node_modules/systemjs/dist/system.src.js"></script>
      <script src = "systemjs.config.js"></script>

      <script>
         System.import('main.js').catch(function(err){ console.error(err); });
      </script>
   </head>

   <body>
      <my-app></my-app>
   </body>
</html>

Step 2- Crea dos rutas para la aplicación. Para ello, cree 2 archivos llamadosInventory.component.ts y product.component.ts

Step 3 - Coloque el siguiente código en el archivo product.component.ts.

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: 'Products',
})
export   class   Appproduct  {
}

Step 4 - Coloque el siguiente código en el archivo Inventory.component.ts.

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: 'Inventory',
})
export class AppInventory  {
}

Ambos componentes no hacen nada elegante, solo representan las palabras clave según el componente. Entonces, para el componente Inventario, mostrará la palabra clave Inventario al usuario. Y para el componente de productos, mostrará la palabra clave del producto al usuario.

Step 5 - En el archivo app.module.ts, agregue el siguiente código -

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { Appproduct } from './product.component';
import { AppInventory } from './Inventory.component';
import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
   { path: 'Product', component: Appproduct },
   { path: 'Inventory', component: AppInventory },
];

@NgModule ({
   imports: [ BrowserModule,
   RouterModule.forRoot(appRoutes)],
   declarations: [ AppComponent,Appproduct,AppInventory],
   bootstrap: [ AppComponent ]
})
export class AppModule { }

Los siguientes puntos deben tenerse en cuenta sobre el programa anterior:

  • Las appRoutes contienen 2 rutas, una es el componente Appproduct y la otra es el componente AppInventory.

  • Asegúrese de declarar ambos componentes.

  • RouterModule.forRoot asegura agregar las rutas a la aplicación.

Step 6 - En el archivo app.component.ts, agregue el siguiente código.

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: `
   <ul>
      <li><a [routerLink] = "['/Product']">Product</a></li>
      <li><a [routerLink] = "['/Inventory']">Inventory</a></li>
   </ul>
   <router-outlet></router-outlet>`
})
export class AppComponent  { }

Debe tenerse en cuenta el siguiente punto sobre el programa anterior:

  • <router-outlet> </router-outlet> es el marcador de posición para representar el componente según la opción que elija el usuario.

Ahora, guarde todo el código y ejecute la aplicación usando npm. Vaya al navegador, verá el siguiente resultado.

Ahora, si hace clic en el enlace Inventario, obtendrá el siguiente resultado.

Agregar una ruta de error

En Enrutamiento, también se puede agregar una ruta de error. Esto puede suceder si el usuario accede a una página que no existe en la aplicación.

Veamos cómo podemos implementar esto.

Step 1 - Agregue un componente PageNotFound como NotFound.component.ts como se muestra a continuación -

Step 2 - Agregue el siguiente código al nuevo archivo.

import { Component } from '@angular/core';

@Component ({  
   selector: 'my-app',  
   template: 'Not Found', 
})  
export class PageNotFoundComponent {  
}

Step 3 - Agregue el siguiente código al archivo app.module.ts.

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { Appproduct } from './product.component' 
import { AppInventory } from  './Inventory.component' 
import { PageNotFoundComponent } from  './NotFound.component' 
import { RouterModule, Routes } from '@angular/router';  

const appRoutes: Routes = [ 
   { path: 'Product', component: Appproduct }, 
   { path: 'Inventory', component: AppInventory }, 
   { path: '**', component: PageNotFoundComponent } 
];  

@NgModule ({ 
   imports: [ BrowserModule, 
   RouterModule.forRoot(appRoutes)], 
   declarations: [ AppComponent,Appproduct,AppInventory,PageNotFoundComponent], 
   bootstrap: [ AppComponent ] 
}) 

export class AppModule {
}

Debe tenerse en cuenta el siguiente punto sobre el programa anterior:

  • Ahora tenemos una ruta adicional llamada ruta: '**', componente: PageNotFoundComponent. Por lo tanto, ** es para cualquier ruta que no se ajuste a la ruta predeterminada. Serán dirigidos al componente PageNotFoundComponent.

Ahora, guarde todo el código y ejecute la aplicación usando npm. Vaya a su navegador y verá el siguiente resultado. Ahora, cuando vaya a cualquier enlace incorrecto, obtendrá el siguiente resultado.

En Angular 2, también es posible realizar una navegación manual. Los siguientes son los pasos.

Step 1 - Agregue el siguiente código al archivo Inventory.component.ts.

import { Component } from '@angular/core'; 
import { Router }  from '@angular/router';  

@Component ({  
   selector: 'my-app',  
   template: 'Inventory 
   <a class = "button" (click) = "onBack()">Back to Products</a>' 
})  

export class AppInventory {  
   constructor(private _router: Router){} 

   onBack(): void { 
      this._router.navigate(['/Product']); 
   } 
}

Los siguientes puntos deben tenerse en cuenta sobre el programa anterior:

  • Declare una etiqueta html que tenga una función onBack etiquetada en el evento de clic. Por lo tanto, cuando un usuario hace clic en esto, se lo dirigirá de nuevo a la página Productos.

  • En la función onBack, use router.navigate para navegar a la página requerida.

Step 2- Ahora, guarde todo el código y ejecute la aplicación usando npm. Vaya al navegador, verá el siguiente resultado.

Step 3 - Haga clic en el enlace Inventario.

Step 4 - Haga clic en el enlace 'Volver a los productos', obtendrá el siguiente resultado que lo llevará de regreso a la página de Productos.

Angular 2 también puede diseñar formularios que pueden usar enlaces bidireccionales usando el ngModeldirectiva. Veamos cómo podemos lograrlo.

Step 1- Crear un modelo que sea un modelo de productos. Crea un archivo llamadoproducts.ts archivo.

Step 2 - Coloque el siguiente código en el archivo.

export class Product { 
   constructor ( 
      public productid: number, 
      public productname: string 
   ) {  } 
}

Esta es una clase simple que tiene 2 propiedades, productid y productname.

Step 3 - Cree un componente de formulario de producto llamado componente product-form.component.ts y agregue el siguiente código -

import { Component } from '@angular/core';
import { Product } from './products';

@Component ({
   selector: 'product-form',
   templateUrl: './product-form.component.html'
})

export class ProductFormComponent {
   model = new Product(1,'ProductA');
}

Los siguientes puntos deben tenerse en cuenta sobre el programa anterior.

  • Cree un objeto de la clase Product y agregue valores al productid y productname.

  • Utilice templateUrl para especificar la ubicación de nuestro product-form.component.html que procesará el componente.

Step 4- Crea el formulario real. Cree un archivo llamado product-form.component.html y coloque el siguiente código.

<div class = "container">
   <h1>Product Form</h1>
   <form>
      <div class = "form-group">
         <label for = "productid">ID</label>
         <input type = "text" class = "form-control" id = "productid" required
            [(ngModel)] = "model.productid" name = "id">
      </div>
      
      <div class = "form-group">
         <label for = "name">Name</label>
         <input type = "text" class = "form-control" id = "name"
            [(ngModel)] = "model.productname" name = "name">
      </div>
   </form>
</div>

Es necesario señalar el siguiente punto sobre el programa anterior.

  • los ngModel La directiva se utiliza para vincular el objeto del producto a los elementos separados del formulario.

Step 5 - Coloque el siguiente código en el archivo app.component.ts.

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: '<product-form></product-form>'
})
export class AppComponent { }

Step 6 - Coloque el siguiente código en el archivo app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { ProductFormComponent } from './product-form.component';

@NgModule ({
   imports: [ BrowserModule,FormsModule],
   declarations: [ AppComponent,ProductFormComponent],
   bootstrap: [ AppComponent ]
})
export class AppModule { }

Step 7- Guarde todo el código y ejecute la aplicación usando npm. Vaya a su navegador, verá el siguiente resultado.

La interfaz de línea de comandos (CLI) se puede utilizar para crear nuestra aplicación Angular JS. También ayuda a crear una unidad y pruebas de un extremo a otro para la aplicación.

El sitio oficial de Angular CLI es https://cli.angular.io/

Si hace clic en la opción Comenzar, se lo dirigirá al repositorio de github para la CLI https://github.com/angular/angular-cli

Veamos ahora algunas de las cosas que podemos hacer con Angular CLI.

Instalación de CLI

Note- Asegúrese de que Python esté instalado en el sistema. Python se puede descargar del sitiohttps://www.python.org/

El primer paso es instalar la CLI. Podemos hacer esto con el siguiente comando:

npm install –g angular-cli

Ahora, cree una nueva carpeta llamada angularCLI en cualquier directorio y emita el comando anterior.

Una vez hecho esto, se instalará la CLI.

Crear un proyecto

El proyecto Angular JS se puede crear usando el siguiente comando.

Sintaxis

ng new Project_name

Parámetros

Project_name - Este es el nombre del proyecto que debe crearse.

Salida

Ninguna.

Ejemplo

Ejecutemos el siguiente comando para crear un nuevo proyecto.

ng new demo2

Automáticamente creará los archivos y comenzará a descargar los paquetes npm necesarios.

Ahora, en el código de Visual Studio, podemos abrir el proyecto recién creado.

Ejecutando el proyecto

Para ejecutar el proyecto, debe ejecutar el siguiente comando:

ng server

El número de puerto predeterminado para la aplicación en ejecución es 4200. Puede buscar el puerto y ver la aplicación en ejecución.

La inyección de dependencia es la capacidad de agregar la funcionalidad de los componentes en tiempo de ejecución. Echemos un vistazo a un ejemplo y los pasos utilizados para implementar la inyección de dependencia.

Step 1- Crea una clase separada que tenga el decorador inyectable. El decorador inyectable permite inyectar y utilizar la funcionalidad de esta clase en cualquier módulo Angular JS.

@Injectable() 
   export class classname {  
}

Step 2 - A continuación, en su módulo appComponent o en el módulo en el que desea utilizar el servicio, debe definirlo como proveedor en el decorador @Component.

@Component ({  
   providers : [classname] 
})

Veamos un ejemplo sobre cómo lograr esto.

Step 1 - Crea un ts archivo para el servicio llamado app.service.ts.

Step 2 - Coloque el siguiente código en el archivo creado anteriormente.

import { 
   Injectable 
} from '@angular/core'; 

@Injectable() 
export class appService {  
   getApp(): string { 
      return "Hello world"; 
   } 
}

Los siguientes puntos deben tenerse en cuenta sobre el programa anterior.

  • El decorador inyectable se importa del módulo angular / núcleo.

  • Estamos creando una clase llamada appService que está decorada con el decorador Injectable.

  • Estamos creando una función simple llamada getApp que devuelve una cadena simple llamada "Hola mundo".

Step 3 - En el archivo app.component.ts coloque el siguiente código.

import { 
   Component 
} from '@angular/core';  

import { 
   appService 
} from './app.service';  

@Component({ 
   selector: 'my-app', 
   template: '<div>{{value}}</div>', 
   providers: [appService]  
}) 

export class AppComponent { 
   value: string = ""; 
   constructor(private _appService: appService) { } 
   ngOnInit(): void { 
      this.value = this._appService.getApp(); 
   }   
}

Los siguientes puntos deben tenerse en cuenta sobre el programa anterior.

  • Primero, estamos importando nuestro módulo appService en el módulo appComponent.

  • Luego, estamos registrando el servicio como proveedor en este módulo.

  • En el constructor, definimos una variable llamada _appService del tipo appService para que se pueda llamar en cualquier parte del módulo appComponent.

  • Como ejemplo, en ngOnInit lifecyclehook, llamamos a la función getApp del servicio y asignamos la salida a la propiedad value de la clase AppComponent.

Guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado.

En este capítulo, veremos los otros archivos de configuración que forman parte del proyecto Angular 2.

tsconfig.json

Este archivo se usa para brindar las opciones sobre TypeScript que se usan para el proyecto Angular JS.

{ 
   "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "lib": [ "es2015", "dom" ],
      "noImplicitAny": true,
      "suppressImplicitAnyIndexErrors": true
   }
}

A continuación se presentan algunos puntos clave a tener en cuenta sobre el código anterior.

  • El objetivo de la compilación es es5 y eso se debe a que la mayoría de los navegadores solo pueden comprender el mecanografiado de ES5.

  • La opción sourceMap se utiliza para generar archivos de mapas, que son útiles al depurar. Por lo tanto, durante el desarrollo es bueno mantener esta opción como verdadera.

  • Los "emitDecoratorMetadata": true y "experimentalDecorators": true son necesarios para los decoradores de Angular JS. Si no está en su lugar, la aplicación Angular JS no se compilará.

package.json

Este archivo contiene información sobre el proyecto Angular 2. A continuación se muestran las configuraciones típicas del archivo.

{
   "name": "angular-quickstart",
   "version": "1.0.0",
   "description": "QuickStart package.json from the documentation,
      supplemented with testing support",
   
   "scripts": {
      "build": "tsc -p src/",
      "build:watch": "tsc -p src/ -w",
      "build:e2e": "tsc -p e2e/",
      "serve": "lite-server -c=bs-config.json",
      "serve:e2e": "lite-server -c=bs-config.e2e.json",
      "prestart": "npm run build",
      "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
      "pree2e": "npm run build:e2e",
      "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" 
         --killothers --success first",
      "preprotractor": "webdriver-manager update",
      "protractor": "protractor protractor.config.js",
      "pretest": "npm run build",
      "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
      "pretest:once": "npm run build",
      "test:once": "karma start karma.conf.js --single-run",
      "lint": "tslint ./src/**/*.ts -t verbose"
   },

   "keywords": [],
   "author": "",
   "license": "MIT",
   "dependencies": {
      "@angular/common": "~2.4.0",
      "@angular/compiler": "~2.4.0",
      "@angular/core": "~2.4.0",
      "@angular/forms": "~2.4.0",
      "@angular/http": "~2.4.0",
      "@angular/platform-browser": "~2.4.0",
      "@angular/platform-browser-dynamic": "~2.4.0",
      "@angular/router": "~3.4.0",
      "angular-in-memory-web-api": "~0.2.4",
      "systemjs": "0.19.40",
      "core-js": "^2.4.1",
      "rxjs": "5.0.1",
      "zone.js": "^0.7.4"
   },

   "devDependencies": {
      "concurrently": "^3.2.0",
      "lite-server": "^2.2.2",
      "typescript": "~2.0.10",
      "canonical-path": "0.0.2",
      "tslint": "^3.15.1",
      "lodash": "^4.16.4",
      "jasmine-core": "~2.4.1",
      "karma": "^1.3.0",
      "karma-chrome-launcher": "^2.0.0",
      "karma-cli": "^1.0.1",
      "karma-jasmine": "^1.0.2",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~4.0.14",
      "rimraf": "^2.5.4",
      "@types/node": "^6.0.46",
      "@types/jasmine": "2.5.36"
   },
   "repository": {}
}

Algunos puntos clave a tener en cuenta sobre el código anterior:

  • Hay dos tipos de dependencias, primero las dependencias y luego las dependencias de desarrollo. Los de desarrollo son necesarios durante el proceso de desarrollo y los demás son necesarios para ejecutar la aplicación.

  • El comando "build: watch": "tsc -p src / -w" se utiliza para compilar el texto mecanografiado en segundo plano buscando cambios en los archivos mecanografiados.

systemjs.config.json

Este archivo contiene los archivos del sistema necesarios para la aplicación Angular JS. Esto carga todos los archivos de secuencia de comandos necesarios sin la necesidad de agregar una etiqueta de secuencia de comandos a las páginas html. Los archivos típicos tendrán el siguiente código.

/** 
 * System configuration for Angular samples 
 * Adjust as necessary for your application needs. 
*/ 
(function (global) { 
   System.config ({ 
      paths: { 
         // paths serve as alias 
         'npm:': 'node_modules/' 
      }, 
      
      // map tells the System loader where to look for things 
      map: { 
         // our app is within the app folder 
         app: 'app',  
         
         // angular bundles 
         '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
         '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
         '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
         '@angular/platform-browser': 'npm:@angular/platformbrowser/bundles/platform-browser.umd.js', 
         '@angular/platform-browser-dynamic': 
            'npm:@angular/platform-browserdynamic/bundles/platform-browser-dynamic.umd.js', 
         '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
         '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
         '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',  
         
         // other libraries 
         'rxjs':  'npm:rxjs', 
         'angular-in-memory-web-api': 
            'npm:angular-in-memory-web-api/bundles/inmemory-web-api.umd.js' 
      }, 
     
      // packages tells the System loader how to load when no filename 
         and/or no extension 
      packages: { 
         app: { 
            defaultExtension: 'js' 
         }, 
         
         rxjs: { 
            defaultExtension: 'js' 
         } 
      } 
   
   }); 
})(this);

Algunos puntos clave a tener en cuenta sobre el código anterior:

  • 'npm:': 'node_modules /' indica la ubicación en nuestro proyecto donde se encuentran todos los módulos npm.

  • El mapeo de app: 'app' indica la carpeta donde se cargan todos los archivos de nuestras aplicaciones.

Angular 2 te permite trabajar con controles de terceros. Una vez que decida qué control implementar, debe realizar los siguientes pasos:

Step 1 - Instale el componente usando el comando npm.

Por ejemplo, instalaremos el control de terceros ng2-pagination mediante el siguiente comando.

npm install ng2-pagination --save

Una vez hecho esto, verá que el componente se instaló correctamente.

Step 2 - Incluya el componente en el archivo app.module.ts.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import {Ng2PaginationModule} from 'ng2-pagination';

@NgModule ({
   imports:      [ BrowserModule,Ng2PaginationModule],
   declarations: [ AppComponent],
   bootstrap:    [ AppComponent ]
})
export class AppModule { }

Step 3 - Finalmente, implemente el componente en su archivo app.component.ts.

import { Component } from '@angular/core';
import {PaginatePipe, PaginationService} from 'ng2-pagination';

@Component ({
   selector: 'my-app',
   template: '
      <ul>
         <li *ngFor = "let item of collection | paginate: {
            itemsPerPage: 5, currentPage: p }"> ... </li>
      </ul>
      <pagination-controls (pageChange) = "p = $event"></pagination-controls>
   '
})
export class AppComponent { }

Step 4 - Guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado.

En la imagen de arriba, puede ver que las imágenes se han almacenado como One.jpg y two.jpg en la carpeta Imágenes.

Step 5 - Cambie el código del archivo app.component.ts por el siguiente.

import {
   Component
} from '@angular/core';

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   appTitle: string = 'Welcome';
   
   appList: any[] = [{
      "ID": "1",
      "Name": "One",
      "url": 'app/Images/One.jpg'
   },
   {
      "ID": "2",
      "Name": "Two",
      "url": 'app/Images/two.jpg'
   } ];
}

Se deben tener en cuenta los siguientes puntos sobre el código anterior.

  • Estamos definiendo una matriz llamada appList que es del tipo any. Esto es para que pueda almacenar cualquier tipo de elemento.

  • Estamos definiendo 2 elementos. Cada elemento tiene 3 propiedades, ID, Nombre y URL.

  • La URL de cada elemento es la ruta relativa a las 2 imágenes.

Step 6 - Realice los siguientes cambios en el archivo app / app.component.html, que es su archivo de plantilla.

<div *ngFor = 'let lst of appList'> 
   <ul> 
      <li>{{lst.ID}}</li> 
      <li>{{lst.Name}}</li> 
      <img [src] = 'lst.url'> 
   </ul> 
</div>

Se deben tener en cuenta los siguientes puntos sobre el programa anterior:

  • La directiva ngFor se usa para recorrer en iteración todos los elementos de la propiedad appList.

  • Para cada propiedad, utiliza el elemento de lista para mostrar una imagen.

  • La propiedad src de la etiqueta img luego se limita a la propiedad url de appList en nuestra clase.

Step 7- Guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado. En la salida, puede ver claramente que las imágenes se han recogido y mostrado en la salida.

En Angular JS, es muy fácil mostrar el valor de las propiedades de la clase en el formulario HTML.

Tomemos un ejemplo y entendamos más sobre la visualización de datos. En nuestro ejemplo, veremos cómo se muestran los valores de las distintas propiedades de nuestra clase en una página HTML.

Step 1 - Cambie el código del archivo app.component.ts por el siguiente.

import {
   Component
} from '@angular/core';

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   TutorialName: string = 'Angular JS2';
   appList: string[] = ["Binding", "Display", "Services"];
}

Se deben tener en cuenta los siguientes puntos sobre el código anterior.

  • Estamos definiendo una matriz llamada appList que es del tipo string.

  • Estamos definiendo 3 elementos de cadena como parte de la matriz que es Binding, Display y Services.

  • También hemos definido una propiedad llamada TutorialName que tiene un valor de Angular 2.

Step 2 - Realice los siguientes cambios en el archivo app / app.component.html, que es su archivo de plantilla.

<div>
   The name of this Tutorial is {{TutorialName}}<br>
   The first Topic is {{appList[0]}}<br>
   The second Topic is {{appList[1]}}<br>
   The third Topic is {{appList[2]}}<br>
</div>

Se deben tener en cuenta los siguientes puntos sobre el código anterior.

  • Estamos haciendo referencia a la propiedad TutorialName para decir "cuál es el nombre del tutorial en nuestra página HTML".

  • Estamos usando el valor de índice de la matriz para mostrar cada uno de los 3 temas de nuestra matriz.

Step 3- Guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado. Desde la salida, puede ver claramente que los datos se muestran según los valores de las propiedades en la clase.

Otro ejemplo simple, que es vinculante sobre la marcha, es el uso de la etiqueta html de entrada. Simplemente muestra los datos a medida que se escriben en la etiqueta html.

Realice los siguientes cambios en el archivo app / app.component.html, que es su archivo de plantilla.

<div>
   <input [value] = "name" (input) = "name = $event.target.value">
   {{name}}
</div>

Se deben tener en cuenta los siguientes puntos sobre el código anterior.

  • [value] = ”username” - Se utiliza para vincular la expresión nombre de usuario a la propiedad de valor del elemento de entrada.

  • (input) = ”expression” - Esta es una forma declarativa de vincular una expresión al evento de entrada del elemento de entrada.

  • username = $event.target.value - La expresión que se ejecuta cuando se dispara el evento de entrada.

  • $event - Una expresión expuesta en enlaces de eventos por Angular, que tiene el valor de la carga útil del evento.

Cuando guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado.

Ahora, escriba algo en el cuadro de entrada, como "Tutorialspoint". La salida cambiará en consecuencia.

En Angular 2, los eventos como el clic de un botón o cualquier otro tipo de eventos también se pueden manejar con mucha facilidad. Los eventos se activan desde la página html y se envían a la clase Angular JS para su posterior procesamiento.

Veamos un ejemplo de cómo podemos lograr el manejo de eventos. En nuestro ejemplo, veremos cómo se muestra un botón de clic y una propiedad de estado. Inicialmente, la propiedad de estado será verdadera. Cuando se hace clic en el botón, la propiedad de estado se vuelve falsa.

Step 1 - Cambie el código del archivo app.component.ts por el siguiente.

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   Status: boolean = true; 
   clicked(event) { 
      this.Status = false; 
   } 
}

Se deben tener en cuenta los siguientes puntos sobre el código anterior.

  • Estamos definiendo una variable llamada estado del tipo booleano que inicialmente es verdadera.

  • A continuación, estamos definiendo la función en la que se hizo clic que se llamará cada vez que se haga clic en nuestro botón en nuestra página html. En la función, cambiamos el valor de la propiedad Status de verdadero a falso.

Step 2 - Realice los siguientes cambios en el archivo app / app.component.html, que es el archivo de plantilla.

<div> 
   {{Status}} 
   <button (click) = "clicked()">Click</button> 
</div>

Se deben tener en cuenta los siguientes puntos sobre el código anterior.

  • Primero, solo mostramos el valor de la propiedad Status de nuestra clase.

  • Luego estamos definiendo la etiqueta html del botón con el valor de Click. Luego nos aseguramos de que el evento de clic del botón se active en el evento de clic en nuestra clase.

Step 3 - Guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado.

Step 4 - Haga clic en el botón Hacer clic, obtendrá el siguiente resultado.

Angular 2 tiene muchos filtros y tuberías que se pueden usar para transformar datos.

minúscula

Esto se utiliza para convertir la entrada a minúsculas.

Sintaxis

Propertyvalue | lowercase

Parámetros

Ninguna

Resultado

El valor de la propiedad se convertirá a minúsculas.

Ejemplo

Primero asegúrese de que el siguiente código esté presente en el archivo app.component.ts.

import { 
   Component 
} from '@angular/core'; 

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   TutorialName: string = 'Angular JS2'; 
   appList: string[] = ["Binding", "Display", "Services"]; 
}

A continuación, asegúrese de que el siguiente código esté presente en el archivo app / app.component.html.

<div> 
   The name of this Tutorial is {{TutorialName}}<br>  
   The first Topic is {{appList[0] | lowercase}}<br> 
   The second Topic is {{appList[1] | lowercase}}<br> 
   The third Topic is {{appList[2]| lowercase}}<br> 
</div>

Salida

Una vez que guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado.

mayúsculas

Esto se usa para convertir la entrada a mayúsculas.

Sintaxis

Propertyvalue | uppercase

Parámetros

Ninguna.

Resultado

El valor de la propiedad se convertirá a mayúsculas.

Ejemplo

Primero asegúrese de que el siguiente código esté presente en el archivo app.component.ts.

import { 
   Component 
} from '@angular/core';

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   TutorialName: string = 'Angular JS2'; 
   appList: string[] = ["Binding", "Display", "Services"]; 
}

A continuación, asegúrese de que el siguiente código esté presente en el archivo app / app.component.html.

<div> 
   The name of this Tutorial is {{TutorialName}}<br>  
   The first Topic is {{appList[0] | uppercase }}<br> 
   The second Topic is {{appList[1] | uppercase }}<br> 
   The third Topic is {{appList[2]| uppercase }}<br> 
</div>

Salida

Una vez que guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado.

rebanada

Esto se usa para cortar un dato de la cadena de entrada.

Sintaxis

Propertyvalue | slice:start:end

Parámetros

  • start - Esta es la posición inicial desde donde debe comenzar el corte.

  • end - Esta es la posición inicial desde donde debe terminar el corte.

Resultado

El valor de la propiedad se dividirá en función de las posiciones inicial y final.

Ejemplo

Primero asegúrese de que el siguiente código esté presente en el archivo app.component.ts

import {
   Component
} from '@angular/core';

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   TutorialName: string = 'Angular JS2';
   appList: string[] = ["Binding", "Display", "Services"];
}

A continuación, asegúrese de que el siguiente código esté presente en el archivo app / app.component.html.

<div> 
   The name of this Tutorial is {{TutorialName}}<br>  
   The first Topic is {{appList[0] | slice:1:2}}<br> 
   The second Topic is {{appList[1] | slice:1:3}}<br> 
   The third Topic is {{appList[2]| slice:2:3}}<br> 
</div>

Salida

Una vez que guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado.

fecha

Se utiliza para convertir la cadena de entrada al formato de fecha.

Sintaxis

Propertyvalue | date:”dateformat”

Parámetros

dateformat - Este es el formato de fecha al que se debe convertir la cadena de entrada.

Resultado

El valor de la propiedad se convertirá al formato de fecha.

Ejemplo

Primero asegúrese de que el siguiente código esté presente en el archivo app.component.ts.

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   newdate = new Date(2016, 3, 15);
}

A continuación, asegúrese de que el siguiente código esté presente en el archivo app / app.component.html.

<div> 
   The date of this Tutorial is {{newdate | date:"MM/dd/yy"}}<br>  
</div>

Salida

Una vez que guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado.

moneda

Se utiliza para convertir la cadena de entrada a formato de moneda.

Sintaxis

Propertyvalue | currency

Parámetros

Ninguna.

Resultado

El valor de la propiedad se convertirá a formato de moneda.

Ejemplo

Primero asegúrese de que el siguiente código esté presente en el archivo app.component.ts.

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   newValue: number = 123; 
}

A continuación, asegúrese de que el siguiente código esté presente en el archivo app / app.component.html.

<div> 
   The currency of this Tutorial is {{newValue | currency}}<br>      
</div>

Salida

Una vez que guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado.

porcentaje

Se utiliza para convertir la cadena de entrada a formato de porcentaje.

Sintaxis

Propertyvalue | percent

Parámetros

Ninguna

Resultado

El valor de la propiedad se convertirá a formato de porcentaje.

Ejemplo

Primero asegúrese de que el siguiente código esté presente en el archivo app.component.ts.

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   newValue: number = 30; 
}

A continuación, asegúrese de que el siguiente código esté presente en el archivo app / app.component.html.

<div>
   The percentage is {{newValue | percent}}<br> 
</div>

Salida

Una vez que guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado.

Hay otra variación de la tubería de porcentaje como sigue.

Sintaxis

Propertyvalue | percent: ‘{minIntegerDigits}.{minFractionDigits}{maxFractionDigits}’

Parámetros

  • minIntegerDigits - Este es el número mínimo de dígitos enteros.

  • minFractionDigits - Este es el número mínimo de dígitos fraccionarios.

  • maxFractionDigits - Este es el número máximo de dígitos fraccionarios.

Resultado

El valor de la propiedad se convertirá a formato de porcentaje

Ejemplo

Primero asegúrese de que el siguiente código esté presente en el archivo app.component.ts.

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   newValue: number = 0.3; 
}

A continuación, asegúrese de que el siguiente código esté presente en el archivo app / app.component.html.

<div> 
   The percentage is {{newValue | percent:'2.2-5'}}<br>  
</div>

Salida

Una vez que guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado.

Angular 2 también tiene la posibilidad de crear tuberías personalizadas. La forma general de definir una tubería personalizada es la siguiente.

import { Pipe, PipeTransform } from '@angular/core';  
@Pipe({name: 'Pipename'}) 

export class Pipeclass implements PipeTransform { 
   transform(parameters): returntype { } 
}

Dónde,

  • 'Pipename' - Este es el nombre de la tubería.

  • Pipeclass - Este es el nombre de la clase asignada a la tubería personalizada.

  • Transform - Esta es la función para trabajar con la tubería.

  • Parameters - Estos son los parámetros que se pasan a la tubería.

  • Returntype - Este es el tipo de retorno de la tubería.

Creemos una tubería personalizada que multiplique 2 números. Luego usaremos esa tubería en nuestra clase de componente.

Step 1 - Primero, cree un archivo llamado multiplicador.pipe.ts.

Step 2 - Coloque el siguiente código en el archivo creado anteriormente.

import { 
   Pipe, 
   PipeTransform 
} from '@angular/core';  

@Pipe ({ 
   name: 'Multiplier' 
}) 

export class MultiplierPipe implements PipeTransform { 
   transform(value: number, multiply: string): number { 
      let mul = parseFloat(multiply); 
      return mul * value 
   } 
}

Se deben tener en cuenta los siguientes puntos sobre el código anterior.

  • Primero estamos importando los módulos Pipe y PipeTransform.

  • Luego, estamos creando una tubería con el nombre 'Multiplicador'.

  • Creando una clase llamada MultiplierPipe que implementa el módulo PipeTransform.

  • La función de transformación tomará el valor y el parámetro múltiple y generará la multiplicación de ambos números.

Step 3 - En el archivo app.component.ts, coloque el siguiente código.

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   template: '<p>Multiplier: {{2 | Multiplier: 10}}</p>' 
}) 
export class AppComponent {  }

Note - En nuestra plantilla, usamos nuestra nueva tubería personalizada.

Step 4 - Asegúrese de que el siguiente código esté colocado en el archivo app.module.ts.

import {
   NgModule
} from '@angular/core';

import {
   BrowserModule
} from '@angular/platform-browser';

import {
   AppComponent
} from './app.component';

import {
   MultiplierPipe
} from './multiplier.pipe'

@NgModule ({
   imports: [BrowserModule],
   declarations: [AppComponent, MultiplierPipe],
   bootstrap: [AppComponent]
})

export class AppModule {}

Se deben tener en cuenta las siguientes cosas sobre el código anterior.

  • Necesitamos asegurarnos de incluir nuestro módulo MultiplierPipe.

  • También debemos asegurarnos de que esté incluido en la sección de declaraciones.

Una vez que guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado.

En Angular 2, puede utilizar la estructura de elementos DOM de HTML para cambiar los valores de los elementos en tiempo de ejecución. Veamos algunos en detalle.

La etiqueta de entrada

En el archivo app.component.ts coloque el siguiente código.

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   template: ' 
      <div> 
         <input [value] = "name" (input) = "name = $event.target.value"> 
         {{name}} 
      </div> 
   ' 
}) 
export class AppComponent { }

Se deben tener en cuenta las siguientes cosas sobre el código anterior.

  • [value] = ”username” - Se utiliza para vincular la expresión nombre de usuario a la propiedad de valor del elemento de entrada.

  • (input) = ”expression” - Esta es una forma declarativa de vincular una expresión al evento de entrada del elemento de entrada.

  • username = $event.target.value - La expresión que se ejecuta cuando se dispara el evento de entrada.

  • $event - Es una expresión expuesta en enlaces de eventos por Angular, que tiene el valor de la carga útil del evento.

Una vez que guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado.

Ahora puede escribir cualquier cosa y la misma entrada se reflejará en el texto junto al control de entrada.

Haga clic en Entrada

En el archivo app.component.ts coloque el siguiente código.

import {
   Component
} from '@angular/core';

@Component ({
   selector: 'my-app',
   template: '<button (click) = "onClickMe()"> Click Me </button> {{clickMessage}}'
})

export class AppComponent {
   clickMessage = 'Hello';
   onClickMe() {
      this.clickMessage = 'This tutorial!';
   }
}

Una vez que guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado.

Cuando presiona el botón Hacer clic en mí, obtendrá el siguiente resultado.

La aplicación Angular 2 pasa por un conjunto completo de procesos o tiene un ciclo de vida desde su inicio hasta el final de la aplicación.

El siguiente diagrama muestra todos los procesos en el ciclo de vida de la aplicación Angular 2.

A continuación se muestra una descripción de cada enlace del ciclo de vida.

  • ngOnChanges - Cuando cambia el valor de una propiedad vinculada a datos, se llama a este método.

  • ngOnInit - Esto se llama siempre que ocurre la inicialización de la directiva / componente después de que Angular muestra por primera vez las propiedades vinculadas a los datos.

  • ngDoCheck - Esto es para la detección y para actuar sobre cambios que Angular no puede o no detecta por sí solo.

  • ngAfterContentInit - Esto se llama en respuesta después de que Angular proyecta contenido externo en la vista del componente.

  • ngAfterContentChecked - Esto se llama en respuesta después de que Angular verifica el contenido proyectado en el componente.

  • ngAfterViewInit - Esto se llama en respuesta después de que Angular inicializa las vistas del componente y las vistas secundarias.

  • ngAfterViewChecked - Esto se llama en respuesta después de que Angular verifica las vistas del componente y las vistas secundarias.

  • ngOnDestroy - Esta es la fase de limpieza justo antes de que Angular destruya la directiva / componente.

A continuación se muestra un ejemplo de implementación de un enlace de ciclo de vida. En elapp.component.ts archivo, coloque el siguiente código.

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   template: '<div> {{values}} </div> ' 
}) 

export class AppComponent { 
   values = ''; 
   ngOnInit() { 
      this.values = "Hello"; 
   } 
}

En el programa anterior, llamamos al ngOnInit gancho del ciclo de vida para mencionar específicamente que el valor de la this.values El parámetro debe establecerse en "Hola".

Una vez que guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado.

En Angular JS, es posible anidar contenedores entre sí. El contenedor exterior se conoce como contenedor principal y el interior se conoce como contenedor secundario. Veamos un ejemplo sobre cómo lograr esto. Los siguientes son los pasos.

Step 1 - Crea un ts archivo para el contenedor secundario llamado child.component.ts.

Step 2 - En el archivo creado en el paso anterior, coloque el siguiente código.

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'child-app', 
   template: '<div> {{values}} </div> ' 
}) 

export class ChildComponent { 
   values = ''; 
   ngOnInit() { 
      this.values = "Hello"; 
   } 
}

El código anterior establece el valor del parámetro this.values ​​en "Hola".

Step 3 - En el archivo app.component.ts, coloque el siguiente código.

import { 
   Component 
} from '@angular/core'; 

import { 
   ChildComponent 
} from './child.component'; 

@Component ({ 
   selector: 'my-app', 
   template: '<child-app></child-app> ' 
}) 

export class AppComponent { }

En el código anterior, observe que ahora estamos llamando a la declaración de importación para importar el child.componentmódulo. También estamos llamando al selector <child-app> del componente secundario a nuestro componente principal.

Step 4 - A continuación, debemos asegurarnos de que el componente secundario también esté incluido en el archivo app.module.ts.

import { 
   NgModule 
} from '@angular/core'; 

import { 
   BrowserModule 
} from '@angular/platform-browser';  

import { 
   AppComponent 
} from './app.component';  

import { 
   MultiplierPipe 
} from './multiplier.pipe' 

import { 
   ChildComponent 
} from './child.component';  

@NgModule ({ 
   imports: [BrowserModule], 
   declarations: [AppComponent, MultiplierPipe, ChildComponent], 
   bootstrap: [AppComponent] 
}) 

export class AppModule {}

Una vez que guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado.

Un servicio se utiliza cuando es necesario proporcionar una funcionalidad común a varios módulos. Por ejemplo, podríamos tener una funcionalidad de base de datos que podría reutilizarse entre varios módulos. Y por lo tanto, podría crear un servicio que pudiera tener la funcionalidad de la base de datos.

Los siguientes pasos clave deben llevarse a cabo al crear un servicio.

Step 1- Crea una clase separada que tenga el decorador inyectable. El decorador inyectable permite inyectar y utilizar la funcionalidad de esta clase en cualquier módulo Angular JS.

@Injectable() 
   export class classname {  
}

Step 2 - A continuación, en su módulo appComponent o en el módulo en el que desea utilizar el servicio, debe definirlo como proveedor en el decorador @Component.

@Component ({  
   providers : [classname] 
})

Veamos un ejemplo sobre cómo lograr esto. Los siguientes son los pasos involucrados.

Step 1 - Crea un ts archivo para el servicio llamado app.service.ts.

Step 2 - Coloque el siguiente código en el archivo creado anteriormente.

import { 
   Injectable 
} from '@angular/core';  

@Injectable()
export class appService {  
   getApp(): string { 
      return "Hello world"; 
   } 
}

Es necesario señalar los siguientes puntos sobre el programa anterior.

  • El decorador inyectable se importa del módulo angular / núcleo.

  • Estamos creando una clase llamada appService que está decorada con el decorador Injectable.

  • Estamos creando una función simple llamada getApp, que devuelve una cadena simple llamada "Hola mundo".

Step 3 - En el archivo app.component.ts, coloque el siguiente código.

import { 
   Component 
} from '@angular/core';  

import { 
   appService 
} from './app.service';  

@Component ({ 
   selector: 'demo-app', 
   template: '<div>{{value}}</div>', 
   providers: [appService] 
}) 

export class AppComponent { 
   value: string = ""; 
   constructor(private _appService: appService) { }  

   ngOnInit(): void { 
      this.value = this._appService.getApp(); 
   } 
}

Es necesario señalar los siguientes puntos sobre el programa anterior.

  • Primero, importamos nuestro módulo appService en el módulo appComponent.

  • Luego, registramos el servicio como proveedor en este módulo.

  • En el constructor, definimos una variable llamada _appService del tipo appService para que se pueda llamar en cualquier parte del módulo appComponent.

  • Como ejemplo, en ngOnInit lifecyclehook, llamamos a la función getApp del servicio y asignamos la salida a la propiedad value de la clase AppComponent.

Una vez que guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado.