[SharePoint 2013] Introducción a AngularJS en desarrollo de Apps Parte II

En el anterior post vimos cómo podemos consultar una lista de SharePoint dentro de un proyecto de AngularJS, nos iniciamos en la programación de este peculiar FrameWork y ahora vamos a completar el anterior ejemplo, añadiéndole más funcionalidad como son operaciones CRUD sobre la lista de SharePoint y alguna que otra «magia» que nos proporciona AngularJS que nos hace la vida un poco más sencilla.
Para empezar con el desarrollo, en primer lugar, vamos a poder añadir más elementos a nuestra lista de SharePoint. Por un lado nos vamos a la página HTML y le añadimos un Texto y un botón. Algo como el siguiente código HTML:

  <input type="text" ng-model="todoText"  size="30" placeholder="Añadir nuevo proposito " />
  <input class="btn-primary" type="submit" value="Añadir" ng-click="addTask($event)" />

Aunque parezca un poco simple este HTML tiene su «gracia». Si miramos la primera linea, hemos marcado este campo como un campo de nuestro modelo llamada «todoText» de forma que posteriormente podemos acceder a su valor de una forma muy simple. La segunda linea indicamos que al hacer un click le asignamos nuestro evento addTask.

Una vez tenemos modificada la estructura del HTML ahora vamos a añadir la funcionalidad dentro de las clases JavaScript. Si recordáis, teníamos implementado un servicio SharePoint que es el encargado de comunicar SharePoint con Angular. En un desarrollo profesional y no en una «Demo», lo que buscaremos es tener este servicio lo más completo y abstracto posible para poder reutilizarlo en todos los proyectos.
En este ejemplo añadiremos a nuestro servicio una función AddTask de la siguiente forma:

this.addTask = function ($scope, listTitle) {
        var deferred = $q.defer();

        if ($scope.todoText === "") {
            deferred.reject('Por favor añade un titulo a tu propósito');
            return deferred.promise;
        }
        var web = context.get_web();
        context.load(web);
        var list = web.get_lists().getByTitle(listTitle);

        // create the ListItemInformational object
        var listItemInfo = new SP.ListItemCreationInformation();
        var listItem = list.addItem(listItemInfo);
        listItem.set_item('Title', $scope.todoText);
        listItem.update();

        context.executeQueryAsync(
            Function.createDelegate(this, function () {
                $scope.$apply(function () {
                    var id = listItem.get_id();
                    $scope.todos.push({ text: $scope.todoText, done: false, id: id });
                    $scope.todoText = '';
                });
            }),
            Function.createDelegate(this, function () {
                $scope.$apply(function (sender, args) {
                    deferred.reject('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
                });
            })
        );

        return deferred.promise;
    };

Esta parte no tiene mucho misterio ya que es algo que, más o menos, es nuestro día a día no? 🙂 Ahora bien, lo siguiente que tenemos que hacer es invocar desde nuestro App Angular estos datos del servicio

 $scope.addTask = function ($event) {
        $event.preventDefault();
        var promise = $SharePointJSOMService.addTask($scope, 'Propositos');
        promise.then(function (message) {
            alert(message);
        }, function (reason) {
            alert(reason);
        });
    };

Si esto lo ejecutamos, observamos que además de insertar el elemento en la lista automáticamente este valor esta reflejado en nuestra vista de buenos propósitos y además este refresco es casi trasparente para el usuario a una velocidad muy rápida (esto es una de las grandes ventajas de AngularJS).
El resultado seria el siguiente:

Particularidades de Angular

Para completar el ejemplo, vamos a ver la potencia que tiene Angular. Para ello, a nuestro desarrollo le vamos a añadir la posibilidad de poder filtrar sobre los datos que estamos visualizando. Angular incluye una función Filter que con tan solamente ponerlo en los lugares en lo que lo queremos hacer los filtros nos aplica los filtros de forma automática y lo mejor de todo es que no tenemos que introducir ninguna linea de JavaScript.
Vamos a ver como podemos hacerlo en nuestro desarrollo.

Para empezar añadimos en input de la misma forma que hemos realizado anteriormente:

     <input type="text" ng-model="search" class="search-query" placeholder="Search"><br />

Ahora bien, en el HTML donde indicamos que nos muestre los datos, vamos a añadir una sentencia Filter y que filtre por el valor que tiene el campo del modelo llamado «search». Para ello introducimos el siguiente código:

     <li ng-repeat="todo in todos | filter:search">

Es decir, en la propia vista es la que se encarga de mostrar o no mostrar un dato con lo cual el renderizado es muy rápido. Esto es una de las ventajas pero otra de las grandes ventajas es que no tenemos que comunicarnos con el servidor, con lo cual evitamos realizar llamadas de información que ya tenemos y por otro lado, en el lado del cliente tampoco modificamos ningún valor del DOM.
El resultado sería algo semejante a esto:

El ejemplo completo lo podéis descargar desde el siguiente link

Conclusión

Una de las grandes preguntas/debates que se plantean es que si tenemos muchos frameworks JavaScript, ¿cuál es el mejor? o ¿cuál me aconsejas bajo tu punto de visa?. Yo creo que no hay ninguna contestación posible, ya que existen muchas variables. La primera, qué tipo de proyecto vas a realizar, qué requisitos vas a necesitar y con qué otras librerias lo quieres incluir. Angular es un framework muy completo pero como ventaja o inconveniente no puedes decir: «voy a usar Angular pero solo para los Templates»; es como «me voy a comprar un Ferrari pero solo voy a ir a 30 Km/hora». La conveniencia de un framework u otro, al final es que agilice tu desarrollo, si no lo hace, mejor no utilizarlo.