Angular 4 - Guía rápida

Hay tres versiones principales de Angular. La primera versión que se lanzó es Angular1, que también se llama AngularJS. Angular1 fue seguido por Angular2, que tuvo muchos cambios en comparación con Angular1.

La estructura de Angular se basa en la arquitectura de componentes / servicios. AngularJS se basó en el controlador de vista del modelo.Angular 4 lanzado en marzo de 2017 demuestra ser un gran avance y es la última versión del equipo de Angular después de Angular2.

Angular 4 es casi lo mismo que Angular 2. Tiene compatibilidad con versiones anteriores de Angular 2. Los proyectos desarrollados en Angular 2 funcionarán sin problemas con Angular 4.

Veamos ahora las nuevas funciones y los cambios realizados en Angular 4.

¿Por qué Angular4 y no Angular3?

El equipo de Angular enfrentó algunos problemas de control de versiones internamente con sus módulos y debido al conflicto tuvieron que seguir adelante y lanzar la próxima versión de Angular: Angular4.

Veamos ahora las nuevas características agregadas a Angular 4 -

ng Si

Angular2 solo admitía el ifcondición. Sin embargo, Angular 4 admite elif elsecondición también. Veamos cómo funciona usando la plantilla ng.

<span *ngIf="isavailable; else condition1">Condition is valid.</span>
<ng-template #condition1>Condition is invalid</ng-template>

como palabra clave en bucle for

Con la ayuda de as palabra clave, puede almacenar el valor como se muestra a continuación:

<div *ngFor="let i of months | slice:0:5 as total">
   Months: {{i}} Total: {{total.length}}
</div>

La variable total almacena la salida del segmento usando el as palabra clave.

Paquete de animación

La animación en Angular 4 está disponible como un paquete separado y debe importarse desde @ angular / animations. En Angular2, estaba disponible con @angular/core. Todavía se mantiene igual por su aspecto de compatibilidad con versiones anteriores.

Modelo

Angular 4 usos <ng-template> como la etiqueta en lugar de <template>;este último se usó en Angular2. La razón por la que Angular 4 cambió<template> a <ng-template> es debido al conflicto de nombres del <template> etiqueta con el html <template>etiqueta estándar. Desaprobará por completo seguir adelante. Este es uno de los principales cambios en Angular 4.

TypeScript 2.2

Angular 4 se actualiza a una versión reciente de TypeScript, que es 2.2. Esto ayuda a mejorar la velocidad y proporciona una mejor verificación de tipos en el proyecto.

Caso de título de tubería

Angular 4 ha agregado un nuevo caso de título de tubería, que cambia la primera letra de cada palabra a mayúsculas.

<div>
   <h2>{{ 'Angular 4 titlecase' | titlecase }}</h2>
</div>

La línea de código anterior genera el siguiente resultado: Angular 4 Titlecase.

Parámetros de búsqueda Http

Se simplifican los parámetros de búsqueda para http get api. No necesitamos llamarURLSearchParams por lo mismo que se estaba haciendo en Angular2.

Aplicaciones más pequeñas y rápidas

Las aplicaciones de Angular 4 son más pequeñas y rápidas en comparación con Angular2. Utiliza la versión 2.2 de TypeScript, la última versión que hace que la compilación final sea de tamaño pequeño.

En este capítulo, discutiremos la configuración del entorno requerida para Angular 4. Para instalar Angular 4, necesitamos lo siguiente:

• Nodejs
• Npm
• CLI angular
• IDE para escribir su código

Nodejs debe ser mayor que 4 y npm debe ser mayor que 3.

Nodejs

Para verificar si nodejs está instalado en su sistema, escriba node –ven la terminal. Esto le ayudará a ver la versión de nodejs actualmente instalada en su sistema.

C:\>node –v
v6.11.0

Si no imprime nada, instale nodejs en su sistema. Para instalar nodejs, vaya a la página de iniciohttps://nodejs.org/en/download/ de nodejs e instale el paquete según su sistema operativo.

La página de inicio de nodejs se verá así:

Según su sistema operativo, instale el paquete requerido. Una vez que nodejs esté instalado, npm también se instalará junto con él. Para comprobar si npm está instalado o no, escriba npm –v en la terminal. Debería mostrar la versión de npm.

C:\>npm –v
5.3.0

Las instalaciones de Angular 4 son muy simples con la ayuda de CLI angular. Visite la pagina de iniciohttps://cli.angular.io/ de angular para obtener la referencia del comando.

Tipo npm install –g @angular/cli, para instalar angular cli en su sistema.

Obtendrá la instalación anterior en su terminal, una vez que Angular CLI esté instalado. Puede usar cualquier IDE de su elección, es decir, WebStorm, Atom, Visual Studio Code, etc.

Los detalles de la configuración del proyecto se explican en el siguiente capítulo.

AngularJS se basa en el controlador de vista del modelo, mientras que Angular 2 se basa en la estructura de los componentes. Angular 4 funciona en la misma estructura que Angular2 pero es más rápido en comparación con Angular2.

Angular4 usa la versión TypeScript 2.2, mientras que Angular 2 usa la versión 1.8 de TypeScript. Esto trae mucha diferencia en el rendimiento.

Para instalar Angular 4, el equipo de Angular creó Angular CLI que facilita la instalación. Necesita ejecutar algunos comandos para instalar Angular 4.

Ir a este sitio https://cli.angular.io para instalar Angular CLI.

Para comenzar con la instalación, primero debemos asegurarnos de tener nodejs y npm instalados con la última versión. El paquete npm se instala junto con nodejs.

Ir al sitio de nodejs https://nodejs.org/en/.

Se recomienda a los usuarios la última versión de Nodejs v6.11.0. Los usuarios que ya tienen nodejs mayor que 4 pueden omitir el proceso anterior. Una vez que nodejs está instalado, puede verificar la versión de node en la línea de comando usando el comando, node–v, como se muestra a continuación -

El símbolo del sistema muestra v6.11.0. Una vez que nodejs esté instalado, npm también se instalará junto con él.

Para verificar la versión de npm, escriba comando npm –ven la terminal. Mostrará la versión de npm como se muestra a continuación.

La versión de npm es 3.10.10. Ahora que tenemos nodejs y npm instalados, ejecutemos los comandos de angular cli para instalar Angular 4. Verá los siguientes comandos en la página web:

npm install -g @angular/cli //command to install angular 4

ng new Angular 4-app // name of the project

cd my-dream-app

ng serve

Comencemos con el primer comando en la línea de comandos y veamos cómo funciona.

Para empezar, crearemos un directorio vacío en el que ejecutaremos el comando Angular CLI.

Ingresa el comando anterior para instalar Angular 4. El proceso de instalación comenzará y tardará unos minutos en completarse.

Una vez que se completa el comando anterior para instalar, aparece el siguiente símbolo del sistema:

Hemos creado una carpeta vacía ProjectA4e instaló el comando Angular CLI. También hemos utilizado-gpara instalar Angular CLI a nivel mundial. Ahora, puede crear su proyecto Angular 4 en cualquier directorio o carpeta y no tiene que instalar el proyecto CLI de Angular, ya que está instalado en su sistema a nivel mundial y puede usarlo desde cualquier directorio.

Vamos a comprobar ahora si Angular CLI está instalado o no. Para verificar la instalación, ejecute el siguiente comando en la terminal:

ng -v

Obtenemos la versión @ angular / cli, que actualmente es 1.2.0. La versión del nodo que se ejecuta es 6.11.0 y también los detalles del sistema operativo. Los detalles anteriores nos dicen que hemos instalado angular cli con éxito y ahora estamos listos para comenzar con nuestro proyecto.

Ahora hemos instalado Angular 4. Creemos ahora nuestro primer proyecto en Angular 4. Para crear un proyecto en Angular 4, usaremos el siguiente comando:

ng new projectname

Nombraremos el proyecto ng new Angular 4-app.

Ejecutemos ahora el comando anterior en la línea de comandos.

El proyecto Angular 4-appse crea correctamente. Instala todos los paquetes necesarios para que nuestro proyecto se ejecute en Angular 4. Cambiemos ahora al proyecto creado, que está en el directorioAngular 4-app. Cambie el directorio en la línea de comando -cd Angular 4-app.

Usaremos Visual Studio Code IDE para trabajar con Angular 4; puede utilizar cualquier IDE, es decir, Atom, WebStorm, etc.

Para descargar Visual Studio Code, vaya a https://code.visualstudio.com/ y haga clic en Download for Windows.

Hacer clic Download for Windows para instalar el IDE y ejecutar la configuración para comenzar a usar IDE.

El editor tiene el siguiente aspecto:

No hemos iniciado ningún proyecto en él. Tomemos ahora el proyecto que hemos creado usando angular-cli.

Consideraremos el Angular 4-appproyecto. Abramos la aplicación Angular 4 y veamos cómo se ve la estructura de la carpeta.

Ahora que tenemos la estructura de archivos para nuestro proyecto, compilemos nuestro proyecto con el siguiente comando:

ng serve

los ng serve El comando construye la aplicación e inicia el servidor web.

El servidor web se inicia en el puerto 4200. Escriba la URL http://localhost:4200/en el navegador y ver la salida. Una vez que se compila el proyecto, recibirá el siguiente resultado:

Una vez que corres http://localhost:4200/ en el navegador, se le dirigirá a la siguiente pantalla:

Hagamos ahora algunos cambios para mostrar el siguiente contenido:

“Welcome to Angular 4 project”

Hemos realizado cambios en los archivos: app.component.html y app.component.ts. Discutiremos más sobre esto en los capítulos siguientes.

Completemos la configuración del proyecto. Si ve que hemos utilizado el puerto 4200, que es el puerto predeterminado que utiliza angular-cli durante la compilación. Puede cambiar el puerto si lo desea usando el siguiente comando:

ng serve --host 0.0.0.0 –port 4205

La carpeta de la aplicación Angular 4 tiene lo siguiente folder structure -

• e2e- carpeta de prueba de extremo a extremo. Principalmente, e2e se utiliza para pruebas de integración y ayuda a garantizar que la aplicación funcione correctamente.

• node_modules- El paquete npm instalado es node_modules. Puede abrir la carpeta y ver los paquetes disponibles.

• src - Esta carpeta es donde trabajaremos en el proyecto usando Angular 4.

La carpeta de la aplicación Angular 4 tiene lo siguiente file structure -

• .angular-cli.json - Básicamente contiene el nombre del proyecto, la versión de cli, etc.

• .editorconfig - Este es el archivo de configuración para el editor.

• .gitignore - Se debe enviar un archivo .gitignore al repositorio para compartir las reglas de ignorar con cualquier otro usuario que clone el repositorio.

• karma.conf.js- Se utiliza para pruebas unitarias a través del transportador. Toda la información necesaria para el proyecto se proporciona en el archivo karma.conf.js.

• package.json - El archivo package.json indica qué bibliotecas se instalarán en node_modules cuando ejecute npm install.

En la actualidad, si abre el archivo en el editor, obtendrá los siguientes módulos agregados en él.

"@angular/animations": "^4.0.0",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",

En caso de que necesite agregar más bibliotecas, puede agregarlas aquí y ejecutar el comando npm install.

• protractor.conf.js - Ésta es la configuración de prueba requerida para la aplicación.

• tsconfig.json - Esto básicamente contiene las opciones del compilador necesarias durante la compilación.

• tslint.json - Este es el archivo de configuración con reglas a considerar durante la compilación.

los src folder es la carpeta principal, que internally has a different file structure.

aplicación

Contiene los archivos que se describen a continuación. Angular-cli instala estos archivos de forma predeterminada.

