Home

L'application JCertif Web 2013 est construit avec le framework AngularJS.

Organisation des sources

• app code de l'application
  • directives composants réutilisables dans les différentes pages
  • filters filtres
  • images les images
  • pages les différentes pages de l'application
  • styles les feuilles de styles de l'application
  • app.js définitions des routes de l'application et des variables JS à utiliser dans toute l'application
  • index.html point d'entrée de l'application
• bower.json configuration des dépendances de l'application. On y trouve le détail des librairies utilisées par l'application
• package.json définition du projet et des dépendances vers des librairies utilisées par Grunt (outil de build
• Gruntfile.js fichier de définition des tâches Grunt

Construction des pages par composant

AngularJS, à travers la notion de directives, nous permet de créer des composants réutilisables et une page est en fait un assemblage de composants.

Exemple de directives (inputText)

Prenons l'exemple du composant inputText (https://github.com/JCERTIFLab/jcertif-web-2013/tree/master/app/directives/form/inputText). Ce composant permet de fournir un libellé + un champ de saisie représentant une information du formulaire. Pour que ce composant puisse être réutilisable, il nous faut pouvoir paramétré le contenu du libellé et le nom de la propriété à utiliser dans le formulaire.

Une directive sera, dans notre cas, souvent composée de 2 parties :

La définition de la directives

app.directive('jcInputText', function () {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'directives/form/inputText/inputText.html',
        scope: {
            property: '=',
            label: '=',
            model: '='

        },
        link: function (scope, element, attributes) {

        }
    };
});

app.directive('jcInputText', function () { nous permet de donner un nom à notre composant. Ici jcInputText.

restrict: 'E' indique que nous composant s'utilise comme un élément HTML. Par exemple : <jc-input-text></jc-input-text>

replace: true indique que le composant remplace la partie du DOM où elle est posée.

templateUrl: 'directives/form/inputText/inputText.html' indique la vue utilisée par le composant

scope : ... indique les entrées/sorties du composant. Ici le composant est paramétrable, en bidirectionnel ('='), avec les informations suivantes :

 * property : la propriété du champ du formulaire
 * label : le libellé du texte à côté du champ
 * model : le lien avec un objet javascript

link ... permet d'ajouter de la logique dans le composant

La définition d'un template pour la vue

https://github.com/JCERTIFLab/jcertif-web-2013/blob/master/app/directives/form/inputText/inputText.html

Entre {{ }}, nous plaçons les variables des directives.

Exemple d'utilisation

<jc-input-text label="..." property="..." model="..."></jc-input-text>

https://github.com/JCERTIFLab/jcertif-web-2013/blob/master/app/pages/register/register.html

Gestion des libellés

Un peu partout dans l'application on peut trouver du code de la forme {{"header.conference" | i18n }}. Le | i18n permet d'appliquer à un code de libellé un filtre défini ici : https://github.com/JCERTIFLab/jcertif-web-2013/blob/master/app/filters/i18n/i18n.js.

Les fichiers https://github.com/JCERTIFLab/jcertif-web-2013/blob/master/app/filters/i18n/en_EN.js et https://github.com/JCERTIFLab/jcertif-web-2013/blob/master/app/filters/i18n/fr_FR.js font la correspondance entre un code de libellé et le libellé à afficher.

Ce mécanisme a pour objectif de fournir la possible de gérer plusieurs langues dans l'application.