如何将RequireJS模块集成到AngularJS应用程序中?

拉斯拉纳斯·巴尔奇尤纳斯(RuslanasBalčiūnas)

我想将RequireJS模块集成到AngularJS应用程序中。您可以在下面看到示例代码。如何加载Modulemodule.js我的app.js

编辑:看看我自己作为答案发布的此解决方案您对此有何评论?

// 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>

杰德熊猫

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

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

utils.getDeps 会使用requireJS依赖关系自动为当前角度模块创建角度模块依赖关系数组。

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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何将Angular 2应用程序集成到Django应用程序中

如何将CCAvenue集成到Ionic应用程序?

如何将Disqus集成到Aurelia应用程序?

如何将 HTML 模板中的 css/js 集成到 Laravel 应用程序中?

如何将SingleController AngularJS应用程序中的MenuController与主页集成

Citrus SplitPay:如何将Split Pay集成到移动应用程序中

如何将Mustache模板引擎集成到Phalcon PHP应用程序中?

如何将FusionChart集成到使用Durandal和Knockout开发的SPA应用程序中?

如何将BIRT日志集成到应用程序日志中?

如何将Paytm钱包集成到Android应用程序中?

如何将独立的Python脚本集成到Rails应用程序中?

我们如何将Captcha集成到iOS应用程序中?

如何将laravel软件包集成到应用程序中

如何将Paytm钱包集成到Android应用程序中?

如何将Twitter Bootstrap集成到ember-cli应用程序中?

如何将Prism 7 WPF集成到旧的大型WinForms应用程序中

如何将Samsung Gear Steps集成到android应用程序中?

如何将OPEN_APP_FEATURE操作集成到Android应用程序中?

如何将React应用程序集成到Wordpress(反应路由器)中?

如何将代码集成到闪亮的应用程序中并上传文件?

如何将EmberJS逐步集成到Rails Web应用程序中?

Django:如何将Django Rest框架集成到现有应用程序中?

如何将PayPal功能集成到桌面应用程序中

如何将Gmail登录信息集成到Android应用程序中?

如何将现有的angular js应用程序集成到Laravel 5中

如何将qml文件集成到qt-widgets应用程序中?

如何将新的 ionic 主题集成到现有的 ionic 应用程序中?

如何将 Zoom 集成到 reactjs 应用程序中?

将基于Spring的Java模块集成到独立的Java应用程序中