AngularJS（シングルページアプリケーション）でJSファイルをレイジーロードする方法はありますか？

Question

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> 

このすべてのファイルが読み込まれるたびに...手頃な価格です！

Answer 1

oazLazyLoadingを使用して、ラージローディング用の角度を付けることができます。 EX-

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