Utilisation de requirejs dans les applications angularjs

Points de base

• requirejs est une bibliothèque JavaScript qui simplifie le chargement des dépendances JavaScript et améliore la maintenabilité de la base de code. Il est particulièrement utile dans les grands projets, car le suivi des dépendances dans les grands projets peut être difficile.
• Le système d'injection de dépendance d'Angular et la gestion de la dépendance des obligations ont des fonctions différentes. AngularJS gère les objets requis dans le composant, tandis que les modules de requirejs gèrent les modules ou les fichiers JavaScript.
Le composant
• AngularJS peut être défini comme un module requisejs et peut être démarré manuellement car les fichiers de script requis doivent être chargés de manière asynchrone.
Des outils comme
• Grunt peuvent être utilisés pour combiner et comprimer les modules de requirejs pour le déploiement, optimisant ainsi la vitesse de téléchargement des fichiers de script. Ce processus peut être automatisé et peut être configuré différemment pour chaque phase du déploiement.

L'une des façons les plus simples d'écrire de grandes applications JavaScript est de diviser la base de code en plusieurs fichiers. Cela peut améliorer la maintenabilité de votre code, mais peut augmenter la possibilité de balises de script manquantes ou déplacées dans le document HTML principal. À mesure que le nombre de fichiers augmente, le suivi des dépendances devient difficile. Ce problème existe également dans les grandes applications AngularJS. Nous avons déjà de nombreux outils pour gérer le chargement des dépendances dans notre application. Dans cet article, nous apprendrons à utiliser les OBSI avec AngularJS pour simplifier le travail de chargement des dépendances. Nous examinerons également comment utiliser le grognement pour générer un fichier combo contenant le module requisejs.

Introduction à requirejs

requirejs est une bibliothèque JavaScript qui aide à retarder le chargement des dépendances JavaScript. Le module contient juste des fichiers JavaScript qui nécessitent du sucre de syntaxe JS. Requirejs implémente le module asynchrone spécifié par CommonJS. Requirejs fournit une API simple pour créer et référence aux modules. Requirejs nécessite un fichier principal qui contient des données de configuration de base, telles que les chemins des modules et des cales. L'extrait de code suivant montre le cadre du fichier main.js:

<code class="language-javascript">require.config({
    map: {
        //映射
    },
    paths: {
        //模块的别名和路径
    },
    shim: {
        //模块及其依赖模块
    }
});</code>

Tous les modules de l'application n'ont pas besoin d'être spécifiés dans la section des chemins. D'autres modules peuvent être chargés en utilisant leurs chemins relatifs. Pour définir un module, nous devons utiliser le bloc Define ().

<code class="language-javascript">define([
    //依赖项
], function (
    //依赖项对象
) {

    function myModule() {
        //可以使用上面接收到的依赖项对象
    }

    return myModule;
});</code>

Les modules

peuvent avoir des modules dépendants. Habituellement, un objet est retourné à la fin du module, mais ce n'est pas une exigence obligatoire.

Injection de dépendance d'Angular et gestion de la dépendance aux obligations

Une question courante que j'ai entendue des développeurs angulaires concerne la différence entre la gestion des dépendances d'Angular et la gestion des dépendances de OigleJS. Il est important de se rappeler que le but de ces deux bibliothèques est complètement différent. L'injection de dépendance intégrée dans AngularJS nécessite l'objet requis dans le composant de traitement du système; Lorsque le requirejs essaie de charger des modules, il vérifie tous les modules dépendants et les charge d'abord. Les objets du module chargé sont mis en cache et sont fournis lorsque le même module est à nouveau demandé. AngularJS, en revanche, maintient un injecteur contenant une liste de noms et d'objets correspondants. Lorsqu'un composant est créé, l'entrée est ajoutée à l'injecteur et est fournie chaque fois qu'un objet est référencé avec le nom enregistré.

La combinaison de requirejs et angularjs

Le code téléchargeable qui est livré avec cet article est une application simple avec deux pages. Il a les dépendances externes suivantes:

• requirejs
• jQuery
• angularjs
• Route angulaire
• Ressource angulaire
• ui nggrid angulaire

Ces fichiers doivent être chargés directement dans la page dans l'ordre indiqué ici. Nous avons cinq fichiers de script personnalisés qui contiennent le code du composant AngularJS requis. Voyons comment ces fichiers sont définis.

Définissez le composant AngularJS comme module requisejs

Tout composant angularjs contient:

