recherche
Maisoninterface Webjs tutorielUtilisation de requirejs dans les applications angularjs

Using RequireJS in AngularJS Applications

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:

require.config({
    map: {
        //映射
    },
    paths: {
        //模块的别名和路径
    },
    shim: {
        //模块及其依赖模块
    }
});

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 ().

define([
    //依赖项
], function (
    //依赖项对象
) {

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

    return myModule;
});
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:

require.config({
    map: {
        //映射
    },
    paths: {
        //模块的别名和路径
    },
    shim: {
        //模块及其依赖模块
    }
});

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:

define([
    //依赖项
], function (
    //依赖项对象
) {

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

    return myModule;
});

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:

require.config({
    map: {
        //映射
    },
    paths: {
        //模块的别名和路径
    },
    shim: {
        //模块及其依赖模块
    }
});

É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.

define([
    //依赖项
], function (
    //依赖项对象
) {

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

    return myModule;
});

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:

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;
});

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!

Déclaration
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Types de données JavaScript: Y a-t-il une différence entre le navigateur et les nodejs?Types de données JavaScript: Y a-t-il une différence entre le navigateur et les nodejs?May 14, 2025 am 12:15 AM

Les types de données de base JavaScript sont cohérents dans les navigateurs et Node.js, mais sont gérés différemment des types supplémentaires. 1) L'objet global est la fenêtre du navigateur et global dans Node.js. 2) Objet tampon unique de Node.js, utilisé pour traiter les données binaires. 3) Il existe également des différences dans les performances et le traitement du temps, et le code doit être ajusté en fonction de l'environnement.

Commentaires JavaScript: un guide pour utiliser // et / * * /Commentaires JavaScript: un guide pour utiliser // et / * * /May 13, 2025 pm 03:49 PM

JavascriptUsestwotypesofComments: unique (//) et multi-ligne (//). 1) use // forquicknotesorsings-lineexplanations.2) use // forlongErexPlanationsorcommentingoutblocksofcode.commentsShouldExplatethe'why ', notthewat', et bplacedabovovereLantCodeForCaReric

Python vs JavaScript: une analyse comparative pour les développeursPython vs JavaScript: une analyse comparative pour les développeursMay 09, 2025 am 12:22 AM

La principale différence entre Python et JavaScript est le système de type et les scénarios d'application. 1. Python utilise des types dynamiques, adaptés à l'informatique scientifique et à l'analyse des données. 2. JavaScript adopte des types faibles et est largement utilisé pour le développement frontal et complet. Les deux ont leurs propres avantages dans la programmation asynchrone et l'optimisation des performances, et doivent être décidées en fonction des exigences du projet lors du choix.

Python vs JavaScript: Choisir le bon outil pour le travailPython vs JavaScript: Choisir le bon outil pour le travailMay 08, 2025 am 12:10 AM

Que ce soit pour choisir Python ou JavaScript dépend du type de projet: 1) Choisissez Python pour les tâches de science et d'automatisation des données; 2) Choisissez JavaScript pour le développement frontal et complet. Python est favorisé pour sa bibliothèque puissante dans le traitement et l'automatisation des données, tandis que JavaScript est indispensable pour ses avantages dans l'interaction Web et le développement complet.

Python et Javascript: comprendre les forces de chacunPython et Javascript: comprendre les forces de chacunMay 06, 2025 am 12:15 AM

Python et JavaScript ont chacun leurs propres avantages, et le choix dépend des besoins du projet et des préférences personnelles. 1. Python est facile à apprendre, avec une syntaxe concise, adaptée à la science des données et au développement back-end, mais a une vitesse d'exécution lente. 2. JavaScript est partout dans le développement frontal et possède de fortes capacités de programmation asynchrones. Node.js le rend adapté au développement complet, mais la syntaxe peut être complexe et sujet aux erreurs.

Core de JavaScript: est-il construit sur C ou C?Core de JavaScript: est-il construit sur C ou C?May 05, 2025 am 12:07 AM

Javascriptisnotbuiltoncorc; il est en interprétéLanguageThatrunSoninesoftenwritteninc .1) javascriptwasdesignedasalightweight, interprété de LanguageForwebbrowsers.2) EnginesevolvedFromSimpleInterpreterstoJitCompilers, typicalinc, impropringperformance.

Applications JavaScript: de front-end à back-endApplications JavaScript: de front-end à back-endMay 04, 2025 am 12:12 AM

JavaScript peut être utilisé pour le développement frontal et back-end. L'endouage frontal améliore l'expérience utilisateur via les opérations DOM, et le back-end gère les tâches du serveur via Node.js. 1. Exemple frontal: modifiez le contenu du texte de la page Web. 2. Exemple backend: Créez un serveur Node.js.

Python vs JavaScript: Quelle langue devez-vous apprendre?Python vs JavaScript: Quelle langue devez-vous apprendre?May 03, 2025 am 12:10 AM

Le choix de Python ou JavaScript doit être basé sur le développement de carrière, la courbe d'apprentissage et l'écosystème: 1) le développement de carrière: Python convient à la science des données et au développement de back-end, tandis que JavaScript convient au développement frontal et complet. 2) Courbe d'apprentissage: la syntaxe Python est concise et adaptée aux débutants; La syntaxe JavaScript est flexible. 3) Ecosystème: Python possède de riches bibliothèques informatiques scientifiques, et JavaScript a un puissant cadre frontal.

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Article chaud

<🎜>: Bubble Gum Simulator Infinity - Comment obtenir et utiliser les clés royales
4 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
Nordhold: Système de fusion, expliqué
4 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers of the Witch Tree - Comment déverrouiller le grappin
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌

Outils chauds

SublimeText3 version anglaise

SublimeText3 version anglaise

Recommandé : version Win, prend en charge les invites de code !

PhpStorm version Mac

PhpStorm version Mac

Le dernier (2018.2.1) outil de développement intégré PHP professionnel

Adaptateur de serveur SAP NetWeaver pour Eclipse

Adaptateur de serveur SAP NetWeaver pour Eclipse

Intégrez Eclipse au serveur d'applications SAP NetWeaver.

Navigateur d'examen sécurisé

Navigateur d'examen sécurisé

Safe Exam Browser est un environnement de navigation sécurisé permettant de passer des examens en ligne en toute sécurité. Ce logiciel transforme n'importe quel ordinateur en poste de travail sécurisé. Il contrôle l'accès à n'importe quel utilitaire et empêche les étudiants d'utiliser des ressources non autorisées.

Version Mac de WebStorm

Version Mac de WebStorm

Outils de développement JavaScript utiles