Friki Bloggeo

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

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.

Publicado por Anthony Medina

Interfaz visual del servidor de imagenes

Desde hace rato que me surgía esta duda y es que los API Rest actualmente son la manera de trabajar la web, ya que nos ofrecen infinitas herramientas y recursos para un trabajo grupal y de optimizacion, pero, en vista de que los web services son archivos textuales que nos sirve el servidor en formato JSON o XML, parece un poco complicado subir una imagen a través de un API ya que una imagen no es un texto, o si? Si no has leído mis entradas anteriores te invito a leerlas para que te empapes mas de lo que hablare en esta.

• Crear un Web Service API Rest con PHP y MySQL
• Consumir un Web Services API Rest con AngularJS

Luego de dar lectura a las dos entradas anteriores, y entender en que consiste la creación y consumo de un web services, podemos proseguir. En este caso, vamos a crear un servicio completo de subida de imágenes al servidor usando esta metodología de trabajo y entendiendo ciertas características del mismo. Primero, entendiendo que si vamos a subir una imagen al servidor haciendo uso de un REST API, es necesario que la imagen sea un texto, sino, como envías una imagen en un objeto de este estilo, y se preguntaran, en serio se puede hacer esto? codificar una imagen a texto? Y la verdad es que si, se puede, y de esta herramienta tan preciada haremos uso hoy.

 Antes de comenzar, cabe destacar que al final del post dejare un demo y un link para descargar los archivos. Tenemos 4 archivos esenciales que se basan en la siguiente estructura, cabe acotar que no son los únicos archivos incluidos dentro del directorio puesto a que tengo incluida también ciertas librerías de diseño y dinamismo, entre ellas angularJS y Materialize para CSS, pero, en el siguiente esquema, solo nos centraremos en los archivos que modificaremos, el resto de los archivos podrán encontrarlos en el enlace de descarga del proyecto completo

• css
  • custom.css
• js
  • custom.js
• upload
• index.html
• server.php

css/custom.css

Este código no requiere mucha explicación, aunque haremos uso del framework de diseño Materialize, necesitaremos definir los siguientes estilos para ciertos elementos

body {
 background-color: #fefefe;
}

#imgCont {
 background:#eeeeee;
 width:auto;
 height:300px;
 padding: 5px 5px 5px 5px;
 border: 1px solid #cccccc;
 margin-top:10px;
 overflow: auto;
}

#imgCont img {
 width:90px;
 border:1px solid #bbbbbb;
 margin-right:5px;
 transition:all ease .2s;
 -webkit-transition:all ease .2s;
}
#imgCont img:hover {
 opacity:.8;
 transition:all ease .2s;
 -webkit-transition:all ease .2s;
}

css/custom.js

