我正在使用angularjs和codeigniter开发应用程序。而且我已经完成了它（DEMO app）。 我想要做的是：实现延迟加载或不想在开始时包含所有这些文件，只需在需要时包含。
以下是我的布局 HEAD 标记，包括所需的js和css文件。
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>UMS : Admin </title>
<!-- added for Angular JS -->
<link href="<?php echo base_url(); ?>angular/css/loading-bar.min.css" rel="stylesheet">
<link href="<?php echo base_url(); ?>angular/css/animation.css" rel="stylesheet">
<link href="<?php echo base_url(); ?>angular/css/angular-chart.css" rel="stylesheet">
<!-- added for Angular JS -->
<!-- Bootstrap Core CSS -->
<link href="<?php echo base_url(); ?>bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="<?php echo base_url(); ?>bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<!-- Timeline CSS -->
<link href="<?php echo base_url(); ?>dist/css/timeline.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="<?php echo base_url(); ?>dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="<?php echo base_url(); ?>bower_components/morrisjs/morris.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="<?php echo base_url(); ?>bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- jQuery -->
<script src="<?php echo base_url(); ?>bower_components/jquery/dist/jquery.min.js"></script>
<!-- jQuery -->
<!-- Bootstrap Core JavaScript -->
<script src="<?php echo base_url(); ?>bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="<?php echo base_url(); ?>bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- DataTables JavaScript REMOVED -->
<!-- Custom Theme JavaScript -->
<script src="<?php echo base_url(); ?>dist/js/sb-admin-2.js"></script>
<!-------------Angular js------------------->
<script src="<?php echo base_url();?>angular/js/angular.min.js"></script>
<script src="<?php echo base_url();?>angular/js/angular-route.min.js"></script>
<!-- flash msg -->
<script src="<?php echo base_url();?>angular/js/angular-flash.js"></script>
<!-- flash msg -->
<!--loading bar-->
<script src="<?php echo base_url();?>angular/js/loading-bar.min.js"></script>
<script src="<?php echo base_url();?>angular/js/angular-animate.min.js"></script>
<!--loading bar-->
<!-- charts-->
<script src="<?php echo base_url();?>angular/js/chart.min.js"></script>
<script src="<?php echo base_url();?>angular/js/angular-chart.min.js"></script>
<!--[if lt IE 9]><script src="<?php echo base_url();?>angular/js/IE8_9/excanvas.js"></script><![endif]-->
<!--[if lt IE 9]><script src="<?php echo base_url();?>angular/js/IE8_9/es5-shim.js"></script><![endif]-->
<!-- charts-->
<!-- core angular APPLICATION specific -->
<script src="<?php echo base_url();?>angular/js/admin/demo_angular.js"></script>
<script src="<?php echo base_url();?>angular/js/admin/app.js"></script>
<script src="<?php echo base_url();?>angular/js/admin/demo-dropdown-controller.js"></script>
<!-- core angular APPLICATION specific -->
<!--Directives developed by VANESH -->
<script src="<?php echo base_url();?>angular/js/angular-directives.js"></script>
<!--Directives developed by VANESH -->
<!-- ui bootstrap pagination -->
<script src="<?php echo base_url();?>angular/js/ui-bootstrap-tpls-0.12.0.js"></script>
<!-- ui bootstrap pagination -->
<!-------------Angular js------------------->
这是我的应用。 js （只显示结构或我如何注入依赖项）
/* this is the angular js file for our UMS */
var base_url="http://localhost/ums/";
/* angularapp (asssigned to html tag in view) */
/* angularControllers is module created in demo_angular.js */
var angularapp = angular.module('angularapp', ['ngRoute','angularControllers','flash','angular-loading-bar','ngAnimate','ui.bootstrap','input_match','uniqueField','uniqueEdit','chart.js']);
angularapp.config(['$routeProvider', function($routeProvider){
// routing configuration.......
}]);
这是另一个js （demo_angular.js），其中我有/有一些名为单个模块的控制器。
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（我的应用：上面提到过）。
请举例说明一些重要内容。
重要：
答案 0 :(得分：2)
有一个非常好的例子可以帮到你吗？
Lazy Loading with Require js and Angualar 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中，您可以找到依赖性如何工作
'javascripts/plugins/timeago/jquery.timeago': {
deps: ['javascripts/theme']
},
此处javascripts/plugins/timeago/jquery.timeago取决于'javascripts/theme'