如何在AngularJS(单页应用程序)中延迟加载JS文件?
示例:
var dashBoardModule = angular.module(
'dashBoardApp',[ 'ui.router', 'ui.calendar', 'ngTagsInput','ui.sortable', 'chart.js','ngFileUpload', 'ngDialog', 'timer', 'datatables' ,'daterangepicker'])
.directive('focusMe', function($timeout, $parse) {
})
.directive('schrollBottom', function () {
})
.service('Taskservice', function() {
})
.service('UserService', function($http) {
})
dashBoardModule.controller('dashBoardController', function($scope,Taskservice, $http, $state, ngDialog, $window,$timeout,GloabalVariable) {
});
dashBoardModule.controller('adminDashboardController', [ '$scope', '$http', '$state', 'allProjectsStatusData', 'uiCalendarConfig', '$compile', '$timeout', 'ngDialog',
} ]);
dashBoardModule.controller('CalendarController', [ '$scope', '$http', '$state', 'tasksData', 'uiCalendarConfig', '$compile', '$timeout', 'ngDialog',
dashBoardModule.controller('MapResourceController', [ '$scope', '$http', '$window', '$state', 'myMapResourcesData', 'ngDialog', function($scope, $http, $window, $state, myMapResourcesData, ngDialog) {
} ]);
dashBoardModule.controller('CreateProjectController', [ '$scope', '$http', 'ngDialog','$state', function($scope, $http,$state, ngDialog) {
} ]);
dashBoardModule.controller('TasksController', [
dashBoardModule.controller('ReportController', [ '$scope', '$http', 'projectsStatusData', function($scope, $http, projectsStatusData) {
} ]);
dashBoardModule.controller('CompletedTasksController', [
dashBoardModule.controller('MyTasksController', [ '$scope', '$http', '$window', 'myTasksData', 'Upload', 'ngDialog','GloabalVariable', function($scope, $http, $window, myTasksData, Upload, ngDialog,GloabalVariable) {
} ]);
dashBoardModule.controller('AddNewResourceController', [ '$scope', '$http', '$state', 'allTechnologiesData', 'ngDialog', function($scope, $http, $state, allTechnologiesData, ngDialog) {
} ]);
dashBoardModule.controller('UpdateProjectController', [ '$scope', '$http', '$state', '$stateParams', 'ngDialog', 'Upload', function($scope, $http, $state, $stateParams, ngDialog, Upload) {
} ]);
此dashboardController.js有一些服务,指令和&几个控制器根据控制器将加载少量js文件。
我想要只加载该点所需的文件! &安培;避免遗留文件。
我该怎么做!请给我建议!
Dashboard.js看起来像这样。
<script src="jquery/dist/jquery.js"></script>
<!-- <script src="jquery-ui/jquery-ui.js"></script> -->
<script src="datatables/media/js/jquery.dataTables.min.js"></script>
<script src="angular/angular.min.js"></script>
<script src="moment/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.13/daterangepicker.min.js"></script>
<script src="angular-daterangepicker-master/js/DateRange.js"></script>
<script src="angular-datatables/dist/angular-datatables.min.js"></script>
<script src="ng-tags-input/ng-tags-input.js"></script>
<script src="angular-ui-sortable/sortable.js"></script>
<script src="angular-timer/dist/angular-timer.min.js"></script>
<script src="momentjs/min/locales.min.js"></script>
<script src="humanize-duration/humanize-duration.js"></script>
<script src="ng-file-upload-shim/ng-file-upload-shim.min.js"></script> <!-- for no html5 browsers support -->
<script src="ng-file-upload/ng-file-upload.min.js"></script>
<script src="Chart.js/Chart.min.js"></script>
<script src="angular-chart.js/dist/angular-chart.js"></script>
<script src="angular-bootstrap/ui-bootstrap-tpls.js"></script>
<!-- ganttdepndencies -->
<script type='text/javascript' src="moment/min/moment-with-locales.min.js"></script>
<script type='text/javascript' src="angular-moment/angular-moment.min.js"></script>
<script type='text/javascript' src="moment-range/dist/moment-range.min.js"></script>
<script type='text/javascript' src="angular-ui-tree/dist/angular-ui-tree.js"></script>
<link rel="stylesheet" type="text/css" href="angular-ui-tree/dist/angular-ui-tree.min.css">
<link rel="stylesheet" href="angular-datatables/dist/css/angular-datatables.css">
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.6-dist/css/bootstrap.css">
<link rel="stylesheet" href="stylesheets/app.v2.css" type="text/css" />
<script src="angular-gantt/dist/angular-gantt.min.js"></script>
<script src="angular-gantt/dist/angular-gantt-plugins.min.js"></script>
<link rel="stylesheet" type="text/css" href="angular-gantt/dist/angular-gantt.min.css">
<link rel="stylesheet" type="text/css" href="angular-gantt/dist/angular-gantt-plugins.min.css">
<script src="ngDialog/js/ngDialog.min.js"></script>
<script src="fullcalendar/dist/fullcalendar.js"></script>
<script src="fullcalendar/dist/gcal.js"></script>
<script src="javascripts/calendar.js"></script>
<script src="angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="controllers/dashBoardController.js"></script>
<script src="/socket.io/socket.io.js" ></script>
每次加载所有文件......这是实惠的!
答案 0 :(得分:1)
您可以使用带角度的ocLazyLoading进行延迟加载。
代表前 -
app.js
var App = angular.module('demoApp', ['$stateProvider','oc.lazyLoad']);
App.config(function($stateProvider) {
$stateProvider.state('/', {
url: '/',
templateUrl: 'templateUrl',
controller: 'DemoCtrl',
resolve: {
lazyLoad: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'appName',
files: [
'www/controller/login.js',
]
})
}]
}
})
})