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

Siguiendo con la serie de post en las que introducíamos diversos frameworks JavaScript en nuestros desarrollos de SharePoint (Kendo UI, Ext JS o Mustache) en este post voy a dar una introducción a Angular, quizas el framework que más está dando que hablar últimamente por aportar unas particularidades que le hacen realmente potente y «especial».

¿Que es AngularJS?

AngularJS es un framework JavaScript desarrollado por Google que se utiliza para desarrollar aplicaciones en el lado Cliente. Utiliza un patrón MVC un tanto particular donde el Modelo son los datos almacenados en las propiedades de los objetos, la Vista es el propio DOM y el controlador son las clases JavaScript.

Otra de las caracteristicas que le hacen más particular es que extiende el comportamiento del HTML con la finalidad de hacer más rápida la aplicación (dado que el acceso al DOM es uno de los puntos débiles en los frameworks JavaScript). Esto tiene como objetivo poder servir las vistas dinámicas eficientemente (esta caracteristica hace que AngularJS sea un framework muy interesante para el desarrollo de Apps móviles).

La forma en la que esta implementado permite que en AngularJS sea posible hacer pruebas unitarias.

Manos a la obra

Vamos a empezar con un ejemplo muy simple para ver la potencia de Angular, en este ejemplo vamos a mostrar los objetivos que nos hemos marcado para este 2014.
Para comenzar vamos a crearnos un proyecto de Visual Studio de tipo SharePoint App.

En la pagina default.aspx lo primero de todo es añadir la referencia Angular en nuestro proyecto, para ello, vamos a la siguiente dirección y nos descargamos la librería en el siguiente link. Una vez descargada, la añadimos en nuestro desarrollo de la siguiente forma:

<script type="text/javascript" src="../Scripts/angular.min.js"></script>

Introduciremos el siguiente código en el HTML:

</pre>
<div>
<h2>Propositos 2014</h2>
<div><span>{{remaining()}} of {{todos.length}} remaining</span>
<ul class="unstyled">
 <li><input type="checkbox" />
 <span class="done-{{todo.done}}">{{todo.text}}</span></li>
</ul>
</div>
</div>
<pre>

Como hemos comentado anteriormente, tiene una serie de particularidades y extiende el HTML con aspectos que parecen de programación:
ng-app: indica que en ese div se ejecuta la aplicación de Angular
ng-controller: indica el controlador que se le va a aplicar
ng-model: indica el modelo que se va a utilizar
Otras particularidades son que para referenciar a cualquier metodo, variable, propiedad se utilizan los {{ }} (os recuerda a algo? Algo muy similar a lo que vimos con Mustache)

El siguiente paso que tenemos que hacer es implementar la clase de JavaScript que se corresponde con este modelo, para ello, utilizaremos el siguiente codigo:

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

function TodoCtrl($scope) {
    $scope.todos = [
      { text: 'Implantar tecnicas ALM', done: false },
      { text: 'Introducir mejoras en los desarrollos', done: false },
      { text: 'Mejorar el conocimiento de JavaScript', done: false },
      { text: 'Introducir mejoras en la parte UX-Developer', done: false },
      { text: 'ir al MVP-Summit', done: false }
    ];

         $scope.remaining = function() {
            var count = 0;
            angular.forEach($scope.todos, function(todo) {
                count += todo.done ? 0 : 1;
            });
            return count;
        };
    }

Este código no tiene mucho misterio, por un lado, tenemos puestas unas variables donde están los datos a mostrar (ahora veremos cómo consumir estos datos de una lista de SharePoint), y nos definimos una función para indicar el número de propósitos que hemos cumplido o no.

Comunicarnos con SharePoint
En primer lugar, creamos una definición de la Lista, para ello utilizamos el asistente de Visual Studio. Dentro de la lista le añadiremos unos datos por defecto. Para añadir los datos basta con editar el archivo «elements.xml» que se encuentra ubicado dentro de la Instancia de la lista y añadir los datos.

Una vez tenemos los lista definida, ahora tenemos que realizar las modificaciones dentro de la clase para que se obtengan los datos de la lista de SharePoint. En primer lugar nos crearemos un «service» de AngularJS donde realizaremos la llamada a SharePoint haciendo uso del Modelo de Objetos de Cliente de la siguiente forma:

myApp.service('$SharePointJSOMService', function ($q, $http) {
    // Read from SharePoint List for Tasks
    this.getTasks = function ($scope, listTitle) {
        var deferred = $q.defer();
        var web = context.get_web();
        context.load(web);

        var list = web.get_lists().getByTitle(listTitle);
        var camlQuery = SP.CamlQuery.createAllItemsQuery();
        this.listItems = list.getItems(camlQuery);
        context.load(this.listItems);

        context.executeQueryAsync(
                                     Function.createDelegate(this, function () {
                                         var ListEnumerator = this.listItems.getEnumerator();
                                         while (ListEnumerator.moveNext()) {
                                             var currentItem = ListEnumerator.get_current();
                                             console.info(currentItem.get_item('Title') + currentItem.get_item('ID'));

                                             $scope.todos.push({
                                                 text: currentItem.get_item('Title'),
                                                 done: false,
                                                 id: currentItem.get_item('ID')
                                             });
                                             //$scope is not updating so force with this command
                                             $scope.$apply();

                                         }
                                     }),
                                    Function.createDelegate(this, function (sender, args) {
                                         deferred.reject('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
                                     })

         );
        return deferred.promise;
    };
});

Definido el servicio, lo que tenemos que realizar ahora, es modificar el controlador para que haga uso de este servicio y podamos obtener los datos de la lista de SharePoint.

function TodoCtrl($scope, $SharePointJSOMService) {
    $scope.todos = [  ];
    var promise = $SharePointJSOMService.getTasks($scope, 'Propositos');
    promise.then(
        function (message) {
            alert(message);
        },
        function (reason) {
            alert(reason);
        }
    );
        $scope.remaining = function() {
            var count = 0;
            angular.forEach($scope.todos, function(todo) {
                count += todo.done ? 0 : 1;
            });
            return count;
        };
}

Por último, ejecutamos la APP y visualizaremos el siguiente resultado:

Conclusión

Hemos visto la facilidad y la claridad que tiene AngularJS para integrarlo en nuestros desarrollos. Una de sus principales ventajas es que se crea un proyecto muy bien estructurado, escalable y reutilizable. AngularJS es muy completo ya que por una parte, tiene funcionalidad de DataBinding, Routing y lo podemos utilizar para mostrar Templates.

Angular tiene muchos conceptos que aplicar (filter, directives, ..) este post solamente es una pincelada de todo lo que podemos hacer utilizando este framework. En el siguiente post completaremos este proyecto añadiendo funcionalidades como Añadir, Eliminar elemento y Paginar los mismos. También como poder utilizar la API Rest en lugar de CSOM.

Este ejemplo lo podeís descargar desde el siguiente enlace.

Referencias
http://angularjs.org/
¿Qué es AngularJS?
AngularJS by Brad Green and Shyam Seshadr