19 agosto 2017

Aplicaciones de una página (Single Page App) con Angular CLI Version 4

  3 comentarios

En estos días, me he encontrado con un problema bastante grande, y es que para las personas que estábamos acostumbrados a utilizar el framework AngularJS o como muchos le llaman, Angular 1, nos hemos topado con la gran sorpresa de que las versiones siguientes de dicho framework no se parecen ni en la mas mínima parte a la sintaxis de programación a este, y es que según nos enteramos, esto se debe a que a no es un continuación del framework sino, un framework totalmente nuevo, diferente y con un nuevo concepto en la programación. En particular, yo he sido uno de los que me ha costado migrar ya que estaba acostumbrado a la versión inicial, y por falta de tiempo, no me había adentrado a la programación de componentes, sin embargo, nuestro papel como desarrolladores es estar siempre a la vanguardia con lo nuevo.

Uno de los usos mas comunes que solía dar al framework AngularJS es la maravillosa manera en la que maneja los datos con su doble binding y en particular, las aplicaciones de una sola pagina con el Routing de AngularJS que en realidad, me vi obligado a investigar de que manera trabaja este concepto en el nuevo framework de Angular, sin embargo, me tope con que no se encuentra en la Red mucha información en español con respecto a estos temas en particular, y no me quedo de otra que leer blogs y documentación en ingles, que ahora me gustaría compartirles, sin mas que añadir, empecemos con el tutorial.

Antes de comenzar, es necesario saber que este tutorial cuenta con los siguientes recursos de software:
  1. Sistema Operativo Ubuntu 14.04 LTS
  2. Editor de Texto Visual Studio Code
  3. Instalación previa de NodeJS y NPM (Gestor de paquetes de Node)
  4. Navegador Chromium Version 60.0.3112.78
  5. Angular CLI Version 4
Nos basaremos especialmente en la terminal de Ubuntu o en su defecto, Linux para los comandos, en realidad, los recursos previamente mencionados no es que sean indispensable, excepto NodeJS y NPM, y la instalación de Angular CLI, con respecto a los recursos de hardware es irrelevante.

Primeramente, abrimos la terminar de Ubuntu con las teclas Ctrl + Alt + T o en el caso de Windows, Inicio + R para abrir Ejecutar y escribes "cmd" sin comillas, y teclea en ENTER, para genear un nuevo proyecto, introduce las siguientes lineas una por una


ng new miApp

cd miApp

ng serve


Los comandos anteriores crea una aplicación de Angular, una vez creadas accedemos a su carpeta y después, servimos la aplicación para poder visualizar los cambios que vamos haciendo en el navegador con el LiveReload interno que trae Angular CLI la cual por defecto, se ejecutará en http://localhost:4200, a no ser que hayas configurado una dirección personalizada. Por favor, minimiza esta terminal, ya que mientras el servidor este corriendo, no podrás escribir mas comandos acá.

Luego de esto, vamos a Visual Studio Code o nuestro editor de código favorito, y abrimos un nuevo folder (Ctrl + KO) y buscamos nuestra carpeta creada, entramos y buscamos la carpeta "src", donde se ubica la fuente de nuestro proyecto, y hacemos click en el botón "Abrir", y te cargará la siguiente estructura o esquema de carpetas.


Creando los componentes que funcionaran como páginas

Abrimos un nuevo terminal, e introducimos el siguiente comando

cd ~/miApp

Una vez ubicados en la carpeta de nuestro proyecto, introducimos el siguiente comando para generar los componentes

ng generate component inicio

ng generate component contacto

ng generate component informacion

ng generate component paginaNoEncontrada

Lo que nos generará 4 componentes que fungirán como las paginas a las que accederemos mediante el Routing, una vez hecho esto, vamos a Visual Studio Code y en la barra lateral, y editamos el siguiente archivo

app/app.module.ts


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

import { AppComponent } from './app.component';
import { InicioComponent } from './inicio/inicio.component';
import { ContactoComponent } from './contacto/contacto.component';
import { InformacionComponent } from './informacion/informacion.component';
import { PaginaNoEncontradaComponent } from './pagina-no-encontrada/pagina-no-encontrada.component';

const appRoutes: Routes = [
  { path: 'inicio', component: InicioComponent },
  { path: 'contacto', component: ContactoComponent },
  { path: 'informacion', component: InformacionComponent },
  { path: '',
    redirectTo: '/inicio',
    pathMatch: 'full'
  },
  { path: '**', component: PaginaNoEncontradaComponent }
];


