Explication détaillée de l'importation et de l'exportation de modules de module dans AngularJS_AngularJS

AngularJS est un framework JS frontal de Google. Ses fonctionnalités de base incluent : MVC, liaison de données bidirectionnelle, instructions et balises sémantiques, outils modulaires, injection de dépendances, modèles HTML et encapsulation d'outils couramment utilisés. $http, $cookies, $location, etc.

Concernant l'importation et l'exportation de modules dans AngularJS, je n'avais pas écrit à ce sujet avant que Bob me le dise. Merci Bob pour vos conseils à cet égard et pour m'avoir donné le code du cas.

Dans les projets AngularJS réels, nous devrons peut-être placer divers aspects d'un certain champ dans différents modules, puis résumer chaque module dans un fichier dans ce champ, puis l'appeler depuis le module principal. Ça y est :

Ci-dessus, app.mymodule1, app.mymodule2, app.mymodule sont tous destinés à un certain champ. Par exemple, la directive est définie dans app.mymodule1, le contrôleur est défini dans app.mymodule2 et app.mymodule combine app. mymodule1 et app.mymodule2 Résumez-les en un seul endroit, puis l'application du module principal dépend de app.mymodule.

Structure du fichier :

monmodule/
.....helloworld.controller.js <dans app.mymodule2>
.....helloworld.direcitve.js <dans app.mymodule1>
.....index.js <dans app.mymodule>
.....math.js <Dans un module séparé>

app.js <Dans le module application>

index.html

helloworld.controller.js:
var angular = require('angular');
module.exports = angular.module('app.mymodule2', []).controller('HWController', ['$scope', function ($scope) {
 $scope.message = "This is HWController";
}]).name;

Ci-dessus, exportez le module via module.exports et importez le module via require.

helloworld.direcitve.js:
var angular=require('angular');
module.exports = angular.module('app.mymodule1', []).directive('helloWorld', function () {
 return {
  restrict: 'EA',
  replace: true,
  scope: {
   message: "@"
  },
  template: '<div><h1>Message is {{message}}.</h1><ng-transclude></ng-transclude></div>',
  transclude: true
 }
}).name;

Ensuite, placez pp.mymodule1 et app.mymodule2 au même endroit dans index.js.

var angular = require('angular');
var d = require('./helloworld.directive');
var c = require('./helloworld.controller');
module.exports = angular.module('app.mymodule', [d, c]).name;

dans math.js :

exports = {
 add: function (x, y) {
  return x + y;
 },
 mul: function (x, y) {
  return x * y;
 }
};

Enfin, référencez app.mymodule1 :
dans app.js

var angular = require('angular');
var mymodule = require('./mymodule');
var math = require('./mymodule/math');
angular.module('app', [mymodule])
 .controller('AppController', ['$scope', function ($scope) {
  $scope.message = "hello world";
  $scope.result = math.add(1, 2);
 }]);

Ce qui précède est l'importation et l'exportation de modules dans AngularJS partagés par l'éditeur. J'espère que vous l'aimerez.