• app.module.ts- Si abre el archivo, verá que el código tiene referencia a diferentes bibliotecas, que se importan. Angular-cli ha utilizado estas bibliotecas predeterminadas para la importación: angular / core, platform-browser. Los nombres en sí explican el uso de las bibliotecas.

Se importan y guardan en variables como declarations, imports, providersy bootstrap.

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

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

export class AppModule { }

declarations- En declaraciones, se almacena la referencia a los componentes. Appcomponent es el componente predeterminado que se crea cada vez que se inicia un nuevo proyecto. Aprenderemos a crear nuevos componentes en una sección diferente.

imports- Esto tendrá los módulos importados como se muestra arriba. En la actualidad, BrowserModule es parte de las importaciones que se importan desde @ angular / platform-browser.

providers- Esto tendrá referencia a los servicios creados. El servicio se discutirá en un capítulo posterior.

bootstrap - Esto hace referencia al componente predeterminado creado, es decir, AppComponent.

• app.component.css- Puedes escribir tu estructura css aquí. En este momento, hemos agregado el color de fondo al div como se muestra a continuación.

.divdetails{
   background-color: #ccc;
}

• app.component.html - El código html estará disponible en este archivo.

<!--The content below is only a placeholder and can be replaced.-->
<div class = "divdetails">
   <div style = "text-align:center">
      <h1>
         Welcome to {{title}}!
      </h1>
      <img width = "300" src = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNv
      ZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFe
      HBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4
      xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaH
      R0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAg
      MjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2
      ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0M
      zMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdD
      AiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMj
      MwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbn
      RzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMj
      AzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMU
      w2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMj
      UsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLD
      EzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=">
   </div>
   <h2>Here are some links to help you start: </h2>
   <ul>
      <li>
         <h2>
            <a target = "_blank" href="https://angular.io/tutorial">Tour of Heroes</a>
         </h2>
      </li>
      <li>
         <h2>
            <a target = "_blank" href = "https://github.com/angular/angular-cli/wiki">
               CLI Documentation
            </a>
         </h2>
      </li>
      <li>
         <h2>
            <a target="_blank" href="http://angularjs.blogspot.ca/">Angular blog</a>
         </h2>
      </li>
   </ul>
</div>

Este es el código html predeterminado actualmente disponible con la creación del proyecto.

• app.component.spec.ts - Estos son archivos generados automáticamente que contienen pruebas unitarias para el componente fuente.

• app.component.ts- La clase para el componente se define aquí. Puede realizar el procesamiento de la estructura html en el archivo .ts. El procesamiento incluirá actividades como conectarse a la base de datos, interactuar con otros componentes, enrutamiento, servicios, etc.

La estructura del archivo es la siguiente:

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'app';
}

Bienes

Puede guardar sus imágenes, archivos js en esta carpeta.

Medio ambiente

Esta carpeta tiene los detalles de la producción o el entorno de desarrollo. La carpeta contiene dos archivos.

• environment.prod.ts
• environment.ts

Ambos archivos tienen detalles sobre si el archivo final debe compilarse en el entorno de producción o en el entorno de desarrollo.

La estructura de archivos adicional de la carpeta de la aplicación Angular 4 incluye lo siguiente:

favicon.ico

Este es un archivo que generalmente se encuentra en el directorio raíz de un sitio web.

index.html

Este es el archivo que se muestra en el navegador.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>HTTP Search Param</title>
      <base href = "/">
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <link href = "https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono" rel="stylesheet">
      <link href = "styles.c7c7b8bf22964ff954d3.bundle.css" rel="stylesheet">
      <meta name = "viewport" content="width=device-width, initial-scale=1">
      <link rel = "icon" type="image/x-icon" href="favicon.ico">
   </head>
   
   <body>
      <app-root></app-root>
   </body>
</html>

El cuerpo tiene <app-root></app-root>. Este es el selector que se utiliza enapp.component.ts archivo y mostrará los detalles del archivo app.component.html.

main.ts

main.ts es el archivo desde donde comenzamos el desarrollo de nuestro proyecto. Comienza con la importación del módulo básico que necesitamos. En este momento, si ve angular / core, angular / platform-browser-dynamic, app.module y el entorno se importan de forma predeterminada durante la instalación de angular-cli y la configuración del proyecto.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
   enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);

los platformBrowserDynamic().bootstrapModule(AppModule) tiene la referencia del módulo principal AppModule. Por lo tanto, cuando se ejecuta en el navegador, el archivo que se llama es index.html. Index.html se refiere internamente a main.ts que llama al módulo principal, es decir, AppModule cuando se ejecuta el siguiente código:

platformBrowserDynamic().bootstrapModule(AppModule);

Cuando se llama a AppModule, llama a app.module.ts, que además llama al AppComponent basado en el boostrap de la siguiente manera:

bootstrap: [AppComponent]

En app.component.ts, hay un selector: app-rootque se utiliza en el archivo index.html. Esto mostrará el contenido presente en app.component.html.

Lo siguiente se mostrará en el navegador:

polyfill.ts

Esto se usa principalmente para compatibilidad con versiones anteriores.

styles.css

Este es el archivo de estilo necesario para el proyecto.

test.ts

Aquí, se manejarán los casos de prueba unitaria para probar el proyecto.

tsconfig.app.json

Esto se usa durante la compilación, tiene los detalles de configuración que deben usarse para ejecutar la aplicación.

tsconfig.spec.json

Esto ayuda a mantener los detalles para las pruebas.

tipings.d.ts

Se utiliza para administrar la definición de TypeScript.

La estructura final del archivo se ve de la siguiente manera:

La mayor parte del desarrollo con Angular 4 se realiza en los componentes. Los componentes son básicamente clases que interactúan con el archivo .html del componente, que se muestra en el navegador. Hemos visto la estructura de archivos en uno de nuestros capítulos anteriores. La estructura de archivos tiene el componente de la aplicación y consta de los siguientes archivos:

• app.component.css

• app.component.html

• app.component.spec.ts

• app.component.ts

• app.module.ts

Los archivos anteriores se crearon de forma predeterminada cuando creamos un nuevo proyecto usando el comando angular-cli.

Si abres el app.module.ts archivo, tiene algunas bibliotecas que se importan y también un declarativo que se asigna al componente de la aplicación de la siguiente manera:

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

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

export class AppModule { }

Las declaraciones incluyen la variable AppComponent, que ya hemos importado. Este se convierte en el componente principal.

Ahora, angular-cli tiene un comando para crear su propio componente. Sin embargo, el componente de la aplicación que se crea de forma predeterminada siempre seguirá siendo el principal y los siguientes componentes creados formarán los componentes secundarios.

Ejecutemos ahora el comando para crear el componente.

ng g component new-cmp

Cuando ejecute el comando anterior en la línea de comando, recibirá el siguiente resultado:

C:\projectA4\Angular 4-app>ng g component new-cmp
installing component
   create src\app\new-cmp\new-cmp.component.css
   create src\app\new-cmp\new-cmp.component.html
   create src\app\new-cmp\new-cmp.component.spec.ts
   create src\app\new-cmp\new-cmp.component.ts
   update src\app\app.module.ts

Ahora, si revisamos la estructura del archivo, obtendremos la nueva carpeta new-cmp creada en la carpeta src / app.

Los siguientes archivos se crean en la carpeta new-cmp:

• new-cmp.component.css: se crea el archivo css para el nuevo componente.

• new-cmp.component.html: se crea el archivo html.

• new-cmp.component.spec.ts: se puede utilizar para pruebas unitarias.

• new-cmp.component.ts: aquí podemos definir el módulo, las propiedades, etc.

Los cambios se agregan al archivo app.module.ts de la siguiente manera:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
// includes the new-cmp component we created

@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent // here it is added in declarations and will behave as a child component
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent] //for bootstrap the AppComponent the main app component is given.
})

export class AppModule { }

los new-cmp.component.ts El archivo se genera de la siguiente manera:

import { Component, OnInit } from '@angular/core'; // here angular/core is imported .

@Component({
   // this is a declarator which starts with @ sign. The component word marked in bold needs to be the same.
   selector: 'app-new-cmp', //
   templateUrl: './new-cmp.component.html', 
   // reference to the html file created in the new component.
   styleUrls: ['./new-cmp.component.css'] // reference to the style file.
})

export class NewCmpComponent implements OnInit {
   constructor() { }
   ngOnInit() {}
}

Si ve el archivo new-cmp.component.ts anterior, crea una nueva clase llamada NewCmpComponent, que implementa OnInit.In, que tiene un constructor y un método llamado ngOnInit (). ngOnInit se llama de forma predeterminada cuando se ejecuta la clase.

Comprobemos cómo funciona el flujo. Ahora, el componente de la aplicación, que se crea de forma predeterminada, se convierte en el componente principal. Cualquier componente agregado posteriormente se convierte en el componente secundario.

Cuando accedemos a la URL en el http://localhost:4200/ navegador, primero ejecuta el archivo index.html que se muestra a continuación:

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>Angular 4App</title>
      <base href = "/">
      <meta name="viewport" content="width = device-width, initial-scale = 1">
      <link rel = "icon" type = "image/x-icon" href = "favicon.ico">
   </head>
   
   <body>
      <app-root></app-root>
   </body>
</html>

El anterior es el archivo html normal y no vemos nada impreso en el navegador. Eche un vistazo a la etiqueta en la sección del cuerpo.

<app-root></app-root>

Esta es la etiqueta raíz creada por Angular por defecto. Esta etiqueta tiene la referencia en elmain.ts archivo.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
   enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

AppModule se importa desde la aplicación del módulo principal principal, y lo mismo se le da al módulo bootstrap, que hace que se cargue la aplicación.

Veamos ahora el app.module.ts archivo -

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

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

export class AppModule { }

Aquí, el AppComponent es el nombre dado, es decir, la variable para almacenar la referencia del app. Component.tsy lo mismo se le da al bootstrap. Veamos ahora elapp.component.ts archivo.

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
}

El núcleo angular se importa y se denomina Componente y el mismo se usa en el Declarador como -

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

En la referencia del declarador al selector, templateUrl y styleUrlson dados. El selector aquí no es más que la etiqueta que se coloca en el archivo index.html que vimos arriba.

La clase AppComponent tiene una variable llamada título, que se muestra en el navegador.

los @Component usa templateUrl llamado app.component.html, que es el siguiente:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

Tiene solo el código html y el título de la variable entre llaves. Se reemplaza con el valor, que está presente en elapp.component.tsarchivo. A esto se le llama vinculación. Discutiremos el concepto de vinculación en un capítulo posterior.

Ahora que hemos creado un nuevo componente llamado new-cmp. Lo mismo se incluye en elapp.module.ts archivo, cuando se ejecuta el comando para crear un nuevo componente.

app.module.ts tiene una referencia al nuevo componente creado.

Veamos ahora los nuevos archivos creados en new-cmp.

new-cmp.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})

export class NewCmpComponent implements OnInit {
   constructor() { }
   ngOnInit() {}
}

Aquí también tenemos que importar el núcleo. La referencia del componente se usa en el declarador.

El declarador tiene el selector llamado app-new-cmp y el templateUrl y styleUrl.

El .html llamado new-cmp.component.html es como sigue -

<p>
   new-cmp works!
</p>

Como se vio arriba, tenemos el código html, es decir, la etiqueta p. El archivo de estilo está vacío ya que no necesitamos ningún estilo en este momento. Pero cuando ejecutamos el proyecto, no vemos nada relacionado con el nuevo componente que se muestra en el navegador. Ahora agreguemos algo y lo mismo se puede ver en el navegador más adelante.

El selector, es decir, app-new-cmp necesita ser agregado en el app.component .html archivo de la siguiente manera:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<app-new-cmp></app-new-cmp>

