Как интегрировать модуль RequireJS в приложение AngularJS?

-2

Я хочу интегрировать модуль RequireJS в приложение AngularJS. Ниже вы можете увидеть пример кода. Как загрузить Module от module.js в моем app.js?Как интегрировать модуль RequireJS в приложение AngularJS?

Редактировать: посмотреть на this solution Я отправил как ответ сам. У вас есть какие-либо комментарии по этому поводу?

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

источник

2015-05-16 Ruslanas Balčiūnas

Он не сразу ответить на ваш вопрос, но вы можете найти [угловой требуют-ленивый] (https://github.com/nikospara/angular-require-lazy) интересно. –

Вот как вы можете использовать модули 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>

источник

2015-05-16 19:10:26

Это немного более спроектировано для моего дела. Однако я пришел к очень похожему решению. –

@ RuslanasBalčiūnas ** Нет **, когда у вас есть большие приложения с таким количеством компонентов, то эти апартаменты лучше всего. у нас было более 300+ компонентов во всем угловом приложении. в этом примере я использовал named 'define', поэтому вы не можете увидеть преимущество, но в реальном приложении каждый модуль будет в другом файле, и вы можете ссылаться на них с использованием относительного пути. может быть в вашем случае, это может быть переработано. –

У меня есть реальное приложение, и я хочу использовать только один модуль. Нет смысла переписывать его как Угловой модуль. Это аудио-приложение. –

Поскольку app.js просто javscript файл, вы могли бы просто использовать

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

превратить его в своего рода гибридное приложение?

источник

2015-05-16 18:23:51 cabey77

Сейчас мое решение для начальной загрузки приложения вручную после того, как необходимые модули загружены.

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

источник

2015-05-16 22:17:29

Как интегрировать модуль RequireJS в приложение AngularJS?

ответ

Смежные вопросы