Aquí empieza la función, si bien no podemos enviar una imagen como tal a un servicio web, si lo podemos hacer si codificamos la imagen, en este caso, haremos uso de base64, la cual es una codificación que tiene la capacidad de convertir cualquier dato definido a nivel de bytes en un formato seguro de transportar por Internet como lo son los caracteres ASCII, es decir, no solo sirve para codificar imágenes, sirve para codificar cualquier archivo, música, vídeos, documentos, o simplemente, cualquier cadena de texto o carácter que se represente en bytes, es decir, puede transformar todo lo que sea recurso digital. En nuestro controlador de imagen en angular simplemente definimos la función encodeImageFileAsURL(); la cual se encarga de hacer todo el trabajo de codificación, y luego la cadena es enviada al web services a través de un objeto.

     var app = angular.module('crud',[]);


  // Controlador principal de nuestra pagina
  app.controller('mainCtrl', function($scope,$http) {
   $scope.dominio = "http://localhost/imagenes/";
         $scope.message = 'Ejemplo';
         $scope.subtitle = "Subir una imagen haciendo uso de API REST";

         $scope.imageJSON = {};

         $scope.enlaces = {};

         angular.element(document).ready(function () {
       $scope.get();  
      });

         // La funcion post() que hace la solicitud para publicar un nuevo elemento
      $scope.post = function() {
       $http.post("server.php", $scope.imageJSON)
        .then(function (response){
               console.log(response);
               Materialize.toast(response.data.statusMessage, 4000);


               if(response.data.data != null) {
                $scope.cargarImagen(response.data.data);
               } 

               $scope.get();
           }, 
           function(response) {
            // Aqui va el codigo en caso de error
           });
      }

      $scope.get = function() {
       $http.get("server.php")
        .then(function (response){
               console.log(response);
               $scope.imagenes = response.data.data;

               
           }, 
           function(response) {
            // Aqui va el codigo en caso de error
           });
      }

      $scope.cargarImagen = function(ruta) {


       var container = document.getElementById('imgTest');
       var newImage = document.getElementById('imagen');
          newImage.src = ruta;
          container.style.width = 'auto';
          container.style.height = 'auto'

          container.innerHTML = newImage.outerHTML;

         $scope.enlaces.link = $scope.dominio + ruta;
         $scope.enlaces.html = "<a href='"+ $scope.dominio + ruta +"'>"+$scope.dominio + ruta+"</a>";
         $scope.enlaces.foros = "[IMG]"+$scope.dominio + ruta+"[/IMG]"
      }


         $scope.encodeImageFileAsURL = function() {

       var filesSelected = document.getElementById("inputFileToLoad").files;

       if (filesSelected.length > 0) {
         var fileToLoad = filesSelected[0];

         var fileReader = new FileReader();

         fileReader.onload = function(fileLoadedEvent) {
          
           var srcData = fileLoadedEvent.target.result; // <--- data: base64
      $scope.imageJSON.encodedImage = srcData;


      $scope.post();
         }
         fileReader.readAsDataURL(fileToLoad);
       }
     }



     });

server.php

Este archivo trabaja del lado del servidor, en este caso apache, el archivo recibe el texto de la imagen codificada, y luego la pasa a la función save_base64_image();, la cual, no hace mas que analizar la cadena enviada y mediante el uso de herramientas de decodificacion y escritura en el servidor, crea la imagen en el directorio upload del mismo, almacenando asi una imagen con una extensión, y creando la URL especifica del mismo.

<?php 
 header("Access-Control-Allow-Origin: *");
 // Permite la ejecucion de los metodos
 header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE"); 
 
 switch ($_SERVER['REQUEST_METHOD']) {

  case 'GET':
   $directorio = opendir("./upload"); //ruta actual

   $contador = 0;

   while ($archivo = readdir($directorio)) //obtenemos un archivo y luego otro sucesivamente
   {
       if (!is_dir($archivo))//verificamos si es o no un directorio
       {
           $listado[$contador] = $archivo;
       }
     $contador++;
   }


   

   $listado = array_values($listado);

   if(count($listado)!=0) {
    print_json(200, true, $listado);
   } else {
    print_json(200, "No existen elementos", null);
   }

   break;
  case 'POST':
    $content = file_get_contents("php://input");

    $array = json_decode($content, true);


    $validar = validate($array['encodedImage']);

    if($validar==1) {
     $imagen = save_base64_image($array['encodedImage'], "upload/IMG_" . strtoupper(md5($array['encodedImage'])));

     if($imagen!=null) {
      print_json(200, "Completado", $imagen);

     } else {
      print_json(200, "Este archivo ya existe", null);
     }
    } else {
     print_json(200, "Extension invalida", null);
    }

    
    
   break;
  default:
   print_json(405, 'Metodo no permitido', null);
   break;
 }

 function validate($string_base64) {
  $array = explode(",", $string_base64);
  if( ($array[0] == "data:image/jpeg;base64") || ($array[0] == "data:image/gif;base64") || ($array[0] == "data:image/png;base64") ) {
   return 1;
  } else {
   return 0;
  }
 }
 



 function save_base64_image($base64_image_string, $output_file_without_extentnion, $path_with_end_slash="" ) {
     //usage:  if( substr( $img_src, 0, 5 ) === "data:" ) {  $filename=save_base64_image($base64_image_string, $output_file_without_extentnion, getcwd() . "/application/assets/pins/$user_id/"); }      
     //
     //data is like:    data:image/png;base64,asdfasdfasdf
     $splited = explode(',', substr( $base64_image_string , 5 ) , 2);
     $mime=$splited[0];
     $data=$splited[1];

     $mime_split_without_base64=explode(';', $mime,2);
     $mime_split=explode('/', $mime_split_without_base64[0],2);
     if(count($mime_split)==2)
     {
         $extension=$mime_split[1];
         if($extension=='jpeg')$extension='jpg';
         //if($extension=='javascript')$extension='js';
         //if($extension=='text')$extension='txt';
         $output_file_with_extentnion.=$output_file_without_extentnion.'.'.$extension;
     }

     if(file_exists($output_file_with_extentnion)) {
      return null;
     } else {
      file_put_contents( $path_with_end_slash . $output_file_with_extentnion, base64_decode($data) );
      return $output_file_with_extentnion;
     }
     
     
 }

 function print_json($status, $mensaje, $data) {
  header("HTTP/1.1 $status $mensaje");
  header("Content-Type: application/json; charset=UTF-8");

  $response['statusCode'] = $status;
  $response['statusMessage'] = $mensaje;
  $response['data'] = $data;

  echo json_encode($response, JSON_PRETTY_PRINT);
 }


