On avait vu dans cet article (AngularJS, URL Html5Mode & IIS) comment utiliser le mécanisme AngularJS d'URL HTML 5 lorsque l'application était hébergée dans IIS, notamment en définissant des règles de réécriture d'URL (via le module IIS Url Rewrite).

Avec ASPNET Core, on n'est plus nécessairement hébergé sur un IIS, donc le mécanisme précédent ne fonctionne plus systématiquement. On va voir dans cet article comment implémenter un comportement similaire en ASPNET Core.

Si vous utilisez ASPNET Core sur un IIS, l'ancien mécanisme fonctionne toujours.

(lire plus…)

Lorsque l'on encapsule un appel HTTP dans une méthode, on souhaite souvent pouvoir s'assurer que cette requête n'est effectuée qu'une seule fois simultanément, même si l'on appelle plusieurs fois la méthode. Je vous partage un Helper AngularJS que j'ai créé pour ce cas.

(lire plus…)

Lorsque la méthode postLink d'une directive AngularJS se déclenche, les directives situées dans l'arborescence descendante du DOM ont déjà été exécutées, c’est-à-dire que les bindings et les transclusions ont déjà eu lieu.

Il est cependant possible que lors de l'exécution du postLink, le DOM ne soit pas tout à fait prêt, le browser n'ayant pas eu le temps de faire un repaint.

(lire plus…)

ngCloak est une directive AngularJS qui masque un élément jusqu'à ce que l'application soit correctement chargée. Elle permet par exemple d'éviter que la syntaxe {{ }} des bindings AngularJS ne s'afficher brièvement au chargement de la page.

Dans certains cas, notamment sur des devices mobiles d'entrée de gamme (Android surtout), ngCloak ne suffit pas et un effet de clignotement peut apparaître. On va voir dans ce post pourquoi et comment y remédier.

(lire plus…)

Une petite news rapide pour vous indiquer la sortie du livre AngularJS : Développez aujourd'hui les applications web de demain, que j'ai co-écrit avec Pierre-Alexandre G., aux éditions ENI.

Livre AngularJS

Si vous êtes intéressé, vous pouvez trouver plus d'informations, lire un extrait ou commander le livre directement sur le site d'ENI.

Si vous avez des questions, n'hésitez pas.

Anguler bien !

(lire plus…)

Depuis AngularJS 1.3, il n'est plus nécessaire de passer par les $formatters et $parsers du contrôleur de la directive ngModel pour créer des validateurs. Ce contrôleur expose maintenant une propriété $validators qui simplifie grandement l'écriture des règles de validations.

On va voir dans cet article comment cela se passe.

(lire plus…)

On trouve pas mal d'exemples sur Internet illustrant le fonctionnement des directives AngularJS, mais on en trouve assez peu illustrant leur phase compile.

On va voir dans cet article un exemple de directive utilisant cette phase pour optimiser le chargement d'une page en retardant l'interprétation de certains éléments.

(lire plus…)

Bien qu'assez difficiles à appréhender, les directives d'AngularJS offrent d'énormes possibilités. Elles permettent de créer des composants réutilisables, de manipuler le DOM en respectant la séparation des responsabilités définies par l'architecture d'AngularJS ou d'enrichir la syntaxe HTML comme le fait ngIf, ngShow ou bien ngRepeat.

Dans cet article, nous allons voir comment AngularJS exécute les directives.

(lire plus…)

Par défaut, AngularJS n'embarque pas de mécanisme permettant de gérer les autorisations, à savoir sécuriser les pages sur lesquelles l'utilisateur doit être authentifié pour pouvoir y accéder.

Dans ce post, on va voir comment mettre en place ce mécanisme, de manière générique, dans une application AngularJS. La gestion des autorisations va se faire sur trois niveaux :

  • Rediriger l'utilisateur sur la page de login dès qu'on reçoit un code 401 (Unauthorized) lors d'une requête Ajax
  • Rediriger l'utilisateur sur la page de login s'il essaye d'accéder à une page protégée sans être connecté
  • Cacher certains éléments si l'utilisateur n'est pas connecté

(lire plus…)

AngularJS utilise la notion de route pour associer à une URL un contrôleur et une vue. L'idée est de créer une abstraction entre l'URL et la vue HTML ciblée.

Voici un exemple de déclaration de routes AngularJS :

module.config(function ($routeProvider) {
    $routeProvider
        .when("/",
        {
            controller: "mainController",
            templateUrl: "app/views/main.html",
        })
        .when("/page1",
        {
            controller: "page1Controller",
            templateUrl: "app/views/page1.html",
        })
        .when("/page1/:param",
        {
            controller: "page1Controller",
            templateUrl: "app/views/page1.html",
        })
        .when("/page2",
        {
            controller: "page2Controller",
            templateUrl: "app/views/page2.html",
        })
        .otherwise({ redirectTo: "/" });
});

Au niveau des vues, pour créer des liens vers des routes, il faut renseigner l'URL de la route :

<a href="/page1">Lien vers la page 1</a>

Il n'existe pas d'abstraction entre l'URL de la route et la route elle-même. C'est à dire que si on crée des liens vers une route et que l'on change ensuite l'URL de la route, il va falloir parcourir toutes les vues pour s'assurer que les URL ciblant cette route ont bien été mises à jour. Cela implique un travail fastidieux et surtout un risque d'erreurs assez important.

L'objectif de ce post est d'expliquer comment mettre en place un mécanisme permettant de créer cette abstraction (à la manière de Url.Action en ASP.NET MVC).

(lire plus…)

Anciens Posts »