@NgModule({
  declarations: [
    AppComponent,
    InicioComponent,
    ContactoComponent,
    InformacionComponent,
    PaginaNoEncontradaComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } 
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ahora nos dirigimos al siguiente archivo, borramos todo lo que tenga, e introducimos el siguiente código

app/app.component.html


<a [routerLink]="['/inicio']">Inicio</a>
<a [routerLink]="['/contacto']">Contacto</a>
<a [routerLink]="['/informacion']">Informacion</a>

<router-outlet></router-outlet>

Si ingresamos a http://localhost:4200 veremos que ya tenemos un Routing totalmente funcional.

Página de Inicio
Página de Contacto
Página de Información

Por supuesto, la parte de estilo y diseño es de tu parte, puedes jugar con frameworks CSS como Bootstrap o Materialize para hacer un diseño mas llamativo, la edición de la información en cada página debes hacerla en su respectivo archivo HTML y CSS en la carpeta correspondiente al componente. He aquí un ejemplo usando los componentes del framework CSS Bootstrap


Routing con Parámetros


No podia pasar por alto este punto, ya que es una de las herramientas mas comunes que utilizamos los desarrolladores, sobre todo si trabajamos con API Rest o Web Services en general, el Routing con parámetros es de suma importancia para filtrar información esencial que dependa de una variable en particular. Para comenzar, abrimos nuevamente la terminar e introducimos el siguiente comando ubicados en la carpeta de nuestro proyecto

ng generate component detalles

Una vez generado el componente, nos dirigimos a nuestro archivo app.module.ts y e insertamos el siguiente código.

app/app.module.ts



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

import { AppComponent } from './app.component';
import { InicioComponent } from './inicio/inicio.component';
import { ContactoComponent } from './contacto/contacto.component';
import { InformacionComponent } from './informacion/informacion.component';
import { PaginaNoEncontradaComponent } from './pagina-no-encontrada/pagina-no-encontrada.component';
import { DetallesComponent } from './detalles/detalles.component';

const appRoutes: Routes = [
  { path: 'inicio', component: InicioComponent },
  { path: 'contacto', component: ContactoComponent },
  { path: 'informacion', component: InformacionComponent },
  { path: 'inicio/:id', component: DetallesComponent },
  { path: '',
    redirectTo: '/inicio',
    pathMatch: 'full'
  },
  { path: '**', component: PaginaNoEncontradaComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    InicioComponent,
    ContactoComponent,
    InformacionComponent,
    PaginaNoEncontradaComponent,
    DetallesComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } 
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


Ahora, nos dirigimos al siguiente archivo, y editamos

app/detalles/detalles.component.ts


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

@Component({
  selector: 'app-detalles',
  templateUrl: './detalles.component.html',
  styleUrls: ['./detalles.component.css']
})
export class DetallesComponent implements OnInit {
  id: String;
  constructor(private route: ActivatedRoute) {
    this.route.params.subscribe( 
    params => this.id = params.id
   );
   }

  ngOnInit() {
  }

}


Nos dirigimos al siguiente archivo, borramos todo lo que tenga e insertamos el siguiente código

app/detalles/detalles.component.html

<p>
  El id es {{id}}
</p>

Ahora, si intentas ingresar a una dirección al estilo de http://localhost:4200/inicio/3, nos daría el siguiente resultado


Si tu deseo es enlazar a cierta pagina con cualquier Id (por ejemplo, una Id correspondiente a la entrada de un post, en el caso de los blogs), debes hacerlo con insertando el link donde corresponda de la siguiente manera

<a [routerLink]="['/inicio', 3]"/>Entrada con Id 3</a>;

Con esto, ya estas completamente preparado para seguir haciendo tus aplicaciones de una sola página y desempeñarte tan bien como la hacias con AngularJS.

Enlaces para compartir en tu blog o pagina web.




Widget por Friki Bloggeo


3 comentarios :

  1. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  2. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  3. Do you want to fix Binance exchange account recovery issues? What are the possible steps to fix it? If you don’t have resolutions related to the error, you can dial Binance customer care number 1-888-927-4399 and speak to the team of elite gems who is always at your Binance Support Number service. The professionals are always there to resolve your issues and have all the latest methodologies and techniques that can fix all sort of issues whether trivial or hard in the least possible time.

    ResponderEliminar