如何将Require.js与angularjs一起用于延迟加载

我正在用angularjs和codeigniter开发应用程序。我大部分时间都用过它（演示应用程序）。 我想做的是：实现延迟加载，或者不想在开始时包含所有这些文件，只在需要时包含

这是我的布局HEAD标签，包括所需的js和css文件

这里是另一个js（demo_angular.js），其中我有一个名为单模块的控制器bunhch

 var base_url="http://localhost/ums/";
    var angularControllers = angular.module('angularControllers', ['flash']);  
    angularControllers.controller('AddUserCtrl', ['$scope','$http', '$timeout','Flash', function($scope,$http, $timeout,Flash)
    {/*...doing stuff...*/}
    //other controllers same like above (edit user, all users, delete user, delete users...)

这个应用程序运行良好！只是需要实现延迟加载（我不知道）。 听一下Require.js

主要问题：如何在此（我的应用：上面提到）中使用Require.js

请提供一些重要的例子

重要提示：

---

• 是否有人可以指导我（以上）特定的应用程序？意味着我的app.js和demo_angular.js会是什么样子？我的main.js和require.js会是什么样子？注：我在应用程序和控制器中注入依赖性，在感知服务中注入依赖性，指令，它们是构造的或第三方的

---

有一个非常好的例子可以帮助您
你的main.js看起来像

'use strict';
var app = angular.module('app', ['ngRoute']);

要求js看起来像

require.config({
    baseUrl: './scripts/',
    urlArgs: 'v=1.1',
    waitSeconds: 200,
    paths: {

        'jquery': './libs/jquery.min',
        'jquery-migrate.min': './libs/jquery-migrate.min',
        'jquery-ui.min': './libs/jquery-ui.min',
        'jquery.mobile.custom.min': './libs/jquery.mobile.custom.min',
        'jquery.easyui.min': './libs/jquery.easyui.min',
        'angular-resource': './libs/1.3.14/angular-resource.min',
        'angular': './libs/1.3.14/angular.min',
        'angular-route': './libs/1.3.14/angular-route.min',
        'angular-animate': './libs/1.3.14/angular-animate.min',
        'bootstrap': './libs/bootstrap',
        'toastr': './modules/toastr',
        'jsapi': './libs/jsapi',
        'ngPopover': './modules/ngPopover',
        'angular-file-upload': './modules/angular-file-upload',
        'ckeditor': './javascripts/ckeditor4.4.7/ckeditor',
        //'ng-infinite-scroll.min': './modules/ng-infinite-scroll.min',
        'app': 'app',
        'tr': './modules/tr',
        'en': './modules/en',
        'hi': './modules/hi',
        'ru': './modules/ru',
        'fr': './modules/fr',
        'de': './modules/de',
    }
});
require(
    {
        shim: {
            //*************Jquery*****************
            'angular-resource': {
                deps: ['angular']
            },
            'angular-route': {
                deps: ['angular']
            },
            'jquery-migrate.min': {
                deps: ['jquery']
            },
            'jquery-ui.min': {
                deps: ['jquery',
                    'jquery-migrate.min']
            },
            'jquery.easyui.min': {
                deps: ['jquery',
                    'jquery-migrate.min']
            },
            'libs/shoppingCart': {
                deps: ['jquery']
            },

            //Jquery ends

            //************bootstrap**************
            'bootstrap': {
                deps: ['jquery',
                    'jquery-migrate.min',
                    'jquery-ui.min']
            },
            'javascripts/theme': {
                deps: ['jquery', 'jquery-ui.min',
                    'javascripts/plugins/autosize/jquery.autosize-min',
                    'javascripts/plugins/charCount/charCount',
                    'javascripts/plugins/bootstrap_maxlength/bootstrap-maxlength.min',
                    //'javascripts/plugins/bootstrap_datetimepicker/bootstrap-datetimepicker',
                    'javascripts/plugins/bootstrap_daterangepicker/bootstrap-daterangepicker',
                    //'javascripts/plugins/common/bootstrap-wysihtml5',
                    'javascripts/plugins/nestable/jquery.nestable',
                    'javascripts/plugins/tabdrop/bootstrap-tabdrop',
                    //'javascripts/plugins/naked_password/naked_password-0.2.4.min',
                    'javascripts/plugins/datatables/jquery.dataTables.min',
                    'javascripts/plugins/datatables/jquery.dataTables.columnFilter',
                    'javascripts/plugins/bootstrap_colorpicker/bootstrap-colorpicker.min',
                    'javascripts/plugins/modernizr/modernizr.min']
            },
            //bootstrap ends

            //***********plugins*****************
            //'javascripts/plugins/msdropdown/jquery.dd': {
            //    deps: ['libs/jquery']
            //},
            'javascripts/plugins/select2/select2': {
                deps: ['jquery',
                    'bootstrap']
            },
            'javascripts/plugins/timeago/jquery.timeago': {
                deps: ['javascripts/theme']
            },
            'javascripts/plugins/autosize/jquery.autosize-min': {
                deps: ['jquery']
            },
            'javascripts/plugins/charCount/charCount': {
                deps: ['jquery']
            },
            'javascripts/plugins/bootstrap_maxlength/bootstrap-maxlength.min': {
                deps: ['jquery']
            },
            //'javascripts/plugins/common/wysihtml5.min': {
            //    deps: ['jquery']
            //},
            //'javascripts/plugins/common/bootstrap-wysihtml5': {
            //    deps: ['jquery', 'javascripts/plugins/common/wysihtml5.min']
            //},
            'javascripts/plugins/nestable/jquery.nestable': {
                deps: ['jquery']
            },

            'javascripts/plugins/bootstrap_daterangepicker/bootstrap-daterangepicker': {
                deps: ['jquery']
            },

            'javascripts/plugins/tabdrop/bootstrap-tabdrop': {
                deps: ['jquery']
            },
            'javascripts/plugins/naked_password/naked_password-0.2.4.min': {
                deps: ['jquery']
            },
            'javascripts/plugins/datatables/jquery.dataTables.min': {
                deps: ['jquery']
            },
            'javascripts/plugins/datatables/jquery.dataTables.columnFilter': {
                deps: ['jquery']
            },
            'javascripts/plugins/bootstrap_colorpicker/bootstrap-colorpicker.min': {
                deps: ['jquery']
            },
            'javascripts/plugins/modernizr/modernizr.min': {
                deps: ['jquery']
            },
            'javascripts/plugins/bootbox/bootbox.min': {
                deps: ['jquery']
            },
            'javascripts/plugins/validate/jquery.validate.min': {
                deps: ['jquery',
                    'jquery-ui.min',
                    'javascripts/theme']
            },
            'javascripts/plugins/FlowJs/flow': {
                deps: ['jquery']
            },
            'javascripts/plugins/FlowJs/fusty-flow': {
                deps: ['jquery',
                    'javascripts/plugins/FlowJs/flow']
            },
            'javascripts/plugins/FlowJs/fusty-flow-factory': {
                deps: ['jquery']
            },
            'javascripts/plugins/validate/jquery.validate.min': {
                deps: ['bootstrap']
            },
            'javascripts/plugins/validate/additional-methods': {
                deps: ['javascripts/plugins/validate/jquery.validate.min']
            },
            'javascripts/JsCookies': {
                deps: ['jquery']
            },
            'ckeditor' : {
                deps: ['jquery']
            },
            //plugins end

            //***********modules*****************
            'modules/resettableForm': {
                deps: ['angular']
            },
            'toastr': {
                deps: ['jquery-migrate.min']
            },
            'modules/resettableForm': {
                deps: ['angular',
                    'toastr']
            },
            'modules/angular-gettext': {
                deps: ['angular']
            },
            'modules/angular-multi-select': {
                deps: ['app']
            },
            'modules/common': {
                deps: ['angular',
                    'toastr']
            },
            'modules/logger': {
                deps: ['angular',
                    'modules/common']
            },
            'modules/ui-bootstrap-tpls-0.9.0': {
                deps: ['angular',
                    'toastr']
            },
            'modules/bootstrap.dialog': {
                deps: ['angular',
                    'modules/ui-bootstrap-tpls-0.9.0',
                    'modules/common']
            },
            'modules/translations': {
                deps: ['app']
            },
            'modules/loading-bar': {
                deps: ['app']
            },
            'angular-file-upload': {
                deps: ['angular', 'toastr']
            },
            //'ng-infinite-scroll.min': {
            //    deps: ['angular']
            //},
            'ngPopover': {
                deps: ['app']
            },



            //'modules/SharedServices': {
            //    deps: ['app']
            //},
            'modules/ng-flow': {
                deps: ['app',
                    'angular']
            },
            'en': {
                deps: ['app']
            },
            'fr': {
                deps: ['app']
            },
            'de': {
                deps: ['app']
            },
            'hi': {
                deps: ['app']
            },
            //'modules/tr': {
            //    deps: ['app']
            //},
            'ru': {
                deps: ['app']
            },
            'modules/paypalfactory': {
                deps: ['app']
            },
            'angular-animate': {
                deps: ['app']
            },

            //'modules/ngAutocomplete': {
            //    deps: ['app']
            //},
            'modules/bootstrap-select.min': {
                deps: ['app']
            },

            //modules end

            //***********Angular Common*****************
            'app': {
                deps: ['angular',
                    'angular-route',
                    'angular-resource',
                    'libs/Base64',
                    'libs/moment',
                    'modules/common',
                    'angular-file-upload']//,
                //'modules/ngAutocomplete']
            },
            'routes': {
                deps: ['app']
            },
            //Angular Common ends

            //***********Angular Controllers***********
            'controllers/manageEbayScheduledInventoryController': {
                deps: ['app']
            },


            'jsapi': {
                deps: ['app']
            },

            //'controllers/googleChartController': {
            //    deps: ['app', 'libs/jsapi']
            //},

            //Angular Controller ends

            //***********Angular Services*************
            'services/manageEbayScheduledInventoryService': {
                deps: ['app']
            },



            //Angular Utility Services Ends

            //Angular Filters
            'filters/ellipsis': {
                deps: ['app']
            },

            //Angular Filters ends

            //Angular Directives
            'directives/passwordValidate': {
                deps: ['app']
            },

        }
    },
    // Including all of the modules to allow concencation and minification for deployment
    [
         //*************Jquery*****************'
         'jquery', 'libs/moment', 'jquery.easyui.min',
         //Jquery ends

         //************bootstrap**************
          'bootstrap', 'javascripts/theme', 'libs/shoppingCart',
         //bootstrap ends

         //***********plugins*****************
          /*'javascripts/plugins/msdropdown/jquery.dd',*/ 'javascripts/plugins/select2/select2', 'javascripts/JsCookies', 'javascripts/plugins/bootbox/bootbox.min',
          'javascripts/plugins/FlowJs/flow', 'javascripts/plugins/FlowJs/fusty-flow', 'javascripts/plugins/FlowJs/fusty-flow-factory',
          'javascripts/plugins/validate/jquery.validate.min', 'javascripts/plugins/timeago/jquery.timeago','ckeditor',
         //plugins end

         //***********modules*****************
         'toastr', 'modules/resettableForm', 'modules/angular-gettext', 'modules/angular-multi-select', 'modules/common', 'modules/logger',
         'modules/ui-bootstrap-tpls-0.9.0', 'modules/bootstrap.dialog', 'modules/translations', 'ngPopover', //'modules/SharedServices',
         'modules/ng-flow', 'en', 'de', 'fr', 'hi',  'ru', //'modules/tr',
         'modules/paypalfactory', 'modules/loading-bar', 'angular-animate', 'modules/bootstrap-select.min', 'angular-file-upload', //'ng-infinite-scroll.min', //'modules/ngAutocomplete',
         //modules end

         //***********Angular Common*****************
         'app', 'routes', 'jsapi',
         //Angular Common ends

        //***********Angular Controllers***********'controllers/supplierController',
          'controllers/manageEbayScheduledInventoryController',


        //Angular Controller ends

        //***********Angular Services*************'services/supplierService','services/uploadManagerService','services/createPurchaseOrderService', 
        'services/manageEbayScheduledInventoryService',
         //Angular Services ends

         //Angular Utility Services Starts
         'services/sortingService',
         //Angular Utility Services Ends

         //Angular filters
        'filters/ellipsis', 'filters/currency',
         //Angular filters ends

         //Angular Directive
         'directives/passwordValidate', 'directives/focus', 'directives/mypopover', 'directives/priceBox', 'directives/onDragStart'
    ],
    function () {
        angular.bootstrap(document, ['app']);
    }
);

在reuire.js中，您可以找到dependecy是如何工作的

'javascripts/plugins/timeago/jquery.timeago': {
                    deps: ['javascripts/theme']
                },

这里的

javascripts/plugins/timeago/jquery.timeago

取决于

'javascripts/theme'

---

您可能会发现有用的内容。请仔细查看场景，让我知道如何实现。是否有人可以指导我（以上）特定于应用程序的内容？意味着我的app.js和demo_angular.js会是什么样子？我的main.js和require.js会是什么样子？注：我在应用程序和控制器中注入依赖性，在感知服务中注入依赖性，指令，它们是构造的或第三方的。不要混淆，只需首先找出依赖性，并相应地排列它们。

var angularapp=angular.module（'angularapp'，['ngRoute'、'angularControllers'、'flash'、'angular-loading-bar'、'ngAnimate'、'ui.bootstrap'、'input\u match'、'uniqueField'、'uniqueEdit'、'chart.js']）；

只要不要使用.js这个词并提及模块名称就是一个很好的例子。谢谢，我已经做了很多，使用这个时出现了一个错误：

var-app=angular.module（‘angularapp’、[‘ngRoute’、…..

require.config({
    baseUrl: './scripts/',
    urlArgs: 'v=1.1',
    waitSeconds: 200,
    paths: {

        'jquery': './libs/jquery.min',
        'jquery-migrate.min': './libs/jquery-migrate.min',
        'jquery-ui.min': './libs/jquery-ui.min',
        'jquery.mobile.custom.min': './libs/jquery.mobile.custom.min',
        'jquery.easyui.min': './libs/jquery.easyui.min',
        'angular-resource': './libs/1.3.14/angular-resource.min',
        'angular': './libs/1.3.14/angular.min',
        'angular-route': './libs/1.3.14/angular-route.min',
        'angular-animate': './libs/1.3.14/angular-animate.min',
        'bootstrap': './libs/bootstrap',
        'toastr': './modules/toastr',
        'jsapi': './libs/jsapi',
        'ngPopover': './modules/ngPopover',
        'angular-file-upload': './modules/angular-file-upload',
        'ckeditor': './javascripts/ckeditor4.4.7/ckeditor',
        //'ng-infinite-scroll.min': './modules/ng-infinite-scroll.min',
        'app': 'app',
        'tr': './modules/tr',
        'en': './modules/en',
        'hi': './modules/hi',
        'ru': './modules/ru',
        'fr': './modules/fr',
        'de': './modules/de',
    }
});
require(
    {
        shim: {
            //*************Jquery*****************
            'angular-resource': {
                deps: ['angular']
            },
            'angular-route': {
                deps: ['angular']
            },
            'jquery-migrate.min': {
                deps: ['jquery']
            },
            'jquery-ui.min': {
                deps: ['jquery',
                    'jquery-migrate.min']
            },
            'jquery.easyui.min': {
                deps: ['jquery',
                    'jquery-migrate.min']
            },
            'libs/shoppingCart': {
                deps: ['jquery']
            },

            //Jquery ends

            //************bootstrap**************
            'bootstrap': {
                deps: ['jquery',
                    'jquery-migrate.min',
                    'jquery-ui.min']
            },
            'javascripts/theme': {
                deps: ['jquery', 'jquery-ui.min',
                    'javascripts/plugins/autosize/jquery.autosize-min',
                    'javascripts/plugins/charCount/charCount',
                    'javascripts/plugins/bootstrap_maxlength/bootstrap-maxlength.min',
                    //'javascripts/plugins/bootstrap_datetimepicker/bootstrap-datetimepicker',
                    'javascripts/plugins/bootstrap_daterangepicker/bootstrap-daterangepicker',
                    //'javascripts/plugins/common/bootstrap-wysihtml5',
                    'javascripts/plugins/nestable/jquery.nestable',
                    'javascripts/plugins/tabdrop/bootstrap-tabdrop',
                    //'javascripts/plugins/naked_password/naked_password-0.2.4.min',
                    'javascripts/plugins/datatables/jquery.dataTables.min',
                    'javascripts/plugins/datatables/jquery.dataTables.columnFilter',
                    'javascripts/plugins/bootstrap_colorpicker/bootstrap-colorpicker.min',
                    'javascripts/plugins/modernizr/modernizr.min']
            },
            //bootstrap ends

            //***********plugins*****************
            //'javascripts/plugins/msdropdown/jquery.dd': {
            //    deps: ['libs/jquery']
            //},
            'javascripts/plugins/select2/select2': {
                deps: ['jquery',
                    'bootstrap']
            },
            'javascripts/plugins/timeago/jquery.timeago': {
                deps: ['javascripts/theme']
            },
            'javascripts/plugins/autosize/jquery.autosize-min': {
                deps: ['jquery']
            },
            'javascripts/plugins/charCount/charCount': {
                deps: ['jquery']
            },
            'javascripts/plugins/bootstrap_maxlength/bootstrap-maxlength.min': {
                deps: ['jquery']
            },
            //'javascripts/plugins/common/wysihtml5.min': {
            //    deps: ['jquery']
            //},
            //'javascripts/plugins/common/bootstrap-wysihtml5': {
            //    deps: ['jquery', 'javascripts/plugins/common/wysihtml5.min']
            //},
            'javascripts/plugins/nestable/jquery.nestable': {
                deps: ['jquery']
            },

            'javascripts/plugins/bootstrap_daterangepicker/bootstrap-daterangepicker': {
                deps: ['jquery']
            },

            'javascripts/plugins/tabdrop/bootstrap-tabdrop': {
                deps: ['jquery']
            },
            'javascripts/plugins/naked_password/naked_password-0.2.4.min': {
                deps: ['jquery']
            },
            'javascripts/plugins/datatables/jquery.dataTables.min': {
                deps: ['jquery']
            },
            'javascripts/plugins/datatables/jquery.dataTables.columnFilter': {
                deps: ['jquery']
            },
            'javascripts/plugins/bootstrap_colorpicker/bootstrap-colorpicker.min': {
                deps: ['jquery']
            },
            'javascripts/plugins/modernizr/modernizr.min': {
                deps: ['jquery']
            },
            'javascripts/plugins/bootbox/bootbox.min': {
                deps: ['jquery']
            },
            'javascripts/plugins/validate/jquery.validate.min': {
                deps: ['jquery',
                    'jquery-ui.min',
                    'javascripts/theme']
            },
            'javascripts/plugins/FlowJs/flow': {
                deps: ['jquery']
            },
            'javascripts/plugins/FlowJs/fusty-flow': {
                deps: ['jquery',
                    'javascripts/plugins/FlowJs/flow']
            },
            'javascripts/plugins/FlowJs/fusty-flow-factory': {
                deps: ['jquery']
            },
            'javascripts/plugins/validate/jquery.validate.min': {
                deps: ['bootstrap']
            },
            'javascripts/plugins/validate/additional-methods': {
                deps: ['javascripts/plugins/validate/jquery.validate.min']
            },
            'javascripts/JsCookies': {
                deps: ['jquery']
            },
            'ckeditor' : {
                deps: ['jquery']
            },
            //plugins end

            //***********modules*****************
            'modules/resettableForm': {
                deps: ['angular']
            },
            'toastr': {
                deps: ['jquery-migrate.min']
            },
            'modules/resettableForm': {
                deps: ['angular',
                    'toastr']
            },
            'modules/angular-gettext': {
                deps: ['angular']
            },
            'modules/angular-multi-select': {
                deps: ['app']
            },
            'modules/common': {
                deps: ['angular',
                    'toastr']
            },
            'modules/logger': {
                deps: ['angular',
                    'modules/common']
            },
            'modules/ui-bootstrap-tpls-0.9.0': {
                deps: ['angular',
                    'toastr']
            },
            'modules/bootstrap.dialog': {
                deps: ['angular',
                    'modules/ui-bootstrap-tpls-0.9.0',
                    'modules/common']
            },
            'modules/translations': {
                deps: ['app']
            },
            'modules/loading-bar': {
                deps: ['app']
            },
            'angular-file-upload': {
                deps: ['angular', 'toastr']
            },
            //'ng-infinite-scroll.min': {
            //    deps: ['angular']
            //},
            'ngPopover': {
                deps: ['app']
            },



            //'modules/SharedServices': {
            //    deps: ['app']
            //},
            'modules/ng-flow': {
                deps: ['app',
                    'angular']
            },
            'en': {
                deps: ['app']
            },
            'fr': {
                deps: ['app']
            },
            'de': {
                deps: ['app']
            },
            'hi': {
                deps: ['app']
            },
            //'modules/tr': {
            //    deps: ['app']
            //},
            'ru': {
                deps: ['app']
            },
            'modules/paypalfactory': {
                deps: ['app']
            },
            'angular-animate': {
                deps: ['app']
            },

            //'modules/ngAutocomplete': {
            //    deps: ['app']
            //},
            'modules/bootstrap-select.min': {
                deps: ['app']
            },

            //modules end

            //***********Angular Common*****************
            'app': {
                deps: ['angular',
                    'angular-route',
                    'angular-resource',
                    'libs/Base64',
                    'libs/moment',
                    'modules/common',
                    'angular-file-upload']//,
                //'modules/ngAutocomplete']
            },
            'routes': {
                deps: ['app']
            },
            //Angular Common ends

            //***********Angular Controllers***********
            'controllers/manageEbayScheduledInventoryController': {
                deps: ['app']
            },


            'jsapi': {
                deps: ['app']
            },

            //'controllers/googleChartController': {
            //    deps: ['app', 'libs/jsapi']
            //},

            //Angular Controller ends

            //***********Angular Services*************
            'services/manageEbayScheduledInventoryService': {
                deps: ['app']
            },



            //Angular Utility Services Ends

            //Angular Filters
            'filters/ellipsis': {
                deps: ['app']
            },

            //Angular Filters ends

            //Angular Directives
            'directives/passwordValidate': {
                deps: ['app']
            },

        }
    },
    // Including all of the modules to allow concencation and minification for deployment
    [
         //*************Jquery*****************'
         'jquery', 'libs/moment', 'jquery.easyui.min',
         //Jquery ends

         //************bootstrap**************
          'bootstrap', 'javascripts/theme', 'libs/shoppingCart',
         //bootstrap ends

         //***********plugins*****************
          /*'javascripts/plugins/msdropdown/jquery.dd',*/ 'javascripts/plugins/select2/select2', 'javascripts/JsCookies', 'javascripts/plugins/bootbox/bootbox.min',
          'javascripts/plugins/FlowJs/flow', 'javascripts/plugins/FlowJs/fusty-flow', 'javascripts/plugins/FlowJs/fusty-flow-factory',
          'javascripts/plugins/validate/jquery.validate.min', 'javascripts/plugins/timeago/jquery.timeago','ckeditor',
         //plugins end

         //***********modules*****************
         'toastr', 'modules/resettableForm', 'modules/angular-gettext', 'modules/angular-multi-select', 'modules/common', 'modules/logger',
         'modules/ui-bootstrap-tpls-0.9.0', 'modules/bootstrap.dialog', 'modules/translations', 'ngPopover', //'modules/SharedServices',
         'modules/ng-flow', 'en', 'de', 'fr', 'hi',  'ru', //'modules/tr',
         'modules/paypalfactory', 'modules/loading-bar', 'angular-animate', 'modules/bootstrap-select.min', 'angular-file-upload', //'ng-infinite-scroll.min', //'modules/ngAutocomplete',
         //modules end

         //***********Angular Common*****************
         'app', 'routes', 'jsapi',
         //Angular Common ends

        //***********Angular Controllers***********'controllers/supplierController',
          'controllers/manageEbayScheduledInventoryController',


        //Angular Controller ends

        //***********Angular Services*************'services/supplierService','services/uploadManagerService','services/createPurchaseOrderService', 
        'services/manageEbayScheduledInventoryService',
         //Angular Services ends

         //Angular Utility Services Starts
         'services/sortingService',
         //Angular Utility Services Ends

         //Angular filters
        'filters/ellipsis', 'filters/currency',
         //Angular filters ends

         //Angular Directive
         'directives/passwordValidate', 'directives/focus', 'directives/mypopover', 'directives/priceBox', 'directives/onDragStart'
    ],
    function () {
        angular.bootstrap(document, ['app']);
    }
);

'javascripts/plugins/timeago/jquery.timeago': {
                    deps: ['javascripts/theme']
                },