Maison > interface Web > js tutoriel > Explication détaillée de l'importation et de l'exportation de modules de module dans AngularJS_AngularJS

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

WBOY
Libérer: 2016-05-16 15:26:20
original
1442 Les gens l'ont consulté

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
.....helloworld.direcitve.js
.....index.js
.....math.js

app.js

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; 
Copier après la connexion

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; 
Copier après la connexion

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;
Copier après la connexion

dans math.js :

exports = {
 add: function (x, y) {
  return x + y;
 },
 mul: function (x, y) {
  return x * y;
 }
}; 
Copier après la connexion

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);
 }]);
Copier après la connexion

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.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal