gpt4 book ai didi

javascript - 如何在 AngularJS(单页应用程序)中延迟加载 JS 文件?

转载 作者:行者123 更新时间:2023-12-03 05:09:16 31 4
gpt4 key购买 nike

如何在 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有一些服务、指令和一些 Controller ,根据 Controller ,将加载一些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>

每次加载所有文件...这是负担得起的!

最佳答案

您可以将延迟加载与 Angular 结合使用来进行延迟加载。

对于前-

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',
]
})
}]
}
})
})

关于javascript - 如何在 AngularJS(单页应用程序)中延迟加载 JS 文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41888699/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com