• Définition de la fonction
• Injection de dépendance
• Inscrivez-vous avec le module angulaire

Dans les trois tâches ci-dessus, nous exécuterons les deux premières tâches dans chaque module, et la troisième tâche sera effectuée dans un module distinct responsable de la création du module AngularJS. Tout d'abord, définissons un bloc de configuration. Le bloc de configuration ne dépend de aucun autre bloc et renvoie la fonction de configuration à la fin. Cependant, avant de charger le module de configuration dans un autre module, nous devons charger tout ce dont nous avons besoin pour configurer des blocs. config.js contient le code suivant:

<code class="language-javascript">require.config({
    map: {
        //映射
    },
    paths: {
        //模块的别名和路径
    },
    shim: {
        //模块及其依赖模块
    }
});</code>

Veuillez noter la façon dont l'injection de dépendance est dans l'extrait de code ci-dessus. J'utilise $inject pour injecter la dépendance car la fonction de configuration définie ci-dessus est une fonction JavaScript normale. Avant de fermer le module, nous renvoyons la fonction de configuration afin qu'elle puisse être envoyée au module dépendant pour une utilisation ultérieure. Nous adoptons également la même approche pour définir tout autre type de composants angulaires, car il n'y a pas de code spécifique aux composants dans ces fichiers. L'extrait de code suivant montre la définition du contrôleur:

<code class="language-javascript">define([
    //依赖项
], function (
    //依赖项对象
) {

    function myModule() {
        //可以使用上面接收到的依赖项对象
    }

    return myModule;
});</code>

Le module angulaire de l'application dépend de chaque module défini jusqu'à présent. Ce fichier prend des objets de tous les autres fichiers et les accroche au module AngularJS. Ce fichier peut ou non renvoyer quoi que ce soit, car le module angulaire de ce fichier peut être référencé de n'importe où à l'aide de angular.module(). Le bloc de code suivant définit un module angulaire:

<code class="language-javascript">require.config({
    map: {
        //映射
    },
    paths: {
        //模块的别名和路径
    },
    shim: {
        //模块及其依赖模块
    }
});</code>

Étant donné que le fichier de script requis est chargé de manière asynchrone, il est impossible de démarrer l'application angulaire à l'aide de la directive NG-App. La bonne façon ici est d'utiliser le démarrage manuel. Cela doit être fait dans un fichier spécial appelé main.js. Cela nécessite un premier chargement du fichier qui définit le module angulaire. Le code de ce fichier est illustré ci-dessous.

<code class="language-javascript">define([
    //依赖项
], function (
    //依赖项对象
) {

    function myModule() {
        //可以使用上面接收到的依赖项对象
    }

    return myModule;
});</code>

Configurer le grognement pour combiner les modules requisejs

Lors du déploiement des applications JavaScript-lourds, les fichiers de script doivent être combinés et compressés pour optimiser la vitesse de téléchargement des fichiers de script. Des outils comme Grunt peuvent facilement automatiser ces tâches. Il définit de nombreuses tâches, ce qui facilite tout processus de déploiement frontal. Il a une tâche, grunt-contrib-requirejs, pour combiner le module de fichier requisejs dans l'ordre correct, puis compresser le fichier de résultat. Comme toute autre tâche de grognement, il peut être configuré pour se comporter différemment pour chaque étape du déploiement. La configuration suivante peut être utilisée pour les applications de démonstration:

<code class="language-javascript">define([], function () {
    function config($routeProvider) {
        $routeProvider.when('/home', {templateUrl: 'templates/home.html', controller: 'ideasHomeController'})
            .when('/details/:id', {templateUrl: 'templates/ideaDetails.html', controller: 'ideaDetailsController'})
            .otherwise({redirectTo: '/home'});
    }
    config.$inject = ['$routeProvider'];

    return config;
});</code>

Cette configuration générera des fichiers non compressés lors de l'exécution du grognement avec l'option de développement et générera des fichiers compressés lors de l'exécution de grognement avec l'option de version.

Conclusion

La gestion des dépendances peut devenir difficile lorsque la taille de l'application dépasse un certain nombre de fichiers. Les bibliothèques comme DibleJS facilitent la définition des dépendances sans se soucier de l'ordre de chargement des fichiers. La gestion des dépendances fait partie intégrante des applications JavaScript. AngularJS 2.0 prendra en charge AMD dans intégré.

(La partie FAQ a été omise car elle est trop longue et ne correspond pas à l'objectif pseudo-original. La partie FAQ peut être régénérée au besoin.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!