?>

index.html

Esta sera la pagina principal, donde se encuentra toda la interaccion con el usuario, y donde se embeden todos los archivos necesarios para el funcionamiento.

<!DOCTYPE html>
<html lang="es" ng-app="crud" >
<head>
 <meta charset="UTF-8">
 <title>Rest API Visual Client</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!-- Incluimos el CND de Materialize CSS -->
 <link rel="stylesheet" href="css/materialize.min.css">
 <!-- Nuestro CSS personalizado -->
 <link rel="stylesheet" href="css/custom.css">
 <!-- Incluimos el CND de AngularJS -->
 <script src="js/angular.min.js"></script>
 <!-- Incluimos el CND de la libreria jQuery -->
 <script src="js/jquery-3.1.1.min.js"></script>
 
</head>
<body class="container" ng-controller="mainCtrl">

 <div class="row">
  <div class="col s12">
   <h1>{{message}}</h1>
   <p>{{subtitle}}</p> 
  </div>
 </div>

 <div class="row">
  <div class="col s12 m6 l6">
   <div class="row">
    <div class="col s12">
     <h6><small>Solo JPG, PNG, GIF</small></h6>
     <input id="inputFileToLoad" type="file"/>
     <button class="btn" ng-click="encodeImageFileAsURL()">Subir</button>
     
     
    </div>
    <div class="col s12">
     <div id="imgCont">
      <img ng-click="cargarImagen('upload/' + x)" ng-repeat="x in imagenes" src="upload/{{x}}" title="{{x}}" alt="{{x}}">
     </div>


    </div>

    <div class="input-field col s12">
        <input id="Link" type="text" placeholder="Enlace directo" class="validate" readonly ng-value="enlaces.link" ng-model="enlaces.link">
    </div>
    <div class="input-field col s12">
        <input id="HTML" type="text" class="validate" placeholder="Codigo HTML" readonly ng-value="enlaces.html" ng-model="enlaces.html">
    </div>
    <div class="input-field col s12">
        <input id="Forum" type="text" class="validate" placeholder="Codigo para foros" readonly ng-value="enlaces.foros" ng-model="enlaces.foros">
    </div>

   </div>
   
  </div>

  <div class="col s12 m6 l6">
   <div id="imgTest" class="center-align">

    <div class="preloader-wrapper small active">
        <div class="spinner-layer spinner-green-only">
          <div class="circle-clipper left">
            <div class="circle"></div>
          </div><div class="gap-patch">
            <div class="circle"></div>
          </div><div class="circle-clipper right">
            <div class="circle"></div>
          </div>
        </div>


    </div>
    <p>Esperando imagen</p>

    <img id="imagen" width="100%" alt="">

   </div>
  </div>
 </div>



 
     
 <!-- Nuestro codigo JavaScript personal -->
 <script src="js/custom.js"></script> 
 <!-- Incluimos el CND de Materialize JS -->
   <script src="js/materialize.min.js"></script>
</body>
</html>

Esto es todo, para entender mejor, les voy a dejar una demo y el link de descarga en Github para que lo tengan en su computador

  Demo Descargar

Publicado por Anthony Medina

Actualización 12 de Julio de 2018

En vista de que algunas personas me comentaron que no funcionaba este tutorial en Windows, quiero aclarar que cuando lo realice, lo trabaje en Ubuntu, distribución GNU/Linux, por lo tanto, no me di cuenta de los errores que pudiera generar en Windows, esto ha sido corregido, y el código ha sido actualizado para funcionar en cualquier plataforma.

Como lo prometido es deuda y quiero saldar esta deuda con ustedes, ayer mas o menos a esta misma hora hice publica una entrada sobre como Crear un Web Service API Rest con PHP y MySQL en el que prometí traer pronto como consumir dicho servicio y he aquí el tutorial, por eso, si no has visto el tutorial anterior, te recomiendo leerlo antes de empezar con este, créeme, tendrás una mejor comprensión del mismo y así vamos al ritmo.

Tal cual mencione el dia de ayer, los API Rest o Web Service no son mas que archivos en formato JSON (JavaScript Object Notation) o XML (eXtended Markup Language) que nos sirven información con respecto a una entidad en una base de datos haciendo uso de los métodos HTTP (GET, POST, PUT y DELETE), justo ayer, hacíamos las pruebas básicas del API Rest creado con la aplicación de tipo extensión de Chrome Insomnia, pero, eso es solo para efectos de pruebas, valga la redundancia.

Los Web Service API Rest son usualmente consumidos desde JavaScript en el cliente, usando librerías como jQuery o el framework AngularJS, por efectos de facilidad y ademas, de visibilidad, usare AngularJS en este tutorial específicamente.

Aspecto de nuestro API Rest Visual Client

Ahora, recordemos la estructura que llevabamos anteriormente, donde teniamos completado el Web Service

Esta no es mas que la estructura básica del back-end donde podemos encontrar con los archivos de Web Services y que explique en el tutorial anterior.

Habíamos quedado pendiente con los archivos de la carpeta public_html, donde podemos encontrar el archivo index.html que sera el archivo de nuestra pagina principal y su carpeta parent sera la carpeta del Front-end específicamente.

Todo lo que este en la carpeta public_html pertenece única y exclusivamente a código estructura y maquetado del cliente, mientras que lo que este fuera de ella, pertenece al código que corre en el servidor, por lo tanto, hoy nos enfocaremos específicamente en dicha carpeta ya que haremos un cliente visual para el consumo del Web Services que realizamos previamente.

Antes de comenzar, quiero acotar que voy a dejar todos los archivos del proyecto en un enlace para descargar al final, asi que no se preocupen, presten atencion al tutorial y luego, hacen lo que deseen con el codigo.

Se ubican dentro de la carpeta public_html y crean el siguiente directorio

Donde tenemos los archivos básicos de todo proyecto web.

Es importante destacar, que ahora que tenemos mas archivos, lógicamente vamos a tener mas URL's a donde ir, entonces, antes de empezar, en el archivo .htaccess que ya tenemos creado, vamos a agregar las siguientes lineas para controlar estas direcciones

# Acortar URL
RewriteRule ^([a-zA-Z]+)/([a-zA-Z0-9-.]+)$ public_html/$1/$2
RewriteRule ^([a-zA-Z]+)/([a-zA-Z]+)/([a-zA-Z0-9-.]+)$ public_html/$1/$2/$3

