¿Cómo crear un CRUD en AngularJS con ng-store y ng-grid?


En esta entrada te enseñaré a crear un CRUD en AngularJS con ng-store: un pequeño módulo que he creado para facilitar la realización de este tipo de operaciones.

Para visualizar los datos utilizaré en este ejemplo el módulo ng-grid.

Hacer un CRUD con AngularJS no es complicado, $http facilita mucho las cosas a la hora de hacer peticiones al servidor para gestionar información, y si usamos ng-grid para visualizar los datos, garantizamos, entre otras cosas, buen funcionamiento ante datos masivos.

ng-store.

El componente ng-store es básicamente un módulo que facilita y estadariza el trabajo a la hora de hacer peticiones al servidor. A continuación te muestro los atributos y funciones disponibles:

Atributos:

  • model: Objeto json que muestra el formato de los datos que se envían o solicitan al servidor.
  • records: Arreglo de Objetos json que contiene los datos que se están manejando en la vista.
  • dataServer: Arreglo de Objetos json que contiene los datos que se envían desde el servidor como resultado de una petición.
  • autoload: Variable de tipo boolean que indica si se quieren cargar los datos en la vista automáticamente.
  • type: Variable de tipo String que indica el tipo de petición que se desea hacer al servidor.
  • api: Variable de tipo String que contiene la dirección del servidor que atenderá las peticiones.

Funciones:

Nombre Descripción Parámetros
transformRequest Transforma los datos que se desean enviar al servidor en formato de objeto json. data
connect Realiza peticiones GET, DELETE, PUT, POST al servidor. action: tipo de acción: READ, DESTROY, UPDATE, INSERT

param: datos que se desean enviar al servidor success: función operación realizada con éxito error: función de error

load Carga los datos en la vista a través del método connect()
sync Sincroniza los datos y operaciones que se encuentran en la vista con los del servidor.

Utilizando ng-store en la app

Lo primero que debemos hacer es, por supuesto, establecer los componentes que usaremos como dependencias de la app.

var app = angular.module('testApp', ['ngGrid', 'ng-store']);

Luego debemos configurar ng-store con la dirección del servidor, entre otras cosas. Para ello se utiliza el objeto config de la aplicación.

var routeSegmentProvider = null;
var type = "REST";

app.config(function(storeProvider) {
    routeSegmentProvider = storeProvider;
    storeProvider.setModel({nombre:'String', edad:'integer'});

    var apiUrl = 'http://localhost:5900/app_dev.php/api/rhumanos/persona';

    storeProvider.setApi(apiUrl);
    storeProvider.setType(type);
});

app.run(["$http", function($http) {
    routeSegmentProvider.$get($http).load();
}]);

Creando el CRUD.

Con la configuración anterior realizada, nuestra aplicación “conoce” un nuevo servicio llamado store, el cual podemos inyectar en cualquier otra parte.

Cargar datos

Comencemos mostrando información:

app.controller('ngStoreController', ['$scope', 'store', function($scope, store){

    $scope.cargar = function(){

      var datos = store.getDataServer();

      var temp  = new Array();
      for(var i = 0; i < datos.length; i++){
        temp[i] = {
            name:datos[i]['nombre'],
            age:datos[i]['edad'],
            id:datos[i]['id']};
        }
        $scope.myData = temp;
    };

    $scope.mySelections = [];

    $scope.gridOptions = {
        data: 'myData',
        columnDefs: [
            {
                field:'name',
                displayName:'Name'
            },
            {
                field:'age',
                displayName:'Age'
            }
        ],
        selectedItems : $scope.mySelections,
        multiSelect : true
    }

En el snippet anterior lo primero que se hace es crear un controlador inyectando los servicios $scope y store.

Luego se llama al método getDataServer() de este último servicio, el cual devuelve los datos obtenidos del servidor (ya inicializados cuando hicimos las configuraciones del ng-store y llamamos al método load()).

Finalmente llenamos myData para mostrar los datos con ng-grid.

Insertar

Para insertar vamos primeramente a tomar los datos que el usuario ha introducido en la vista y luego usaremos el método connect() del ng-store, le pasamos por parámetro el action “INSERT” y los datos que enviaremos al servidor: objeto.

$scope.insertar = function(){
  var nombre = $scope.nombre;
  var edad = $scope.edad;
  var objeto = { nombre : nombre, edad : edad };

  store.connect("INSERT", objeto);
  store.load();
};

Modificar

En este caso, primero debemos capturar los datos que han sido seleccionados en el Grid, y mostrarlos en el formulario para que el usuario haga sus modificaciones y luego hacer la petición al servidor enviando los nuevos datos, para esto último usaremos nuevamente el método connect().

$scope.modificar = function(){
  var objetoArray = $scope.mySelections;
  $scope.id = objetoArray[0]['id'];
  $scope.nombre1 = objetoArray[0]["name"];
  $scope.edad1 = objetoArray[0]["age"];
};

$scope.aceptar = function(){
  var objeto = {
    nombre : $scope.nombre1,
    edad1  : $scope.edad1,
    id     : $scope.id
  };

  store.connect("UPDATE", objeto);
};

Eliminar

Finalmente para eliminar tomaremos la selección del usuario en la vista, y llamamos al método connect() del ng-store pasando por parámetro el action: “DESTROY” y el id del elemento seleccionado.

$scope.eliminar = function(){
  var objetoArray = $scope.mySelections;
  for(var i =0; i < objetoArray.length; i++){
    store.connect("DESTROY", {id:objetoArray[i]["id"]});
    store.load();
  }
};
}]);

La vista

Creado el controlador con las operaciones del CRUD, solamente queda establecer el HTML que hará uso de dichas funciones:

<div data-ng-controller="ngStoreController">

    <label>Nombre: </label>
    <input ng-model="nombre" />

    <label>Edad: </label>
    <input ng-model="edad" />

    <button ng-click="cargar()">Cargar</button>
    <button ng-click="insertar()">Insertar</button>
    <button ng-click="eliminar()">Eliminar</button>
    <button ng-click="modificar()">Modificar</button>

    <!-- lugar donde se cargarán los datos del server -->
    <div class="gridStyle" ng-grid="gridOptions"></div>

    <div>
        <h3>Modificar</h3>

       <label>Nombre: </label>
       <input ng-model="nombre1"/>

       <label>Edad: </label>
       <input ng-model="edad1" value={edad1} />

      <!-- {{id}} -->
      <button ng-click="aceptar()">Aceptar</button>
    </div>
</div>

Observa cómo a la directiva ng-grid se le pasan las opciones contenidas en el objetogridOptions. Dicho objeto forma parte del scope por lo que se comporta como un modelo de datos accesible a dicho grid.

Concluyendo

ng-store es una solución cómoda para hacer peticiones remotas con AngularJS, es una prueba de concepto aún, ya que se piensa incluir otras funciones que serán útiles al programador para comunicarse con el servidor.

Si deseas utilizarlo en tus proyectos, solo debes modificar la variable apiUrl en correspondencia con tus necesidades y utilizar sus funciones. La idea es reutilizar código y ahorrar tiempo y esfuerzo en el desarrollo.

Espero te sirva.