Une analyse approfondie des modules dans AngularJS_AngularJS

Que sont les modules AngularJS

Le module dont nous parlons fait partie intégrante de votre application AngularJS. Il peut s'agir d'un Controller, d'un Service, d'un Filtre, ou d'une directive ) etc... ils appartiennent tous à un seul module !

La plupart des applications ont leur propre méthode de saisie de fonction Main, qui est utilisée pour initialiser, charger et assembler divers modules, et ensuite la combinaison de ces modules constitue votre application, n'est-ce pas ?

Mais, mais, l'application AngularJS n'est pas comme ça. Elle n'a pas de méthode principale ni d'entrée de fonction. Au lieu de cela, il est spécifié dans le module de déclarer comment ce module doit être chargé et démarré dans l'application AngularJS.

Cette méthode présente les avantages suivants :

1) Utilisez des déclarations pour faciliter la compréhension des gens.

2) Vous pourrez réutiliser votre code plus facilement.

3) L'ordre de chargement des modules est plus facile à contrôler. Parce que ces modules sont exécutés paresseusement.

4) Il devient plus pratique d'effectuer des tests unitaires. Plus fiable, il vous suffit de charger ce module pour tester.

5) Dans les tests de bout en bout, vous pouvez utiliser des modules pour réécrire les configurations.

Le module est une existence essentielle dans AngularJS, comprenant de nombreux aspects, tels que le contrôleur, la configuration, le service, l'usine, la directive, la constante, etc.

Comment implémenter des fonctions de type module en Javascript ?

En d’autres termes, si l’on définit une fonction, comment ouvrir les fonctions au sein de la fonction au monde extérieur ?

Je pense que la fonction dans la fonction peut être utilisée comme valeur clé d'un objet pour l'ouvrir au monde extérieur.

C’est très général de dire ça, mais en fait c’est comme ça :

var myModule = function outerFuction(){
  var method1 = new function(){}
  var method2 = new function(){}
  return{
    method1: method1,
    method2, method2
  }
}
var o = outerFucntion();
o.method1();
o.mehtod2(); 

Donnez un exemple de dépôt et de retrait d'argent dans une banque.

var account = function(){
 //余额
 var balance = 0;
 //存钱
 var deposit = function(money){
  balance+=money;
  console.log("卡上余额为： " + balance);
  notifyUser();
 }
 //取钱
 var withdraw = function(money){
  balance -= money;
  console.log("卡上余额为： " + balance)
  notifyUser();
 }
 //通知用户
 var notifyUser = function(){
  console.log("卡上余额有变动");
 }
 return {
  deposit:deposit,
  withdraw: withdraw
 }
}
var a1 = account();
a1.deposit(100);
a1.withdraw(50); 

En venant sur AngularJS, nous avons l'habitude d'écrire comme ceci :

var app = angular.module('app',[]);
app.config();
app.controller();
app.factory();
... 

Autrement dit, récupérez le module, puis appelez-nous la méthode fournie par le module.

Affichez le code source d'angular.js et recherchez :

angular = window.angular || (window.angular = {} )

C'est pourquoi on peut utiliser la variable angulaire.

...
var moduleInstace = {
    provider: invokeLater('$provide','provider'),
    factory: invokeLater('$provider', 'factory'),
    service: invokeLater('$provider', 'service'),
    value: invokeLater('$provide', 'value'),
    constant: invokeLater('$provider', 'constant'...),
    animation: invokeLater('$animateProvider',...),
    filter: invokeLater('$filterProvider',...),
    controller: invokeLater('$controllerProvider',...),
    directive: invokeLater('$compileProvider',...),
    config: config,
}
return moduleInstance;
... 

La méthode d'écriture ci-dessus correspond exactement à la manière dont le module est écrit.

PS : Il existe une différence petite mais importante entre angulaire.module('MyApp',[...]) et angulaire.module('MyApp')

angulaire.module('MyApp',[...]) créera un nouveau module Angular et chargera la liste des dépendances entre crochets ([...]) tandis que angulaire.module('MyApp ') utilisera le module existant défini par le premier appel.

Ainsi, pour le code suivant, vous devez vous assurer qu'il ne sera utilisé qu'une seule fois dans toute l'application :

angular.module('MyApp', [...]) //Si votre application est modulaire, cela peut être MyModule

Si vous ne prévoyez pas de stocker la référence du module dans une variable, puis de référencer le module via cette variable dans toute l'application, l'utilisation d'angular.module(MyApp) dans d'autres fichiers peut garantir que vous obtenez la bonne référence de module AngularJS. . Tout sur le module doit être défini en accédant à cette référence de module, ou en ajoutant le contenu nécessaire là où le module est défini.