Le Post Infeeny

Les articles des consultants et experts Infeeny

[SPC14] SPC408 // SharePoint 2013 Apps with AngularJS

Mail de Christian

Jeudi 06/03/2014 à 9h00

Speaker
Jeremy Thake – VP of Global Product Innovation @ AvePoint Inc. // MVP @jthake C’est sa dernière session en tant que MVP puisqu’il va rejoindre l’équipe produit chez Microsoft ! Awesome !

Résumé
Bonne session, un peu trop courte qui donne une bonne introduction à AngularJS qui est très large pour tenir dans une seule session.
Ce framework est assez complet mais complété par jQuery et d’autres modules, on peut faire une App SharePoint 2013 avec des frameworks très puissants. Tout cela en gardant une propreté dans le code javascript qui sans ça peut devenir assez compliqué à lire.
Le framework propose des très bon mécanismes de data binding, assez propres etc.

// Agenda
Pourquoi AngularJS
Intro à AngularJS
Getting started in SharePoint
CompleteMe App
Tips and Tricks

// Pourquoi AngularJS
Même si AngularJS est fait par Google, il dit que le modèle de développement a changé en utilisant les différents outils mis à dispo par tous pour accomplir son but.
Il existe depuis janvier 2010, il y a plus de 600 contributeurs, 2500 requêtes produits. C’est un outil très supporté.
Les développeurs Google sont vraiment impliqués dans le développement d’AngularJS Beaucoup de ressources existent sur le marché, sur le net. Des ebooks, des sites comme PluralSight, Codeacademy, Il présente un slide de Google, comme quoi GWT était très populaire mais a baissé, à contrario de AngularJS qui les a déplacé tous. Backbone, embuer ou knockoutjs sont eux restés assez bas.
Il aime beaucoup
Google feedback un outil avait pris 6 mois pour 3 dév et 17000 lignes de code. Avec AngularJS, cela a pris 3 semaines, 1500 lignes de code.
Plusieurs avantages
-Gestion du DOM et de l’AJAX,
-Une structure très bien définie
-Tout existe pour faire une App qui fait du CRUD -Testable, il y a un framework de test dans AngularJS qui facilite les Model View .. AngularJS utilise un modèle view … whatever. Pour ne pas appeler ça MVC, MVVM qui ne correspondait pas bien.

// Intro à AngularJS
La base.
Utilisation dans <html> l’attribut ng-app.
Data-binding : on peut changer le modèle, la donnée, la vue est automatiquement changée avec un système de watch/espion.
Cela se fait grâce à {{ phones.length }}.
On utilise angular.module(‘myApp’, []); qui permet de créer son module.
Le scope permet de gérer la vue, l’objet $scope passé en paramètre de la création du control.
Il y créé un tableau de téléphones, avec des caractéristiques.
Et ensuite dans l’HTML, il utilise ng-controller pour déclarer le nom de sa fonction qui crée le control.

// DEMO : AngularJS 101
Il utilise un jsfiddle. Il y montre une sorte de repeater fait en Angular grâce à l’attribut ng-repeat.
Il fait un ng-repeat= »contact in contacts » où contacts est une collection.

// Directives
Il a déjà montré le ng-controller.
<edit-in-place value= »contact.name » />
app.directive(‘editInPlace’, function() { … Cela permet de créer des attributs custom. Ici edit-in-place.
Il y montre que cela lui permet d’avoir des composants comme un mode edit, qui rafraichit un autre ng-repeat qui lui affiche la valeur.
La valeur saisie dans son mode édit est mis à jour en live par AngularJS plus bas où il l’affiche.

// Factory et provider
Factory : Il permet de créer comme en .NET plusieurs instances.
Provider : autre permet de réaliser des couches d’abstractions Les deux en fait. Mais il passe vite, il n’a pas le temps de détailler et nous invite à fouiller.

// Broadcaster
Il y a un concept qui permet de broadcaster une valeur qui propage la valeur tout seul vers différentes vues dans la page.

// Animations
Il montre qu’il y a également dans AngularJS un système d’animation plutôt puissant.

// Avec SharePoint 2013
Il ne peut pas utiliser le body, il met ng-app= »myApp » sur une simple div ce qui lui permet d’avoir plusieurs apps dans une page SharePoint

// DEMO : CompleteMe App
Il montre une App tâche qui lui permettra d’avoir une liste de tâches où il peut faire des rappels particuliers comme « jamais », dans « 1 an » etc.
Son app est créée en SharePoint hosted sur Visual Studio.
Dans les scripts, il y a un dossier controller et un services.
Sur sa page Default.aspx, il ajoute la déclaration des javascript jquery, angulaire, bootstrap.
Il charge les js de son modèle AngularJS.
Il charge les js SharePoint pour par exemple les people picker. Il a fait un post pour expliquer comment mettre ça en place (il y a des problèmes quand on ajoute plusieurs people pickers normalement).
Il montre la plomberie de son App, avec notamment la requête qui gère l’échec de requête. Et sur le succès de requête, il ajoute les items dans le tableau de son controller.
Dans le cas d’un minifiy, il faut déclarer le controller d’une certaine façon car AJAX Minifier remplace les noms des variables ce qui casse la déclaration Angular. C’est donc contournable.
Le template est normalement mis dans un attribut template HTMLdans le javascript. Pour contourner ça, il faut passer par la directive compile qui permet d’externaliser et charger un template HTML avec un templateLoader qui fait un HTTP get du template. Dans le retourne du compile, il y a un prelink à compléter. Il faut voir son post pour mieux comprendre avec les exemples.
Pour la sauvegarde de ses items, il utilise du JSOM avec les promises jQuery.
Il nous invite à regarder la bibliothèque breeze qui permet de créer des entités. Il ne détaille pas ici car ce n’est pas le sujet.

// Tips and tricks
Il n’est pas bon en CSS haha. Il conseille d’utiliser UI Bootstrap, un module qui peut être à AngularJS qui permet assez facilement de faire des layouts, des formulaires avec validations, datepicker, du responsive etc.
Pour les people picker, aller voir son billet sur son post pour faire ça car l’exemple MSDN n’est pas top.
Utiliser moment.js qui permet de gérer facilement les temps en js.
Visual Studio Online, permet d’avoir un TFS, et il conseille de l’utiliser pour faire du code review simple avec un compte live id.

Christian

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :