在现有的AngularJS结构中集成RequireJS

时间:2016-05-10 08:53:43

标签: javascript angularjs requirejs

现有的AngularJS结构

Existing structure

的index.html

<html>
<head>

<!-- JQuery Library -->
<script src="assets/js/lib/jQuery/jquery-1.12.3.min.js"></script>

<!-- Angular Libraries -->
<script src="assets/js/lib/Angular/1.5.5/angular.js"></script>
<script src="assets/js/lib/Angular/1.5.6/angular-route.min.js"></script>
<script src="app.route.js"></script>

<!-- Demo Module Files -->
<script src="modules/demo/demoMod.js"></script>
<script src="modules/demo/services/demoService.js"></script>
<script src="modules/demo/controllers/demoController.js"></script>
<script src="modules/demo/filters/demoFilters.js"></script>
</head>

<body ng-app="myApp">
    <ul><li><a href="#/appcustomfilter">Application Specific Custom Filter Example</a></li></ul>
    <div ng-view></div>
</body>
</html>

app.route.js

var myApp = angular.module('myApp', ['ngRoute','demoModule','app-custom-filters']);
myApp.config([ '$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider) {
        $routeProvider
            .when('/appcustomfilter', {
             templateUrl : 'modules/demo/views/app-custom-filter.html',
             controller : 'demoCtrl'
            });
    }]);

app.module.js

angular.module('myApp', ['demoModule']);

模块文件夹结构

Mod structure

模块/演示/ demoMod.js

angular.module('demoModule',[
   'demoModule.controllers' ,
   'demoModule.services',
   'demoModule.filters'
]);

如何将AngularJS和RequireJS集成到上述结构中?我尝试过使用this,但它适用于种子结构。我只需要在调用时加载模块代码。

1 个答案:

答案 0 :(得分:0)

使用ES6模块https://github.com/systemjs/systemjs

尝试System.js https://github.com/systemjs/systemjs/blob/master/docs/es6-modules-overview.md

它会创建您连接到html页面的单个文件,并且只包含您需要调用的模块。