Cuando el <app-new-cmp></app-new-cmp> se agrega la etiqueta, todo lo que está presente en el archivo .html del nuevo componente creado se mostrará en el navegador junto con los datos del componente principal.

Veamos el new component .html archivo y el new-cmp.component.ts archivo.

new-cmp.component.ts

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

@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})

export class NewCmpComponent implements OnInit {
   newcomponent = "Entered in new component created";
   constructor() {}
   ngOnInit() { }
}

En la clase, hemos agregado una variable llamada componente nuevo y el valor es "Entered in new component created”.

La variable anterior está vinculada en el .new-cmp.component.html archivo de la siguiente manera:

<p>
   {{newcomponent}}
</p>

<p>
   new-cmp works!
</p>

Ahora que hemos incluido el <app-new-cmp></app-new-cmp> selector en el app. component .html que es el .html del componente principal, el contenido presente en el archivo .html del nuevo componente (new-cmp.component.html) se muestra en el navegador de la siguiente manera:

Del mismo modo, podemos crear componentes y vincularlos usando el selector en el app.component.html Presentar según nuestros requisitos.

Module en Angular se refiere a un lugar donde puede agrupar los componentes, directivas, tuberías y servicios, que están relacionados con la aplicación.

En caso de que esté desarrollando un sitio web, el encabezado, el pie de página, la sección izquierda, central y derecha se convierten en parte de un módulo.

Para definir el módulo, podemos usar el NgModule. Cuando crea un nuevo proyecto usando el comando Angular –cli, el ngmodule se crea en el archivo app.module.ts de forma predeterminada y tiene el siguiente aspecto:

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

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

export class AppModule { }

El NgModule debe importarse de la siguiente manera:

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

La estructura del ngmodule es la que se muestra a continuación:

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

Empieza con @NgModule y contiene un objeto que tiene declaraciones, import s, proveedores y bootstrap.

Declaración

Es una matriz de componentes creados. Si se crea algún componente nuevo, se importará primero y la referencia se incluirá en las declaraciones como se muestra a continuación:

declarations: [
   AppComponent,
   NewCmpComponent
]

Importar

Es una serie de módulos necesarios para su uso en la aplicación. También puede ser utilizado por los componentes de la matriz de declaración. Por ejemplo, ahora mismo en el @NgModule vemos el módulo del navegador importado. En caso de que su solicitud necesite formularios, puede incluir el módulo de la siguiente manera:

import { FormsModule } from '@angular/forms';

La importación en el @NgModule será como el siguiente -

imports: [
   BrowserModule,
   FormsModule
]

Proveedores

Esto incluirá los servicios creados.

Oreja

Esto incluye el componente principal de la aplicación para iniciar la ejecución.

El enlace de datos está disponible directamente desde AngularJS, Angular 2 y ahora también está disponible en Angular 4. Usamos llaves para el enlace de datos - {{}}; este proceso se llama interpolación. Ya hemos visto en nuestros ejemplos anteriores cómo declaramos el valor a la variable título y el mismo se imprime en el navegador.

La variable en el app.component.html El archivo se denomina {{título}} y el valor del título se inicializa en el app.component.ts archivo y en app.component.html, se muestra el valor.

Creemos ahora un menú desplegable de meses en el navegador. Para hacer eso, hemos creado una serie de meses enapp.component.ts como sigue -

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 4 Project!';
   // declared array of months.
   months = ["January", "Feburary", "March", "April", "May", 
            "June", "July", "August", "September",
            "October", "November", "December"];
}

La matriz del mes que se muestra arriba se mostrará en un menú desplegable en el navegador. Para ello, usaremos la siguiente línea de código:

<!--The content below is only a placeholder and can be replaced. -->
<div style="text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<div> Months :
   <select>
      <option *ngFor="let i of months">{{i}}</option>
   </select>
</div>

Hemos creado la etiqueta de selección normal con opción. Como opción, hemos utilizado elfor loop. losfor loop se utiliza para iterar sobre la matriz de meses, que a su vez creará la etiqueta de opción con el valor presente en los meses.

La sintaxis for en Angular es *ngFor = “let I of months” y para obtener el valor de los meses, lo mostramos en {{i}}.

Las dos llaves ayudan con el enlace de datos. Declaras las variables en tuapp.component.ts archivo y el mismo será reemplazado usando las llaves.

Veamos la salida de la matriz del mes anterior en el navegador.

La variable que se establece en el app.component.ts se puede unir con el app.component.htmlusando las llaves; por ejemplo,{{}}.

Ahora mostremos los datos en el navegador según la condición. Aquí, hemos agregado una variable y asignado el valor como verdadero. Usando la declaración if, podemos ocultar / mostrar el contenido que se mostrará.

Ejemplo

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   //array of months.
   months = ["January", "February", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];
   isavailable = true;   //variable is set to true
}

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<div> Months :
   <select>
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>

<div>
   <span *ngIf = "isavailable">Condition is valid.</span> 
   //over here based on if condition the text condition is valid is displayed. 
   If the value of isavailable is set to false it will not display the text.
</div>

Salida

Probemos el ejemplo anterior usando el IF THEN ELSE condición.

Ejemplo

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   //array of months.
   months = ["January", "February", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];
   isavailable = false;
}

En este caso, hemos realizado el isavailablevariable como falsa. Para imprimir elelse condición, tendremos que crear la ng-template como sigue -

<ng-template #condition1>Condition is invalid</ng-template>

El código completo se ve así:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<div> Months :
   <select>
      <option *ngFor="let i of months">{{i}}</option>
   </select>
</div>
<br/>

<div>
   <span *ngIf="isavailable; else condition1">Condition is valid.</span>
   <ng-template #condition1>Condition is invalid</ng-template>
</div>

If se utiliza con la condición else y la variable utilizada es condition1. Lo mismo se asigna comoid al ng-template, y cuando la variable disponible se establece en falso, el texto Condition is invalid se visualiza.

La siguiente captura de pantalla muestra la pantalla en el navegador.

Usemos ahora el if then else condición.

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   //array of months.
   months = ["January", "February", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];
   isavailable = true;
}

Ahora, haremos la variable isavailablecomo cierto. En el html, la condición se escribe de la siguiente manera:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
   <h1>
   Welcome to {{title}}.
   </h1>
</div>

<div> Months :
   <select>
      <option *ngFor="let i of months">{{i}}</option>
   </select>
</div>
<br/>

<div>
   <span *ngIf="isavailable; then condition1 else condition2">Condition is valid.</span>
   <ng-template #condition1>Condition is valid</ng-template>
   <ng-template #condition2>Condition is invalid</ng-template>
</div>

Si la variable es verdadera, entonces condition1, más condition2. Ahora, se crean dos plantillas con id#condition1 y #condition2.

La pantalla en el navegador es la siguiente:

En este capítulo, discutiremos cómo funciona Event Binding en Angular 4. Cuando un usuario interactúa con una aplicación en la forma de un movimiento del teclado, un clic del mouse o un mouseover, genera un evento. Estos eventos deben manejarse para realizar algún tipo de acción. Aquí es donde entra en escena la vinculación de eventos.

Consideremos un ejemplo para entender esto mejor.

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<div> Months :
   <select>
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>

<div>
   <span *ngIf = "isavailable; then condition1 else condition2">
      Condition is valid.
   </span>
   <ng-template #condition1>Condition is valid</ng-template>
   <ng-template #condition2>Condition is invalid</ng-template>
</div>
<button (click)="myClickFunction($event)">
   Click Me
</button>

En el app.component.html archivo, hemos definido un botón y le hemos agregado una función usando el evento click.

A continuación se muestra la sintaxis para definir un botón y agregarle una función.

(click)="myClickFunction($event)"

La función se define en el .ts archivo: app.component.ts

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   //array of months.
   months = ["January", "Feburary", "March", "April",
      "May", "June", "July", "August", "September",
      "October", "November", "December"];
   isavailable = true;
   myClickFunction(event) { 
      //just added console.log which will display the event details in browser on click of the button.
      alert("Button is clicked");
      console.log(event);
   }
}

Al hacer clic en el botón, el control llegará a la función myClickFunction y aparecerá un cuadro de diálogo, que muestra the Button is clicked como se muestra en la siguiente captura de pantalla:

Agreguemos ahora el evento de cambio al menú desplegable.

La siguiente línea de código lo ayudará a agregar el evento de cambio al menú desplegable:

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<div> Months :
   <select (change) = "changemonths($event)">
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>

<div>
   <span *ngIf = "isavailable; then condition1 else condition2">
      Condition is valid.
   </span>
   <ng-template #condition1>Condition is valid</ng-template>
   <ng-template #condition2>Condition is invalid</ng-template>
</div>

<button (click) = "myClickFunction($event)">Click Me</button>

La función se declara en el app.component.ts archivo -

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   //array of months.
   months = ["January", "Feburary", "March", "April",
      "May", "June", "July", "August", "September",
      "October", "November", "December"];
   isavailable = true;
   myClickFunction(event) {
      alert("Button is clicked");
      console.log(event);
   }
   changemonths(event) {
      console.log("Changed month from the Dropdown");
      console.log(event);
   }
}

El mensaje de la consola "Changed month from the Dropdown”Se muestra en la consola junto con el evento.

Agreguemos un mensaje de alerta en app.component.ts cuando el valor del menú desplegable se cambia como se muestra a continuación:

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   //array of months.
   months = ["January", "February", "March", "April",
         "May", "June", "July", "August", "September",
         "October", "November", "December"];
   
   isavailable = true;
   myClickFunction(event) { 
      //just added console.log which will display the event details in browser 
      on click of the button.
      alert("Button is clicked");
      console.log(event);
   }
   changemonths(event) {
      alert("Changed month from the Dropdown");
   }
}

Cuando se cambia el valor en el menú desplegable, aparecerá un cuadro de diálogo y se mostrará el siguiente mensaje: "Changed month from the Dropdown”.

Angular 4 usa el <ng-template> como la etiqueta en lugar de <template>que se usa en Angular2. La razón por la que Angular 4 cambió<template> a <ng-template> es porque hay un conflicto de nombre entre el <template> etiqueta y el html <template>etiqueta estándar. Desaprobará por completo seguir adelante. Este es uno de los principales cambios en Angular 4.

Usemos ahora la plantilla junto con el if else condición y ver la salida.

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<div> Months :
   <select (change) = "changemonths($event)" name = "month">
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>

<div>
   <span *ngIf = "isavailable;then condition1 else condition2">Condition is valid.</span>
   <ng-template #condition1>Condition is valid from template</ng-template>
   <ng-template #condition2>Condition is invalid from template</ng-template>
</div>
<button (click) = "myClickFunction($event)">Click Me</button>

Para la etiqueta Span, hemos agregado el if declaración con el else condition y llamará a la plantilla condition1, de lo contrario condition2.

Las plantillas deben llamarse de la siguiente manera:

<ng-template #condition1>Condition is valid from template</ng-template>
<ng-template #condition2>Condition is invalid from template</ng-template>

Si la condición es verdadera, entonces se llama a la plantilla condition1; de lo contrario, condition2.

app.component.ts

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 4 Project!';
   //array of months.
   months = ["January", "February", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];
   isavailable = false;
   myClickFunction(event) {
      this.isavailable = false;
   }
   changemonths(event) {
      alert("Changed month from the Dropdown");
      console.log(event);
   }
}

La salida en el navegador es la siguiente:

La variable isavailablees falso, por lo que se imprime la plantilla condition2. Si hace clic en el botón, se llamará a la plantilla correspondiente. Si inspecciona el navegador, verá que nunca obtiene la etiqueta span en el dom. El siguiente ejemplo le ayudará a entender lo mismo.

Si inspecciona el navegador, verá que el dom no tiene la etiqueta span. Tiene elCondition is invalid from template en el dom.

