Detaillierte Erläuterung des Imports und Exports von Modulmodulen in AngularJS_AngularJS

AngularJS ist ein Front-End-JS-Framework von Google. Zu seinen Kernfunktionen gehören beispielsweise: MVC, bidirektionale Datenbindung, Anweisungen und semantische Tags, modulare Tools, Abhängigkeitsinjektion, HTML-Vorlagen und Kapselung häufig verwendeter Tools $http, $cookies, $location usw.

Bezüglich des Imports und Exports von Modulen in AngularJS hatte ich noch nichts darüber geschrieben, bevor Bob es mir erzählte. Vielen Dank, Bob, für deine Anleitung in dieser Hinsicht und die Bereitstellung des Fallcodes.

In tatsächlichen AngularJS-Projekten müssen wir möglicherweise verschiedene Aspekte eines bestimmten Felds in verschiedene Module einfügen und dann jedes Modul in einer Datei in diesem Feld zusammenfassen und es dann vom Hauptmodul aus aufrufen. Das ist es:

Oben sind app.mymodule1, app.mymodule2 und app.mymodule alle auf ein bestimmtes Feld ausgerichtet. Beispielsweise ist die Direktive in app.mymodule1 definiert, der Controller ist in app.mymodule2 definiert und app.mymodule kombiniert app. mymodule1 und app.mymodule2 Fassen Sie sie an einem Ort zusammen, und dann hängt die Hauptmodul-App von app.mymodule ab.

Dateistruktur:

meinmodul/
.....helloworld.controller.js 62c8d40d68c66cd8387108b752d501e3
.....helloworld.direcitve.js c160a33d6b4d5eac66d1a23a5a4e2f13
.....index.js a8b706ed17869250022373796fee4d9f
.....math.js 2d73d406d17dc8bc1de09a428cfe9779

app.js 589f896174c7c79e3d37bdb8272a5156

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; 

Exportieren Sie oben das Modul über module.exports und importieren Sie das Modul über 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; 

Als nächstes fügen Sie pp.mymodule1 und app.mymodule2 an einer Stelle in index.js ein.

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

in math.js:

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

Zuletzt referenzieren Sie app.mymodule1:
in 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);
 }]);

Das Obige ist der vom Herausgeber geteilte Import und Export von Modulmodulen in AngularJS. Ich hoffe, es gefällt Ihnen.