How to import and export the module in AngularJS

This article introduces how to import and export module modules in angularjs, which involves angularjsmodule related knowledge. If you are interested in angularjsmodule, check that AngularJS is a front-end JS framework from Google, its core features include MVC, bidirectional data binding, command and semantic tags, modular tools, dependency injection, HTML templates, and encapsulation of common tools, for example, $ http, $ cookies, and $ location.

For how to import and export modules in AngularJS, Bob told me that he hasn't written them before. Thanks for Bob's guidance in this regard and gave me the case code.

In actual AngularJS projects, we may need to put all aspects of a certain field in different modules, and then summarize each module into a file in this field, it is then called by the main module. This is the case:

Above, app. mymodule1, app. mymodule2, app. mymodule is applicable to a certain field, such as app. define directive, app in mymodule1. define controller and app in mymodule2. mymodule. mymodule1 and app. mymodule2 is summarized to one place, and the main module of the app depends on the app. mymodule.

File structure:

Mymodule/
... Helloworld. controller. js <在app.mymodule2中>
... Helloworld. direcitve. js <在app.mymodule1中>
... Index. js <在app.mymodule中>
... Math. js <在一个单独的module中>

App. js <在app这个module中>

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; 

Above, use module. exports to export the module and use require to import the module.

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

Next, we will summarize pp. mymodule1 and app. mymodule2 in index. js to one place.

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

Finally, reference 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); }]);

The preceding section describes how to import and export the module in AngularJS.