La siguiente línea de código en html nos ayudará a obtener la etiqueta span en el dom.

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<div> Months :
   <select (change) = "changemonths($event)" name = "month">
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>

<div>
   <span *ngIf = "isavailable; else condition2">Condition is valid.</span>
   <ng-template #condition1>Condition is valid from template</ng-template>
   <ng-template #condition2>Condition is invalid from template</ng-template>
</div>

<button (click)="myClickFunction($event)">Click Me</button>

Si eliminamos la condición entonces, obtenemos la “Condition is valid”mensaje en el navegador y la etiqueta span también está disponible en el dom. Por ejemplo, enapp.component.ts, hemos hecho el isavailable variable como verdadera.

Directives en Angular es un js clase, que se declara como @directive. Tenemos 3 directivas en Angular. Las directivas se enumeran a continuación:

Directivas de componentes

Estos forman la clase principal que tiene detalles de cómo el componente debe procesarse, instanciarse y usarse en tiempo de ejecución.

Directivas estructurales

Una directiva de estructura se ocupa básicamente de manipular los elementos dom. Las directivas estructurales tienen un signo * antes de la directiva. Por ejemplo,*ngIf y *ngFor.

Directivas de atributos

Las directivas de atributo se ocupan de cambiar el aspecto y el comportamiento del elemento dom. Puede crear sus propias directivas como se muestra a continuación.

¿Cómo crear directivas personalizadas?

En esta sección, analizaremos las directivas personalizadas que se utilizarán en los componentes. Las directivas personalizadas son creadas por nosotros y no son estándar.

Veamos cómo crear la directiva personalizada. Crearemos la directiva usando la línea de comando. El comando para crear la directiva usando la línea de comando es:

ng g directive nameofthedirective

e.g

ng g directive changeText

Así es como aparece en la línea de comando.

C:\projectA4\Angular 4-app>ng g directive changeText
installing directive
   create src\app\change-text.directive.spec.ts
   create src\app\change-text.directive.ts
   update src\app\app.module.ts

Los archivos anteriores, es decir, change-text.directive.spec.ts y change-text.directive.ts ser creado y el app.module.ts el archivo está actualizado.

app.module.ts

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

import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';

@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],

   imports: [
      BrowserModule
   ],

   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule { }

los ChangeTextDirectiveLa clase se incluye en las declaraciones del archivo anterior. La clase también se importa del archivo que se muestra a continuación.

cambiar-texto. directiva

import { Directive } from '@angular/core';
@Directive({
   selector: '[changeText]'
})

export class ChangeTextDirective {
   constructor() { }
}

El archivo anterior tiene una directiva y también una propiedad de selector. Sea lo que sea que definamos en el selector, lo mismo tiene que coincidir en la vista, donde asignamos la directiva personalizada.

En el app.component.html vista, agreguemos la directiva de la siguiente manera:

<div style="text-align:center">
   <span changeText >Welcome to {{title}}.</span>
</div>

Escribiremos los cambios en change-text.directive.ts archivo de la siguiente manera:

change-text.directive.ts

import { Directive, ElementRef} from '@angular/core';
@Directive({
   selector: '[changeText]'
})

export class ChangeTextDirective {
   constructor(Element: ElementRef) {
      console.log(Element);
      Element.nativeElement.innerText="Text is changed by changeText Directive. ";
   }
}

En el archivo anterior, hay una clase llamada ChangeTextDirective y un constructor, que toma el elemento de tipo ElementRef, que es obligatorio. El elemento tiene todos los detalles a los que elChange Text se aplica la directiva.

Hemos agregado el console.logelemento. El resultado del mismo se puede ver en la consola del navegador. El texto del elemento también se cambia como se muestra arriba.

Ahora, el navegador mostrará lo siguiente.

En este capítulo, discutiremos qué son las tuberías en Angular 4. Las tuberías se llamaban anteriormente filtros en Angular1 y se llamaban tuberías en Angular 2 y 4.

El | El carácter se utiliza para transformar datos. A continuación se muestra la sintaxis para el mismo

{{ Welcome to Angular 4 | lowercase}}

Toma enteros, cadenas, matrices y fecha como entrada separados con | para ser convertido en el formato requerido y mostrar el mismo en el navegador.

Consideremos algunos ejemplos que utilizan tuberías.

Aquí, queremos mostrar el texto dado en mayúsculas. Esto se puede hacer usando tuberías de la siguiente manera:

En el app.component.ts archivo, hemos definido la variable de título -

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
}

La siguiente línea de código entra en el app.component.html archivo.

<b>{{title | uppercase}}</b><br/>
<b>{{title | lowercase}}</b>

El navegador aparece como se muestra en la siguiente captura de pantalla:

Angular 4 proporciona algunas tuberías integradas. Las tuberías se enumeran a continuación:

• Lowercasepipe
• Uppercasepipe
• Datepipe
• Currencypipe
• Jsonpipe
• Percentpipe
• Decimalpipe
• Slicepipe

Ya hemos visto los tubos en minúsculas y mayúsculas. Veamos ahora cómo funcionan las otras tuberías.

La siguiente línea de código nos ayudará a definir las variables requeridas en app.component.ts archivo -

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate = new Date();
   jsonval = {name:'Rox', age:'25', address:{a1:'Mumbai', a2:'Karnataka'}};
   months = ["Jan", "Feb", "Mar", "April", "May", "Jun",
             "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
}

Usaremos las tuberías en el app.component.html archivo.

<!--The content below is only a placeholder and can be replaced.-->
<div style = "width:100%;">
   <div style = "width:40%;float:left;border:solid 1px black;">
      <h1>Uppercase Pipe</h1>
      <b>{{title | uppercase}}</b><br/>
      
      <h1>Lowercase Pipe</h1>
      <b>{{title | lowercase}}</b>
      
      <h1>Currency Pipe</h1>
      <b>{{6589.23 | currency:"USD"}}</b><br/>
      <b>{{6589.23 | currency:"USD":true}}</b> //Boolean true is used to get the sign of the currency.
      
      <h1>Date pipe</h1>
      <b>{{todaydate | date:'d/M/y'}}</b><br/>
      <b>{{todaydate | date:'shortTime'}}</b>
      
      <h1>Decimal Pipe</h1>
      <b>{{ 454.78787814 | number: '3.4-4' }}</b> // 3 is for main integer, 4 -4 are for integers to be displayed.
   </div>
   
   <div style = "width:40%;float:left;border:solid 1px black;">
      <h1>Json Pipe</h1>
      <b>{{ jsonval | json }}</b>
      <h1>Percent Pipe</h1>
      <b>{{00.54565 | percent}}</b>
      <h1>Slice Pipe</h1>
      <b>{{months | slice:2:6}}</b> 
      // here 2 and 6 refers to the start and the end index
   </div>
</div>

Las siguientes capturas de pantalla muestran la salida de cada tubería:

¿Cómo crear una tubería personalizada?

Para crear una tubería personalizada, hemos creado una nueva tsarchivo. Aquí, queremos crear elsqrttubería personalizada. Le hemos dado el mismo nombre al archivo y tiene el siguiente aspecto:

app.sqrt.ts

import {Pipe, PipeTransform} from '@angular/core';
@Pipe ({
   name : 'sqrt'
})
export class SqrtPipe implements PipeTransform {
   transform(val : number) : number {
      return Math.sqrt(val);
   }
}

Para crear una tubería personalizada, tenemos que importar Pipe and Pipe Transform desde Angular / core. En la directiva @Pipe, tenemos que darle el nombre a nuestra tubería, que se usará en nuestro archivo .html. Dado que estamos creando la tubería sqrt, la llamaremos sqrt.

A medida que avanzamos, tenemos que crear la clase y el nombre de la clase es SqrtPipe. Esta clase implementará elPipeTransform.

El método de transformación definido en la clase tomará el argumento como número y devolverá el número después de sacar la raíz cuadrada.

Dado que hemos creado un nuevo archivo, debemos agregar el mismo en app.module.ts. Esto se hace de la siguiente manera:

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

import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],

   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Hemos creado el app.sqrt.tsclase. Tenemos que importar lo mismo enapp.module.tsy especifique la ruta del archivo. También debe incluirse en las declaraciones como se muestra arriba.

Veamos ahora la llamada realizada a la tubería sqrt en el app.component.html archivo.

<h1>Custom Pipe</h1>
<b>Square root of 25 is: {{25 | sqrt}}</b>
<br/>
<b>Square root of 729 is: {{729 | sqrt}}</b>

La salida tiene el siguiente aspecto:

El enrutamiento básicamente significa navegar entre páginas. Ha visto muchos sitios con enlaces que lo dirigen a una nueva página. Esto se puede lograr mediante el enrutamiento. Aquí las páginas a las que nos referimos estarán en forma de componentes. Ya hemos visto cómo crear un componente. Creemos ahora un componente y veamos cómo usar el enrutamiento con él.

En el componente principal principal app.module.ts, ahora tenemos que incluir el módulo del enrutador como se muestra a continuación:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';

import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      RouterModule.forRoot([
         {
            path: 'new-cmp',
            component: NewCmpComponent
         }
      ])
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

importar {RouterModule} desde '@ angular / enrutador'

Aquí, el RouterModule se importa de angular / enrutador. El módulo se incluye en las importaciones como se muestra a continuación:

RouterModule.forRoot([
   {
      path: 'new-cmp',
      component: NewCmpComponent
   }
])

RouterModule se refiere al forRootque toma una entrada como una matriz, que a su vez tiene el objeto de la ruta y el componente. Path es el nombre del enrutador y el componente es el nombre de la clase, es decir, el componente creado.

Veamos ahora el archivo creado por el componente -

New-cmp.component.ts

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

@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})

export class NewCmpComponent implements OnInit {
   newcomponent = "Entered in new component created";
   constructor() {}
   ngOnInit() { }
}

La clase resaltada se menciona en las importaciones del módulo principal.

New-cmp.component.html

<p>
   {{newcomponent}}
</p>

<p>
   new-cmp works!
</p>

Ahora, necesitamos que el contenido anterior del archivo html se muestre siempre que sea necesario o se haga clic en el módulo principal. Para esto, necesitamos agregar los detalles del enrutador en elapp.component.html.

<h1>Custom Pipe</h1>
<b>Square root of 25 is: {{25 | sqrt}}</b><br/>
<b>Square root of 729 is: {{729 | sqrt}}</b>

<br />
<br />
<br />
<a routerLink = "new-cmp">New component</a>

<br />
<br/>
<router-outlet></router-outlet>

En el código anterior, hemos creado la etiqueta de enlace de anclaje y hemos dado routerLink como “new-cmp”. Esto se refiere enapp.module.ts como el camino.

Cuando un usuario hace clic new component, la página debe mostrar el contenido. Para esto, necesitamos la siguiente etiqueta:<router-outlet> </router-outlet>.

La etiqueta anterior garantiza que el contenido de la new-cmp.component.html se mostrará en la página cuando un usuario haga clic new component.

Veamos ahora cómo se muestra la salida en el navegador.

Cuando un usuario hace clic en Nuevo componente, verá lo siguiente en el navegador.

La URL contiene http://localhost:4200/new-cmp. Aquí, el new-cmp se agrega a la URL original, que es la ruta dada en elapp.module.ts y el enlace del enrutador en el app.component.html.

Cuando un usuario hace clic en Nuevo componente, la página no se actualiza y el contenido se muestra al usuario sin recargar. Solo se volverá a cargar una parte particular del código del sitio al hacer clic. Esta función ayuda cuando tenemos mucho contenido en la página y es necesario cargarla en función de la interacción del usuario. La función también brinda una buena experiencia de usuario ya que la página no se recarga.

En este capítulo, discutiremos los servicios en Angular 4.

Podríamos encontrarnos con una situación en la que necesitemos que se use algún código en todas partes de la página. Puede ser para la conexión de datos que debe compartirse entre componentes, etc. Los servicios nos ayudan a lograrlo. Con los servicios, podemos acceder a métodos y propiedades en otros componentes de todo el proyecto.

Para crear un servicio, necesitamos hacer uso de la línea de comando. El comando para lo mismo es:

C:\projectA4\Angular 4-app>ng g service myservice
installing service
   create src\app\myservice.service.spec.ts
   create src\app\myservice.service.ts
   WARNING Service is generated but not provided, it must be provided to be used

   C:\projectA4\Angular 4-app>

Los archivos se crean en la carpeta de la aplicación de la siguiente manera:

Los siguientes son los archivos creados en la parte inferior: myservice.service.specs.ts y myservice.service.ts.

myservice.service.ts

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

@Injectable()
export class MyserviceService {
   constructor() { }
}

Aquí, el módulo Inyectable se importa del @angular/core. Contiene el@Injectable método y una clase llamada MyserviceService. Crearemos nuestra función de servicio en esta clase.

Antes de crear un nuevo servicio, debemos incluir el servicio creado en el padre principal. app.module.ts.

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

import { MyserviceService } from './myservice.service';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      RouterModule.forRoot([
         {
            path: 'new-cmp',
            component: NewCmpComponent
         }
      ])
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})

export class AppModule { }

Hemos importado el Servicio con el nombre de la clase y la misma clase se usa en los proveedores. Regresemos ahora a la clase de servicio y creemos una función de servicio.

En la clase de servicio, crearemos una función que mostrará la fecha de hoy. Podemos usar la misma función en el componente principal principalapp.component.ts y también en el nuevo componente new-cmp.component.ts que creamos en el capítulo anterior.

Veamos ahora cómo se ve la función en el servicio y cómo usarla en componentes.

import { Injectable } from '@angular/core';
@Injectable()
export class MyserviceService {
   constructor() { }
   showTodayDate() {
      let ndate = new Date();
      return ndate;
   }
}

En el archivo de servicio anterior, hemos creado una función showTodayDate. Ahora devolveremos la nueva Fecha () creada. Veamos cómo podemos acceder a esta función en la clase de componente.

app.component.ts

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
   }
}

los ngOnInitLa función se llama por defecto en cualquier componente creado. La fecha se obtiene del servicio como se muestra arriba. Para obtener más detalles del servicio, primero debemos incluir el servicio en el componentets archivo.

Mostraremos la fecha en el .html archivo como se muestra a continuación -

{{todaydate}}
<app-new-cmp></app-new-cmp> 
// data to be displayed to user from the new component class.

Veamos ahora cómo utilizar el servicio en el nuevo componente creado.

import { Component, OnInit } from '@angular/core';
import { MyserviceService } from './../myservice.service';

@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})

export class NewCmpComponent implements OnInit {
   todaydate;
   newcomponent = "Entered in new component created";
   constructor(private myservice: MyserviceService) {}

   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
   }
}

En el nuevo componente que hemos creado, primero debemos importar el servicio que queremos y acceder a los métodos y propiedades del mismo. Consulte el código resaltado. La fecha de hoy se muestra en el componente html de la siguiente manera:

<p>
   {{newcomponent}}
</p>
<p>
   Today's Date : {{todaydate}}
</p>

El selector del nuevo componente se utiliza en el app.component.htmlarchivo. El contenido del archivo html anterior se mostrará en el navegador como se muestra a continuación:

Si cambia la propiedad del servicio en cualquier componente, también se cambia en otros componentes. Veamos ahora cómo funciona esto.

Definiremos una variable en el servicio y la usaremos en el componente principal y en el nuevo. Nuevamente cambiaremos la propiedad en el componente padre y veremos si la misma se cambia en el nuevo componente o no.

En myservice.service.ts, hemos creado una propiedad y usamos la misma en otro componente padre y nuevo.

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

@Injectable()
export class MyserviceService {
   serviceproperty = "Service Created";
   constructor() { }
   showTodayDate() {
      let ndate = new Date();
      return ndate;
   }
}

Usemos ahora el servicepropertyvariable en otros componentes. Enapp.component.ts, estamos accediendo a la variable de la siguiente manera:

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   componentproperty;
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
      console.log(this.myservice.serviceproperty);
      this.myservice.serviceproperty = "component created"; // value is changed.
      this.componentproperty = this.myservice.serviceproperty;
   }
}

Ahora buscaremos la variable y trabajaremos en console.log. En la siguiente línea, cambiaremos el valor de la variable a "component created”. Haremos lo mismo ennew-cmp.component.ts.

import { Component, OnInit } from '@angular/core';
import { MyserviceService } from './../myservice.service';

@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})

export class NewCmpComponent implements OnInit {
   todaydate;
   newcomponentproperty;
   newcomponent = "Entered in newcomponent";
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
      this.newcomponentproperty = this.myservice.serviceproperty;
   }
}

En el componente anterior, no cambiamos nada, sino que asignamos directamente la propiedad a la propiedad del componente.

Ahora, cuando lo ejecute en el navegador, la propiedad del servicio cambiará ya que el valor de la misma se cambia en app.component.ts y lo mismo se mostrará para el new-cmp.component.ts.

También verifique el valor en la consola antes de cambiarlo.

El servicio Http nos ayudará a obtener datos externos, publicarlos, etc. Necesitamos importar el módulo http para hacer uso del servicio http. Consideremos un ejemplo para entender cómo hacer uso del servicio http.

Para comenzar a usar el servicio http, necesitamos importar el módulo en app.module.ts como se muestra a continuación -

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

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

Si ve el código resaltado, hemos importado el HttpModule desde @ angular / http y lo mismo también se agrega en la matriz de importaciones.

Usemos ahora el servicio http en el app.component.ts.

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   constructor(private http: Http) { }
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users").
      map((response) ⇒ response.json()).
      subscribe((data) ⇒ console.log(data))
   }
}

Entendamos el código resaltado arriba. Necesitamos importar http para hacer uso del servicio, que se hace de la siguiente manera:

import { Http } from '@angular/http';

En la clase AppComponent, se crea un constructor y la variable privada http de tipo Http. Para obtener los datos, necesitamos usar elget API disponible con http de la siguiente manera

this.http.get();

Se necesita la URL para obtener el parámetro como se muestra en el código.

Usaremos la URL de prueba - https://jsonplaceholder.typicode.com/userspara recuperar los datos json. Se realizan dos operaciones en el mapa de datos de URL obtenido y se suscriben. El método Map ayuda a convertir los datos a formato json. Para usar el mapa, necesitamos importar lo mismo que se muestra a continuación:

import 'rxjs/add/operator/map';

Una vez hecho el mapa, el suscriptor registrará la salida en la consola como se muestra en el navegador:

Si ve, los objetos json se muestran en la consola. Los objetos también se pueden mostrar en el navegador.

Para que los objetos se muestren en el navegador, actualice los códigos en app.component.html y app.component.ts como sigue -

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   constructor(private http: Http) { }
   httpdata;
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users").
      map(
         (response) ⇒ response.json()
      ).
      subscribe(
         (data) ⇒ {this.displaydata(data);}
      )
   }
   displaydata(data) {this.httpdata = data;}
}

En app.component.ts, utilizando el método de suscripción, llamaremos al método de visualización de datos y le pasaremos los datos obtenidos como parámetro.

En el método de visualización de datos, almacenaremos los datos en una variable httpdata. Los datos se muestran en el navegador usandofor sobre esta variable httpdata, que se realiza en el app.component.html archivo.

<ul *ngFor = "let data of httpdata">
   <li>Name : {{data.name}} Address: {{data.address.city}}</li>
</ul>

El objeto json es el siguiente:

{
   "id": 1,
   "name": "Leanne Graham",
   "username": "Bret",
   "email": "[email protected]",
   
   "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
         "lat": "-37.3159",
         "lng": "81.1496"
      }
   },
   
   "phone": "1-770-736-8031 x56442",
   "website": "hildegard.org",
   "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
   }
}

El objeto tiene propiedades como id, nombre, nombre de usuario, correo electrónico y dirección que internamente tiene calle, ciudad, etc. y otros detalles relacionados con el teléfono, el sitio web y la empresa. Utilizando elfor bucle, mostraremos el nombre y los detalles de la ciudad en el navegador como se muestra en el app.component.html archivo.

Así es como se muestra la pantalla en el navegador:

Agreguemos ahora el parámetro de búsqueda, que filtrará en función de datos específicos. Necesitamos obtener los datos basados ​​en el parámetro de búsqueda pasado.

A continuación se muestran los cambios realizados en app.component.html y app.component.ts archivos -

app.component.ts

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'app';
   searchparam = 2;
   jsondata;
   name;
   constructor(private http: Http) { }
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users?id="+this.searchparam).
      map(
         (response) ⇒ response.json()
      ).
      subscribe((data) ⇒ this.converttoarray(data))
   }
   converttoarray(data) {
      console.log(data);
      this.name = data[0].name;
   }
}

Para el get api, agregaremos el parámetro de búsqueda id = this.searchparam. El parámetro de búsqueda es igual a 2. Necesitamos los detalles deid=2 desde el archivo json.

app.component.html

{{name}}

Así es como se muestra el navegador:

Hemos consolado los datos en el navegador, que se recibe desde el http. Lo mismo se muestra en la consola del navegador. El nombre del json conid=2 se muestra en el navegador.

En este capítulo, veremos cómo se usan los formularios en Angular 4. Discutiremos dos formas de trabajar con formularios: formularios controlados por plantillas y formularios controlados por modelos.

Formulario basado en plantillas

Con un formulario basado en plantilla, la mayor parte del trabajo se realiza en la plantilla; y con la forma dirigida por modelo, la mayor parte del trabajo se realiza en la clase de componente.

Consideremos ahora trabajar en el formulario basado en plantillas. Crearemos un formulario de inicio de sesión simple y agregaremos la identificación de correo electrónico, la contraseña y enviaremos el botón en el formulario. Para empezar, necesitamos importar a FormsModule desde@angular/core que se hace en app.module.ts como sigue -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';

import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

import { MyserviceService } from './myservice.service';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      HttpModule,
      FormsModule,
      RouterModule.forRoot([
         {path: 'new-cmp',component: NewCmpComponent}
      ])
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})

export class AppModule { }

Entonces en app.module.ts, hemos importado el FormsModule y el mismo se agrega en la matriz de importaciones como se muestra en el código resaltado.

Creemos ahora nuestro formulario en el app.component.html archivo.

<form #userlogin = "ngForm" (ngSubmit) = "onClickSubmit(userlogin.value)" >
   <input type = "text" name = "emailid" placeholder = "emailid" ngModel>
   <br/>
   <input type = "password" name = "passwd" placeholder = "passwd" ngModel>
   <br/>
   <input type = "submit" value = "submit">
</form>

Hemos creado un formulario simple con etiquetas de entrada con identificación de correo electrónico, contraseña y el botón de envío. Le hemos asignado tipo, nombre y marcador de posición.

En formularios controlados por plantillas, necesitamos crear los controles de formulario modelo agregando el ngModel directiva y la nameatributo. Por lo tanto, donde queramos que Angular acceda a nuestros datos desde formularios, agregue ngModel a esa etiqueta como se muestra arriba. Ahora, si tenemos que leer el emailid y passwd, necesitamos agregar el ngModel a través de él.

Si ve, también hemos agregado el ngForm al #userlogin. losngFormLa directiva debe agregarse a la plantilla de formulario que hemos creado. También hemos añadido funciónonClickSubmit y asignado userlogin.value lo.

