How To Lazy Load JS file In AngularJS (Single Page Application)?

Question

How To Lazy Load JS file In AngularJS (Single Page Application) ?

Example:

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) {

} ]);

This dashboardController.js has some services,directives,& few controller according to controller few js file will be loaded.

i want load only files which is required at the point! & avoid remaining files.

How do i do it ! please give me suggestions !

Dashboard.js looks like this.

<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>

every time this all files are loaded ...which is affordable !!

Answer 1

You can use ocLazyLoading with angular for lazyloading.

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