如何将 RequireJS 模块集成到 AngularJS 应用程序中？答案

【问题标题】：How to integrate RequireJS module into AngularJS application?如何将 RequireJS 模块集成到 AngularJS 应用程序中？
【发布时间】：2015-05-17 19:49:26
【问题描述】：

我想将 RequireJS 模块集成到 AngularJS 应用程序中。下面你可以看到一个示例代码。如何在我的app.js 中从module.js 加载Module？

编辑：查看this solution我自己发布的答案。你有关于它的cmet吗？

// module.js
define('Module', [], function() {
  return {
    init: function() {
      console.log("Module created!");
    }
  };
});

// app.js
var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
  // I want Module to be available here
  $scope.data = 'app';
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js"></script>
<script src="https://code.angularjs.org/1.4.0-rc.2/angular.js"></script>

<body ng-controller="MainCtrl" ng-app="app">
  <div ng-bind="data"></div>
</body>

【问题讨论】：

它没有直接回答你的问题，但你可能会觉得angular-require-lazy很有趣。

标签： javascript angularjs architecture requirejs

【解决方案1】：

这里介绍了如何一起使用 RequireJS 模块和 AngularJS 模块系统。

我将每个 AngularJS 组件保存在一个单独的 require 模块中，以便您可以在需要时加载它。由于需要依赖，RequireJS 将确保加载当前 Angular 模块中所需的所有其他 Angular 模块。

utils.getDeps 将使用 requireJS 依赖自动为当前 Angular 模块创建 Angular 模块依赖数组。

define('listModule', ['angular', 'jquery', 'utils', 'service'], function(ng, $, utils){
    var moduleInfo = {
        moduleName: 'listModule',
        deps: utils.getDeps(arguments)
    };
    
    angular.module(moduleInfo.moduleName, moduleInfo.deps)
      .directive('list', function (){
          return {
              restrict: 'E',
              template: '<div> <ul> <li ng-repeat="item in slist"> {{ item.name }} - {{ item.car }} </li> </ul> </div>',
              controller: function($scope, service){
                  $scope.slist = service.getCustomers();
              }
          }
      });
    
    return moduleInfo;
});

define('service', ['angular', 'jquery', 'utils'], function(ng, $, utils){
    var moduleInfo = {
        moduleName: 'serviceModule',
        deps: utils.getDeps(arguments)
    };
    
    angular.module(moduleInfo.moduleName, moduleInfo.deps)
      .service('service', function (){
          this.getCustomers =  function (){
              return [
                  {
                      name: 'Jack',
                      car: 'Audi'
                  },
                  {
                      name: 'Rekha',
                      car: 'Mercedes'
                  }
              ];
          };
      });
    
    return moduleInfo;
});

define('utils', ['jquery'], function($){
    var obj = {};
    obj.getDeps = function(args){
        return  $.map(args, function (e) {
             return e && e.moduleName;
        });
    };
    return obj;
});

require.config({
    paths: {
        'jquery': 'https://code.jquery.com/jquery-1.11.3.min',
        'angular': 'https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min'
    },
    shim: {
        'angular': { exports: 'angular', deps: [ 'jquery' ] },
        'jquery': { exports: 'jquery' }
    }
});

require(['angular', 'jquery', 'utils', 'listModule', 'service'], function (angular, $, utils) {
    angular.module('mainApp', utils.getDeps(arguments));
    angular.element(document).ready(function() {
      angular.bootstrap($('#main'), ['mainApp']);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js"></script>

<div id="main">
    <list></list>
</div>

【讨论】：

这对我的情况来说有点过度设计。但是我得出了一个非常相似的解决方案。
@RuslanasBalčiūnas 否，当您拥有包含如此多组件的大型应用程序时，此套件最适合。我们在整个 angularjs 应用程序中有 300 多个组件。在此示例中，我使用了名为 define 的名称，因此您看不到好处，但在实际应用程序中，每个模块将位于不同的文件中，您可以使用相对路径引用它们。在你的情况下，这可能是过度设计的。
我有一个真正的应用程序，我只想使用一个模块。将其重写为 Angular 模块是没有意义的。这是一个音频应用程序。
如果你只有一两个模块，那么我同意你不需要这样的架构。
这是一个很好的答案。但一开始有点难以理解，因为它没有使用我的任何有问题的代码。也许我不得不在某个时候同意你的看法。我还是得好好想想。

【解决方案2】：

由于 app.js 只是一个 javscript 文件，你可以直接使用

require(['Module'], function(Module) {
     Module.init();
})

把它变成一种混合应用程序？

【讨论】：

【解决方案3】：

目前我的解决方案是在加载所需模块后手动引导应用程序。

// module.js
define('Module', [], function() {
  return {
    init: function(elm, data) {
      elm.innerHTML = JSON.stringify(data);
    }
  };
});

// app.js
// let it be Require app
require(['Module'], function(Module) {
  
  var app = angular.module('app', []);

  app.directive('module', function() {
    return {
      scope: {
        data: '=data'
      },
      link: function(scope, elm, attr) {      
        Module.init(elm[0], scope.data);      
      }
    }
  });

  app.controller('MainCtrl', function($scope) {
    $scope.data = {
      type: 'block'
    };
  });

  // manlually initialize
  angular.element(document).ready(function() {
    angular.bootstrap(document, ['app']);
  });
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js"></script>
<script src="https://code.angularjs.org/1.4.0-rc.2/angular.js"></script>

<body ng-controller="MainCtrl">
  <module data="data"/>
</body>

【讨论】：