Creemos ahora la función en el app.component.ts y recuperar los valores ingresados ​​en el formulario.

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   componentproperty;
   constructor(private myservice: MyserviceService) { }
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
   }
   onClickSubmit(data) {
      alert("Entered Email id : " + data.emailid);
   }
}

En lo de arriba app.component.tsarchivo, hemos definido la función onClickSubmit. Al hacer clic en el botón de envío del formulario, el control llegará a la función anterior.

Así es como se muestra el navegador:

El formulario se ve como se muestra a continuación. Ingresemos los datos en él y en la función de envío, la identificación del correo electrónico ya está ingresada.

La identificación del correo electrónico se muestra en la parte inferior como se muestra en la captura de pantalla anterior.

Forma dirigida por modelo

En la forma dirigida por modelo, necesitamos importar el ReactiveFormsModule de @ angular / forms y usar el mismo en la matriz de importaciones.

Hay un cambio que entra app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';

import { HttpModule } from '@angular/http';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

import { MyserviceService } from './myservice.service';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      HttpModule,
      ReactiveFormsModule,
      RouterModule.forRoot([
         {
            path: 'new-cmp',
            component: NewCmpComponent
         }
      ])
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

En app.component.ts, necesitamos importar algunos módulos para el formulario basado en modelo. Por ejemplo,import { FormGroup, FormControl } from '@angular/forms'.

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   componentproperty;
   emailid;
   formdata;
   constructor(private myservice: MyserviceService) { }
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
      this.formdata = new FormGroup({
         emailid: new FormControl("[email protected]"),
         passwd: new FormControl("abcd1234")
      });
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

La variable formdata se inicializa al comienzo de la clase y la misma se inicializa con FormGroup como se muestra arriba. Las variables emailid y passwd se inicializan con valores predeterminados que se mostrarán en el formulario. Puede dejarlo en blanco en caso de que lo desee.

Así es como se verán los valores en la interfaz de usuario del formulario.

Hemos utilizado formdata para inicializar los valores del formulario; Necesitamos usar lo mismo en la interfaz de usuario del formulario.app.component.html.

<div>
   <form [formGroup]="formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
      <input type="text" class="fortextbox" name="emailid" placeholder="emailid" 
      formControlName="emailid">
      <br/>
      
      <input type="password" class="fortextbox" name="passwd" 
      placeholder="passwd" formControlName="passwd">
      <br/>
      
      <input type="submit" class="forsubmit" value="Log In">
   </form>
</div>
<p>
   Email entered is : {{emailid}}
</p>

En el archivo .html, hemos utilizado formGroup entre corchetes para el formulario; por ejemplo, [formGroup] = ”formdata”. Al enviar, la función se llamaonClickSubmit para cual formdata.value esta pasado.

La etiqueta de entrada formControlNamese utiliza. Se le da un valor que hemos utilizado en elapp.component.ts archivo.

Al hacer clic en enviar, el control pasará a la función onClickSubmit, que se define en el app.component.ts archivo.

Al hacer clic en Iniciar sesión, el valor se mostrará como se muestra en la captura de pantalla anterior.

Validación de formulario

Analicemos ahora la validación de formularios utilizando formularios controlados por modelos. Puede utilizar la validación de formulario incorporada o también utilizar el enfoque de validación personalizado. Usaremos ambos enfoques en el formulario. Continuaremos con el mismo ejemplo que creamos en uno de nuestros apartados anteriores. Con Angular 4, necesitamos importar validadores de@angular/forms como se muestra a continuación -

import { FormGroup, FormControl, Validators} from '@angular/forms'

Angular tiene validadores incorporados como mandatory field, minlength, maxlengthy pattern. Se accede a estos mediante el módulo Validadores.

Puede simplemente agregar validadores o una serie de validadores necesarios para decirle a Angular si un campo en particular es obligatorio.

Intentemos ahora lo mismo en uno de los cuadros de texto de entrada, es decir, id de correo electrónico. Para la identificación de correo electrónico, hemos agregado los siguientes parámetros de validación:

• Required
• La coincidencia de patrones

Así es como se valida un código en app.component.ts.

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   componentproperty;
   emailid;
   formdata;
   ngOnInit() {
      this.formdata = new FormGroup({
         emailid: new FormControl("", Validators.compose([
            Validators.required,
            Validators.pattern("[^ @]*@[^ @]*")
         ])),
         passwd: new FormControl("")
      });
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

En Validators.compose, puede agregar la lista de cosas que desea validar en el campo de entrada. Ahora mismo, hemos agregado elrequired y el pattern matching parámetros para tomar solo correo electrónico válido.

En el app.component.html, el botón enviar está deshabilitado si alguna de las entradas del formulario no es válida. Esto se hace de la siguiente manera:

<div>
   <form [formGroup] = "formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
      <input type = "text" class = "fortextbox" name = "emailid" placeholder = "emailid" 
         formControlName = "emailid">
      <br/>
      <input type = "password" class = "fortextbox" name = "passwd" 
         placeholder = "passwd" formControlName = "passwd">
      <br/>
      <input type = "submit" [disabled] = "!formdata.valid" class = "forsubmit" 
         value = "Log In">
   </form>
</div>

<p>
   Email entered is : {{emailid}}
</p>

Para el botón enviar, hemos agregado deshabilitado en el corchete, al que se le da un valor: !formdata.valid. Por lo tanto, si formdata.valid no es válido, el botón permanecerá deshabilitado y el usuario no podrá enviarlo.

Veamos cómo funciona esto en el navegador:

En el caso anterior, la identificación de correo electrónico ingresada no es válida, por lo que el botón de inicio de sesión está deshabilitado. Intentemos ahora ingresar la identificación de correo electrónico válida y ver la diferencia.

Ahora, la identificación de correo electrónico ingresada es válida. Por lo tanto, podemos ver que el botón de inicio de sesión está habilitado y el usuario podrá enviarlo. Con esto, la identificación de correo electrónico ingresada se muestra en la parte inferior.

Probemos ahora la validación personalizada con el mismo formulario. Para la validación personalizada, podemos definir nuestra propia función personalizada y agregar los detalles requeridos en ella. Ahora veremos un ejemplo de lo mismo.

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   componentproperty;
   emailid;
   formdata;
   ngOnInit() {
      this.formdata = new FormGroup({
         emailid: new FormControl("", Validators.compose([
            Validators.required,
            Validators.pattern("[^ @]*@[^ @]*")
         ])),
         passwd: new FormControl("", this.passwordvalidation)
      });
   }
   passwordvalidation(formcontrol) {
      if (formcontrol.value.length <'; 5) {
         return {"passwd" : true};
      }
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

En el ejemplo anterior, hemos creado una función password validation y lo mismo se usa en una sección anterior en el control de formulario - passwd: new FormControl("", this.passwordvalidation).

En la función que hemos creado, comprobaremos si la longitud de los caracteres introducidos es la adecuada. Si los caracteres son menos de cinco, regresará con la contraseña verdadera como se muestra arriba -return {"passwd" : true};. Si los caracteres son más de cinco, lo considerará válido y se habilitará el inicio de sesión.

Veamos ahora cómo se muestra esto en el navegador:

Hemos introducido solo tres caracteres en la contraseña y el inicio de sesión está desactivado. Para habilitar el inicio de sesión, necesitamos más de cinco caracteres. Ingresemos ahora una longitud válida de caracteres y verifiquemos.

El inicio de sesión está habilitado ya que tanto la identificación de correo electrónico como la contraseña son válidas. El correo electrónico se muestra en la parte inferior cuando iniciamos sesión.

Las animaciones agregan mucha interacción entre los elementos html. La animación también estaba disponible con Angular2. La diferencia con Angular 4 es que la animación ya no es parte del@angular/core biblioteca, pero es un paquete separado que debe importarse en app.module.ts.

Para empezar, necesitamos importar la biblioteca de la siguiente manera:

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

los BrowserAnimationsModule debe agregarse a la matriz de importación en app.module.ts como se muestra a continuación -

app.module.ts

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

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';

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

En app.component.html, hemos agregado los elementos html, que serán animados.

<div>
   <button (click)="animate()">Click Me</button>
   <div [@myanimation] = "state" class="rotate">
      <img src="assets/images/img.png" width="100" height="100">
   </div>
</div>

Para el div principal, hemos agregado un botón y un div con una imagen. Hay un evento de clic para el que se llama a la función animada. Y para el div, el@myanimation Se agrega la directiva y se le da el valor como estado.

Veamos ahora el app.component.ts donde se define la animación.

import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
   styles:[`
      div{
         margin: 0 auto;
         text-align: center;
         width:200px;
      }
      .rotate{
         width:100px;
         height:100px;
         border:solid 1px red;
      }
   `],
   animations: [
      trigger('myanimation',[
         state('smaller',style({
            transform : 'translateY(100px)'
         })),
         state('larger',style({
            transform : 'translateY(0px)'
         })),
         transition('smaller <=> larger',animate('300ms ease-in'))
      ])
   ]
})

export class AppComponent {
   state: string = "smaller";
   animate() {
      this.state= this.state == 'larger' ? 'smaller' : 'larger';
   }
}

Tenemos que importar la función de animación que se utilizará en el archivo .ts como se muestra arriba.

import { trigger, state, style, transition, animate } from '@angular/animations';

Aquí hemos importado disparador, estado, estilo, transición y animación desde @ angular / animaciones.

Ahora, agregaremos la propiedad de animaciones al decorador @Component () -

animations: [
   trigger('myanimation',[
      state('smaller',style({
         transform : 'translateY(100px)'
      })),
      state('larger',style({
         transform : 'translateY(0px)'
      })),
      transition('smaller <=> larger',animate('300ms ease-in'))
   ])
]

Trigger define el inicio de la animación. El primer parámetro es el nombre de la animación que se le dará a la etiqueta html a la que se debe aplicar la animación. El segundo parámetro son las funciones que hemos importado: estado, transición, etc.

los stateLa función involucra los pasos de animación, entre los cuales el elemento hará la transición. Ahora mismo hemos definido dos estados, más pequeños y más grandes. Para un estado más pequeño, le hemos dado el estilo.transform:translateY(100px) y transform:translateY(100px).

La función de transición agrega animación al elemento html. El primer argumento toma los estados, es decir, inicio y final; el segundo argumento acepta la función animada. La función de animación le permite definir la duración, el retraso y la relajación de una transición.

Veamos ahora el archivo .html para ver cómo funciona la función de transición

<div>
   <button (click)="animate()">Click Me</button>
   <div [@myanimation] = "state" class="rotate">
      <img src="assets/images/img.png" width="100" height="100">
   </div>
</div>

Hay una propiedad de estilo agregada en el @componentdirectiva, que alinea centralmente el div. Consideremos el siguiente ejemplo para entender lo mismo:

styles:[`
   div{
      margin: 0 auto;
      text-align: center;
      width:200px;
   }
   .rotate{
      width:100px;
      height:100px;
      border:solid 1px red;
   }
`],

Aquí, se usa un carácter especial [``] para agregar estilos al elemento html, si lo hay. Para el div, le hemos dado el nombre de la animación definido en el archivo app.component.ts.

Con el clic de un botón, llama a la función animada, que se define en el archivo app.component.ts de la siguiente manera:

export class AppComponent {
   state: string = "smaller";
   animate() {
      this.state= this.state == ‘larger’? 'smaller' : 'larger';
   }
}

La variable de estado está definida y se le da el valor predeterminado como menor. La función animada cambia el estado al hacer clic. Si el estado es más grande, se convertirá en más pequeño; y si es más pequeño, se convertirá en más grande.