Esto con el fin de que los usuarios comunes no puedan ver el ingresar directamente a la carpeta public_html desde su navegador si no que mas bien, nos genere una URL mas estilizada y amigable.

Una vez realizado esto, empezamos a crear nuestro API Rest Visual Client (Como lo he llamado).

Para empezar, en el archivo index pegaramos el siguiente codigo

core/public_html/index.html

<!DOCTYPE html>
<html lang="es" ng-app="crud" >
<head>
 <meta charset="UTF-8">
 <title>Rest API Visual Client</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!-- Incluimos el CND de Materialize CSS -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
 <!-- Nuestro CSS personalizado -->
 <link rel="stylesheet" href="css/custom.css">
 <!-- Incluimos el CND de AngularJS -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
 <!-- Incluimos el CND de Angular Route -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
 <!-- Incluimos el CND de la libreria jQuery -->
 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 
</head>
<body ng-controller="mainCtrl">

    <nav>
      <div class="nav-wrapper blue">
        <a href="#!/" class="brand-logo">Friki Bloggeo</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
         <li><a href="#!/">Home</a></li>
          <li><a href="#!/usuario">Usuario</a></li>
          
        </ul>
      </div>
    </nav>
          
 <div class="container">
  <!-- ng-view renderiza nuestras views y las muestra en el index -->
  <div ng-view></div>
 </div>
     
 <!-- Nuestro codigo JavaScript personal -->
 <script src="js/custom.js"></script> 
 <!-- Incluimos el CND de Materialize JS -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
</body>
</html>

Al igual que el tutorial anterior, no hare mucho enfasis en explicar los codigos ya que los mismos estan documentados. Continuamos.

Bien, hasta ahora tenemos solo nuestra pagina básica donde llamaremos las vistas o templates. Entonces, para continuar vamos a agregar los siguientes códigos a nuestros templates

core/public_html/templates/home.html

<div class="row">
 <div class="col s6">
  <h1>{{message}}</h1>
  <p>{{subtitle}}</p>
 </div>
</div>

core/public_html/templates/usuario.html

<div class="row">
  <div class="col s6">
   <h1>{{message}}</h1>
   <p>{{subtitle}}</p>
  </div>
 </div>

 <div class="row">   
      <div class="col s4">
    <form>
     <div class="row">
      <div class="input-field col s12">
              <input required id="Usuario" type="text" class="validate" ng-value="nuevo.Usuario" ng-model="nuevo.Usuario">
              <label for="Usuario">Usuario</label>
            </div>
     </div>

     <div class="row">
      <div class="input-field col s12">
              <input required id="Clave" type="password" class="validate" ng-value="nuevo.Clave" ng-model="nuevo.Clave">
              <label for="Clave">Clave</label>
            </div>
     </div>

     <div class="row">
      <div class="input-field col s12">
              <input required id="Estatus" type="text" class="validate" ng-value="nuevo.Status" ng-model="nuevo.Status">
              <label for="Estatus">Estatus</label>
            </div>
     </div>

     <div class="row">
      <div class="col-s4" ng-if="nuevo.Id == null">
       <button class="btn waves-effect blue" ng-click="post()">Submit</button>
      </div>

      <div class="col-s4" ng-if="nuevo.Id != null">
       <button class="btn waves-effect blue" ng-click="put(nuevo.Id)">Submit</button>
      </div>
     
     </div>
       </form>


      </div>
      <div class="col s8">
      <input type="text" ng-model="search" placeholder="Buscar">
    


       <table class="highlight responsive-table">
        <thead>
         <tr>
          <th>ID</th>
          <th>Usuario</th>
          <th>Clave</th>
          <th>Estatus</th>
          <th></th>
          <th></th>
         </tr>
        </thead>

        <tbody ng-if="lista.length != null">
         <tr ng-click="get(x.Id)" ng-repeat="x in lista | filter : search">
          <td>{{x.Id}}</td>
          <td>{{x.Usuario}}</td>
          <td>{{x.Clave}}</td>
          <td>{{x.Status}}</td>
          <td><button class="btn btn-small waves-effect red" ng-click="delete(x.Id)">eliminar</button></td>
         </tr>
        </tbody>

        <tbody ng-if="lista.length == null">
         <tr>
          <td colspan="4">No hay datos dispobibles</td>
         </tr>
        </tbody>


       </table>
      </div>
     </div>

Bien, nos restan tan solo dos archivos, el custom.css y custom.js los cuales contienen codigo personalizado, cada uno en su respectivo lenguaje, pero basicamente, custom.css es tu estilo personal asi que no hare ningun codigo para ello, continuamos con el siguiente archivo.

core/public_html/js/custom.js

  var app = angular.module('crud',['ngRoute']);

  // Configuracion de las rutas y sus respectivas plantillas
  app.config(function($routeProvider) {
    $routeProvider
              .when('/', {
                  templateUrl : 'templates/home.html',
                  controller  : 'mainCtrl'
              })
              .when('/usuario', {
                  templateUrl : 'templates/usuario.html',
                  controller  : 'usuario'
              })

            
      });

  // Controlador principal de nuestra pagina
  app.controller('mainCtrl', function($scope) {
         $scope.message = 'Friki Bloggeo';
         $scope.subtitle = "Ejemplo de consumo de un API Rest con AngularJS";
     });


  // Controlador de la entidad Usuario donde se incluiran cada una de sus funciones
  app.controller('usuario', function($scope,$http) {

   $scope.message = 'Friki Bloggeo';
         $scope.subtitle = "Gestion de Usuario";

   // Al cargar la pagina, ejecutamos la funcion get() para rellenar la tabla
      angular.element(document).ready(function () {
       $scope.get("");
       
      });

      // La funcion get() que hace la solicitud para obtener los datos
      $scope.get = function(id){
       // Si la Id esta en blanco, entonces la solicitud es general
       if(id=="") {
        $http.get("api/usuario").then(function (response) {
            $scope.lista = response.data.data;
            Materialize.toast(response.data.statusMessage, 4000);
            
        }, function(response) {
         // Aqui va el codigo en caso de error
        });
    // Si la Id no esta en blanco, la solicitud se hace a un elemento especifico
       } else {
        $http.get("api/usuario/" + id).then(function (response) {
            $scope.nuevo = response.data.data[0];
            Materialize.toast(response.data.statusMessage, 4000);
        }, function(response) {
         // Aqui va el codigo en caso de error
        });
       }
      }

      // La funcion post() que hace la solicitud para publicar un nuevo elemento
      $scope.post = function() {
       $http.post("api/usuario", $scope.nuevo)
        .then(function (response){
               Materialize.toast(response.data.statusMessage, 4000);
               $scope.nuevo = null;
               $scope.get("");
           }, 
           function(response) {
            // Aqui va el codigo en caso de error
           });
      }

      // La funcion put() que hace la solicitud para modificar un elemento especifico
      $scope.put = function(id) {
   
       $http.put("api/usuario/" + id, $scope.nuevo)
        .then(
         function (response){
               Materialize.toast(response.data.statusMessage, 4000);
               $scope.nuevo = null;
               $scope.get("");
           }, 
           function(response) {
            // Aqui va el codigo en caso de error
           });

      }

      // La funcion delete() que hace la solicitud para eliminar un elemeto esepecifico
      $scope.delete = function(id) {
       $http.delete("api/usuario/" + id)
       .then(
           function (response){
             console.log(response);
             Materialize.toast(response.data.statusMessage, 4000);
             $scope.nuevo = null;
             $scope.get("");
           }, 
           function (response){
             // Aqui va el codigo en caso de error
           }
        );
      }

  });

Con esto, ya tenemos listo nuestro cliente visual, y ya podremos empezar a crear cuantas templates o views deseemos para consumir cada tabla especifica. Ademas, dejo el archivo del proyecto (con archivos script locales) para su uso.


Demo Descargar - 1.1 MB

Publicado por Anthony Medina