Así es como la salida en el navegador (http://localhost:4200/) se verá como -

Al hacer clic en el Click Me , la posición de la imagen se cambia como se muestra en la siguiente captura de pantalla:

La función de transformación se aplica en el ydirección, que cambia de 0 a 100 px cuando se hace clic en el botón Hacer clic en mí. La imagen se almacena en elassets/images carpeta.

Materialsofrecen una gran cantidad de módulos integrados para su proyecto. Las funciones como autocompletar, selector de fecha, control deslizante, menús, cuadrículas y barra de herramientas están disponibles para usar con materiales en Angular 4.

Para utilizar materiales, necesitamos importar el paquete. Angular 2 también tiene todas las características anteriores, pero están disponibles como parte del módulo @ angular / core. Angular 4 ha creado un módulo separado@angular/materials.. Esto ayuda al usuario a importar los materiales necesarios.

Para comenzar a usar materiales, debe instalar dos paquetes: materiales y cdk. Los componentes del material dependen del módulo de animación para las funciones avanzadas, por lo que necesita el paquete de animación para el mismo, es decir, @ angular / animaciones. El paquete ya se actualizó en el capítulo anterior.

npm install --save @angular/material @angular/cdk

Veamos ahora el package.json. @angular/material y @angular/cdk están instalados.

{
   "name": "angularstart",
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
   },
   
   "private": true,
   
   "dependencies": {
      "@angular/animations": "^4.0.0",
      "@angular/cdk": "^2.0.0-beta.8",
      "@angular/common": "^4.0.0",
      "@angular/compiler": "^4.0.0",
      "@angular/core": "^4.0.0",
      "@angular/forms": "^4.0.0",
      
      "@angular/http": "^4.0.0",
      "@angular/material": "^2.0.0-beta.8",
      "@angular/platform-browser": "^4.0.0",
      "@angular/platform-browser-dynamic": "^4.0.0",
      "@angular/router": "^4.0.0",
      "core-js": "^2.4.1",
      "rxjs": "^5.1.0",
      "zone.js": "^0.8.4"
   },
   
   "devDependencies": {
      "@angular/cli": "1.2.0",
      "@angular/compiler-cli": "^4.0.0",
      "@angular/language-service": "^4.0.0",
      "@types/jasmine": "~2.5.53",
      "@types/jasminewd2": "~2.0.2",
      "@types/node": "~6.0.60",
      "codelyzer": "~3.0.1",
      "jasmine-core": "~2.6.2",
      "jasmine-spec-reporter": "~4.1.0",
      
      "karma": "~1.7.0",
      "karma-chrome-launcher": "~2.1.1",
      "karma-cli": "~1.0.1",
      "karma-coverage-istanbul-reporter": "^1.2.1",
      "karma-jasmine": "~1.1.0",
      "karma-jasmine-html-reporter": "^0.2.2",
      
      "protractor": "~5.1.2",
      "ts-node": "~3.0.4",
      "tslint": "~5.3.2",
      "typescript": "~2.3.3"
   }
}

Hemos destacado los paquetes que se instalan para trabajar con materiales.

Ahora importaremos los módulos en el módulo principal: app.module.ts Como se muestra abajo.

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

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MdButtonModule, MdMenuModule, MdSidenavModule } from '@angular/material';

import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MdButtonModule,
      MdMenuModule,
      FormsModule,
      MdSidenavModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

En el archivo anterior, hemos importado los siguientes módulos de @ angular / materials.

import { MdButtonModule, MdMenuModule, MdSidenavModule } from '@angular/material';

Y lo mismo se usa en la matriz de importaciones como se muestra a continuación:

imports: [
   BrowserModule,
   BrowserAnimationsModule,
   MdButtonModule,
   MdMenuModule,
   FormsModule,
   MdSidenavModule
]

los app.component.ts es como se muestra a continuación -

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   myData: Array<any>;
   constructor() {}
}

Agreguemos ahora el material en app.component.html.

<button md-button [mdMenuTriggerFor]="menu">Menu</button>
<md-menu #menu="mdMenu">
   <button md-menu-item>
      File
   </button>
   <button md-menu-item>
      Save As
   </button>
</md-menu>

<md-sidenav-container class="example-container">
   <md-sidenav #sidenav class="example-sidenav">
      Angular 4
   </md-sidenav>
      
   <div class="example-sidenav-content">
      <button type="button" md-button  (click)="sidenav.open()">
         Open sidenav
      </button>
   </div>
</md-sidenav-container>

En el archivo anterior, hemos agregado Menú y SideNav.

Menú

Para agregar un menú, <md-menu></md-menu>se utiliza. losfile y Save As los elementos se agregan al botón debajo md-menu. Hay un botón principal agregadoMenu. La referencia del mismo se da en <md-menu> usando[mdMenuTriggerFor]=”menu” y usando el menú con # in <md-menu>.

SideNav

Para agregar sidenav, necesitamos <md-sidenav-container></md-sidenav-container>. <md-sidenav></md-sidenav>se agrega como hijo al contenedor. Hay otro div agregado, que activa el sidenav usando(click)=”sidenav.open()”. A continuación se muestra la visualización del menú y la navegación lateral en el navegador:

Al hacer clic opensidenav, muestra la barra lateral como se muestra a continuación -

Al hacer clic en Menú, obtendrá dos elementos File y Save As como se muestra a continuación -

Agreguemos ahora un selector de fechas usando materiales. Para agregar un selector de fechas, necesitamos importar los módulos necesarios para mostrar el selector de fechas.

En app.module.ts, hemos importado el siguiente módulo como se muestra a continuación para datepicker.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MdDatepickerModule, MdInputModule, MdNativeDateModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      FormsModule,
      MdDatepickerModule,
      MdInputModule,
      MdNativeDateModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Aquí, hemos importado módulos como MdDatepickerModule, MdInputModule, y MdNativeDateModule.

Ahora el app.component.ts es como se muestra a continuación -

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   myData: Array<any>;
   constructor() {}
}

los app.component.html es como se muestra a continuación -

<md-input-container>
   <input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
   <button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>

<md-datepicker #picker></md-datepicker>

Así es como se muestra el selector de fechas en el navegador:

Angular CLI hace que sea fácil comenzar con cualquier proyecto Angular. Angular CLI viene con comandos que nos ayudan a crear y comenzar nuestro proyecto muy rápido. Veamos ahora los comandos disponibles para crear un proyecto, un componente y servicios, cambiar el puerto, etc.

Para trabajar con Angular CLI, necesitamos tenerlo instalado en nuestro sistema. Usemos el siguiente comando para lo mismo:

npm install -g @angular/cli

Para crear un nuevo proyecto, podemos ejecutar el siguiente comando en la línea de comandos y se creará el proyecto.

ng new PROJECT-NAME
cd PROJECT-NAME
ng serve //

ng serve // ​​se compilará y podrá ver el resultado de su proyecto en el navegador -

http://localhost:4200/

4200 es el puerto predeterminado que se utiliza cuando se crea un nuevo proyecto. Puede cambiar el puerto con el siguiente comando:

ng serve --host 0.0.0.0 --port 4201

La siguiente tabla enumera algunos comandos importantes necesarios al trabajar con proyectos de Angular 4.

Componente	ng g componente nuevo componente
Directiva	directiva ng g nueva directiva
Tubo	ng g pipe nueva tubería
Servicio	ng g servicio nuevo-servicio
Módulo	ng g módulo mi-módulo

Siempre que se crea un nuevo módulo, un componente o un servicio, la referencia del mismo se actualiza en el módulo padre. app.module.ts.

En este capítulo, discutiremos algunos ejemplos relacionados con Angular 4.

Para empezar, hemos creado un ejemplo que muestra un formulario de inicio de sesión con la entrada como username y password. Al ingresar los valores correctos, ingresará al interior y mostrará otro formulario en el que podrá ingresar los datos del cliente. Además, hemos creado cuatro componentes: encabezado, pie de página, inicio de sesión de usuario y página principal.

Los componentes se crean usando el siguiente comando:

encabezado del componente ng g

C:\ngexamples\aexamples>ng g component header
installing component
   create src\app\header\header.component.css
   create src\app\header\header.component.html
   create src\app\header\header.component.spec.ts
   create src\app\header\header.component.ts
   update src\app\app.module.ts

pie de página del componente ng g

C:\ngexamples\aexamples>ng g component footer
installing component
   create src\app\footer\footer.component.css
   create src\app\footer\footer.component.html
   create src\app\footer\footer.component.spec.ts
   create src\app\footer\footer.component.ts
   update src\app\app.module.ts

ng g componente userlogin

C:\ngexamples\aexamples>ng g component userlogin
installing component
   create src\app\userlogin\userlogin.component.css
   create src\app\userlogin\userlogin.component.html
   create src\app\userlogin\userlogin.component.spec.ts
   create src\app\userlogin\userlogin.component.ts
   update src\app\app.module.ts

página principal del componente ng g

C:\ngexamples\aexamples>ng g component mainpage
installing component
   create src\app\mainpage\mainpage.component.css
   create src\app\mainpage\mainpage.component.html
   create src\app\mainpage\mainpage.component.spec.ts
   create src\app\mainpage\mainpage.component.ts
   update src\app\app.module.ts

En el app.module.ts, el módulo principal tiene todos los componentes agregados cuando se crea. El archivo tiene el siguiente aspecto:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

import { RouterModule, Routes} froms '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MdTableModule} from '@angular/material';

import {HttpModule} from "@angular/http";
import {MdInputModule} from '@angular/material';
import { AppComponent } from './app.component';

import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { UserloginComponent } from './userlogin/userlogin.component';
import { MainpageComponent } from './mainpage/mainpage.component';

const appRoutes: Routes = [
   {
      path: '',
      component: UserloginComponent
   },
   {
      path: 'app-mainpage',
      component: MainpageComponent
   }
];

@NgModule({
   declarations: [
      AppComponent,
      HeaderComponent,
      FooterComponent,
      UserloginComponent,
      MainpageComponent
   ],
   
   imports: [
      BrowserModule,
      ReactiveFormsModule,
      RouterModule.forRoot(appRoutes),
      BrowserAnimationsModule,
      HttpModule,
      MdTableModule,
      MdInputModule
   ],
   
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Se agregan los componentes creados anteriormente:

import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { UserloginComponent } from './userlogin/userlogin.component';
import { MainpageComponent } from './mainpage/mainpage.component';

Los componentes también se agregan en las declaraciones:

declarations: [
   AppComponent,
   HeaderComponent,
   FooterComponent,
   UserloginComponent,
   MainpageComponent
],

En el padre app.component.html, hemos agregado la estructura principal del archivo que verá el usuario.

<div class="mainpage">
   <app-header></app-header>
   <router-outlet></router-outlet>
   <app-footer></app-footer>
</div>

Hemos creado un div y agregado <app-header></app-header>, <router-outlet></router-outlet> y <app-footer></app-footer>.

los <router-outlet></router-outlet>se utiliza para navegar de una página a otra. Aquí, las páginas tienen un formulario de inicio de sesión y una vez que se realiza correctamente, se redirigirá a la página principal, es decir, al formulario del cliente.

Para obtener el formulario de inicio de sesión primero y luego obtener mainpage.component.html, los cambios se realizan en app.module.ts como se muestra a continuación -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

import { RouterModule, Routes} from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MdTableModule} from '@angular/material';

import {HttpModule} from "@angular/http";
import {MdInputModule} from '@angular/material';
import { AppComponent } from './app.component';

import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { UserloginComponent } from './userlogin/userlogin.component';
import { MainpageComponent } from './mainpage/mainpage.component';

const appRoutes: Routes = [
   {
      path: '',
      component: UserloginComponent
   },
   {
      path: 'app-mainpage',
      component: MainpageComponent
   }
];

@NgModule({
   declarations: [
      AppComponent,
      HeaderComponent,
      FooterComponent,
      UserloginComponent,
      MainpageComponent
   ],
   
   imports: [
      BrowserModule,
      ReactiveFormsModule,
      RouterModule.forRoot(appRoutes),
      BrowserAnimationsModule,
      HttpModule,
      MdTableModule,
      MdInputModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Nosotros hemos importado RouterModule y Routes desde @anuglar/router. En las importaciones, RouterModules toma appRoutes como el parámetro que se define arriba como -

const appRoutes: Routes = [
   {
      path: '',
      component: UserloginComponent
   },
   {
      path: 'app-mainpage',
      component: MainpageComponent
   }
];

Las rutas toman la matriz de componentes y, de forma predeterminada, se llama al userloginComponent.

En userlogin.component.ts, hemos importado el enrutador y navegado a mainpage.component.html según la condición que se muestra a continuación:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
import { Router} from '@angular/router';

@Component({
   selector: 'app-userlogin',
   templateUrl: './userlogin.component.html',
   styleUrls: ['./userlogin.component.css']
})

export class UserloginComponent implements OnInit {
   formdata;
   constructor(private router: Router) { }
   ngOnInit() {
      this.formdata = new FormGroup({
         uname: new FormControl("", Validators.compose([
            Validators.required,
            Validators.minLength(6)
         ])),
         passwd: new FormControl("", this.passwordvalidation)
      });
   }
   
   passwordvalidation(formcontrol) {
      if (formcontrol.value.length < 5) {
         return {"passwd" : true};
      }
   }
   
   onClickSubmit(data) {
      console.log(data.uname);
      if (data.uname=="systemadmin" && data.passwd=="admin123") {
         alert("Login Successful");
         this.router.navigate(['app-mainpage'])
      } else {
         alert("Invalid Login");
         return false;
      }
   }
}

A continuación se muestra el archivo .ts para app.component.ts. Solo los detalles predeterminados están presentes en él.

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {title = 'app';}

Veamos ahora los detalles de cada uno de los archivos de componentes. Para empezar, primero tomaremos el componente de encabezado. Para el nuevo componente, se crean cuatro archivosheader.component.ts, header.component.html, header.component.css, and header.component.spec.ts.

header.component.ts

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

@Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.css']
})

export class HeaderComponent implements OnInit {
   constructor() { }
   ngOnInit() {}
}

header.component.html

<div>
   <hr />
</div>

No hemos agregado ningún css. Esto hace que el archivo header.component.css esté vacío. También elheader.compoent.spec.ts El archivo está vacío ya que los casos de prueba no se consideran aquí.

Para el encabezado, trazaremos una línea horizontal. Se puede agregar un logotipo o cualquier otro detalle para que el encabezado se vea más creativo.

Consideremos ahora la creación de un componente de pie de página.

Para el componente de pie de página, footer.component.ts, footer.component.html, footer.component.spec.ts and footer.component.css se crean archivos.

footer.component.ts

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

@Component({
   selector: 'app-footer',
   templateUrl: './footer.component.html',
   styleUrls: ['./footer.component.css']
})

export class FooterComponent implements OnInit {
   constructor() { }
   ngOnInit() { }
}

footer.component.html

<hr/>

Como no hemos agregado ningún CSS, el footer.component.cssel archivo está vacío. También elfooter.compoent.spec.ts El archivo está vacío ya que los casos de prueba no se consideran aquí.

Para el pie de página, simplemente dibujaremos una línea horizontal como se muestra en el archivo .html.

Veamos ahora cómo funciona el componente userlogin. Los siguientes archivos para el componente de inicio de sesión de usuario creado sonuserlogin.component.css, userlogin.component.html, userlogin.component.ts, y userlogin.component.spec.ts.

Los detalles de los archivos son los siguientes:

userlogin.component.html

<div class="form_container">
   <form [formGroup]="formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
      <header>Login</header>
      <label>Username <span>*</span></label>
      <input type="text" name="uname" formControlName="uname"/>
      
      <div class="help">At least 6 character</div>
      <label>Password <span>*</span></label>
      <input type="password" class="fortextbox" name="passwd" formControlName="passwd"/>
      
      <div class="help">Use upper and lowercase lettes as well</div>
      <button [disabled]="!formdata.valid" value="Login">Login</button>
   </form>
</div>

Aquí, hemos creado un formulario con dos controles de entrada. Username y Password. Este es un enfoque de formulario basado en modelos y los detalles del mismo se explican en el Capítulo 14 - Formularios.

Consideramos que el nombre de usuario y la contraseña son obligatorios, por lo que la validación del mismo se agrega en el ts. Al hacer clic en el botón enviar, el control se pasa alonClickSubmit, que se define en el archivo ts.

userlogin.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
import { Router} from '@angular/router';

@Component({
   selector: 'app-userlogin',
   templateUrl: './userlogin.component.html',
   styleUrls: ['./userlogin.component.css']
})

export class UserloginComponent implements OnInit {
   formdata;
   constructor(private router: Router) { }
   ngOnInit() {
      this.formdata = new FormGroup({
         uname: new FormControl("", Validators.compose([
            Validators.required,
            Validators.minLength(6)
         ])),
         passwd: new FormControl("", this.passwordvalidation)
      });
   }
   passwordvalidation(formcontrol) {
      if (formcontrol.value.length < 5) {
         return {"passwd" : true};
      }
   }
   onClickSubmit(data) {
      console.log(data.uname);
      if (data.uname == "systemadmin" && data.passwd == "admin123") {
         alert("Login Successful");
         this.router.navigate(['app-mainpage'])
      }
   }
}

Para el control de formulario y la validación, los módulos se importan como se muestra a continuación

import { FormGroup, FormControl, Validators} from '@angular/forms';

Necesitamos un enrutador para navegar a un componente diferente cuando el usuario y la contraseña son correctos. Para esto, el enrutador se importa como se muestra a continuación:

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

En ngOnInit, se realiza la validación del formulario. Necesitamos que el nombre de usuario tenga más de seis caracteres y el campo es obligatorio. La misma condición se aplica también a la contraseña.

Al hacer clic en enviar, podemos verificar si el nombre de usuario es systemadmin y la contraseña es admin123. Si es así, aparece un cuadro de diálogo que muestraLogin Successful y el enrutador navega a la página principal de la aplicación, que es el selector del componente de la página principal.

Hay css agregado para el formulario en userlogin.component.css archivo -

.form_container{
   margin : 0 auto;
   width:600px;
}

form {
   background: white;
   width: 500px;
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.7);
   font-family: lato;
   position: relative;
   color: #333;
   border-radius: 10px;
}

form header {
   background: #FF3838;
   padding: 30px 20px;
   color: white;
   font-size: 1.2em;
   font-weight: 600;
   border-radius: 10px 10px 0 0;
}

form label {
   margin-left: 20px;
   display: inline-block;
   margin-top: 30px;
   margin-bottom: 5px;
   position: relative;
}

form label span {
   color: #FF3838;
   font-size: 2em;
   position: absolute;
   left: 2.3em;
   top: -10px;
}
form input {
   display: block;
   width: 50%;
   margin-left: 20px;
   padding: 5px 20px;
   font-size: 1em;
   border-radius: 3px;
   outline: none;
   border: 1px solid #ccc;
}

form .help {
   margin-left: 20px;
   font-size: 0.8em;
   color: #777;
}

form button {
   position: relative;
   margin-top: 30px;
   margin-bottom: 30px;
   left: 50%;
   transform: translate(-50%, 0);
   font-family: inherit;
   color: white;
   background: #FF3838;
   outline: none;
   border: none;
   padding: 5px 15px;
   font-size: 1.3em;
   font-weight: 400;
   border-radius: 3px;
   box-shadow: 0px 0px 10px rgba(51, 51, 51, 0.4);
   cursor: pointer;
   transition: all 0.15s ease-in-out;
}
form button:hover {
   background: #ff5252;
}

los userlogin.component.spec.ts El archivo está vacío ya que no hay casos de prueba en este momento.

Analicemos ahora cómo funciona el componente de la página principal. Los archivos creados para el componente de la página principal sonmainpage.component.ts, mainpage.component.html, mainpage.component.css, y mainpage.component.spect.ts.

mainpage.component.ts

import { Component, OnInit, ViewChild} from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';

import {Http, Response, Headers, RequestOptions } from "@angular/http";
import 'rxjs/add/operator/map';

@Component({
   selector: 'app-mainpage',
   templateUrl: './mainpage.component.html',
   styleUrls: ['./mainpage.component.css']
})

export class MainpageComponent implements OnInit {
   formdata;
   cutomerdata;
   constructor(private http: Http) { }
   stateCtrl: FormControl;
   ngOnInit() {
      this.formdata = new FormGroup({
         fname: new FormControl("", Validators.compose([
            Validators.required,
            Validators.minLength(3)
         ])),
         lname: new FormControl("", Validators.compose([
            Validators.required,
            Validators.minLength(3)
         ])),
         address:new FormControl(""),
         phoneno:new FormControl("")
      });
   }
   onClickSubmit(data) {
      document.getElementById("custtable").style.display="";
      this.cutomerdata = [];
      for (var prop in data) {
         this.cutomerdata.push(data[prop]);
      }
      console.log(this.cutomerdata);
   }
}

Hemos creado un formulario de cliente con nombre, apellido, dirección y número de teléfono. La validación de la misma se realiza con elngOnInitfunción. Al hacer clic en enviar, el control llega a la funciónonClickSubmit. Aquí, la tabla que se usa para mostrar los detalles ingresados ​​se hace visible.

Los datos del cliente se convierten de json a una matriz para que podamos usar lo mismo en ngFor en la tabla, lo que se hace en el archivo .html como se muestra a continuación.

mainpage.component.html

<div class="form_container">
   <form [formGroup]="formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
      <header>Customer Details</header>
      <label>FirstName <span>*</span></label>
      <input type="text" name="fname" formControlName="fname"/>
      <label>LastName <span>*</span></label>
      
      <input type="text" name="lname" formControlName="lname"/>
      <label>Address <span></span></label>
      <input type="text" name="address" formControlName="address"/>
      <label>Phone No <span></span></label>
      <input type="text" name="phoneno" formControlName="phoneno"/>
      <button [disabled]="!formdata.valid" value="Submit">Submit</button>
   </form>
</div>
<br/>

<div id="custtable" style="display:none;margin:0 auto;">
   <table>
      <tr>
         <td>FirstName</td>
         <td>LastName</td>
         <td>Address</td>
         <td>Phone No</td>
      </tr>
      <tr>
         <td *ngFor="let data of cutomerdata">
            <h5>{{data}}</h5>
         </td>
      </tr>
   </table>
</div>

Aquí, el primer div tiene los detalles del cliente y el segundo div tiene la tabla, que mostrará los detalles ingresados. La visualización del inicio de sesión del usuario y los detalles del cliente es como se muestra a continuación. Esta es la página con formulario de inicio de sesión y encabezado y pie de página.

Una vez que ingrese los detalles, la pantalla es como se muestra a continuación

Al hacer clic en enviar, aparece un cuadro de diálogo que muestra Inicio de sesión exitoso.

Si los detalles no son válidos, aparece un cuadro de diálogo que muestra Inicio de sesión no válido como se muestra a continuación:

Si el inicio de sesión es exitoso, pasará al siguiente formulario de Detalles del cliente como se muestra a continuación:

Una vez que se ingresan y envían los detalles, aparece un cuadro de diálogo que muestra que los Detalles del cliente se agregan como se muestra en la captura de pantalla a continuación:

Cuando hacemos clic en Aceptar en la captura de pantalla anterior, los detalles aparecerán como se muestra en la captura de pantalla a continuación: