What is best way to load Angularjs individual javascript files in HTML page

use gulpjs task runner for ur projects [combine js,less,css,html uglify & minify, support less,sass, compass, jade, haml, ejs compilers] or grunt

Gulp or Grunt

Use Lazy load, to load the js file when required.

You can checkout: https://oclazyload.readme.io/docs

Last year I used following approach to load the js/css/images when it is required using following library

1. Webpack >> This is very beautiful module at build time. It helped to design the mapping of all resources for given view and load it.
2. oclazyload >> This module is at run time, it helps to load the Controller, Templates and related modules in lazy mode at run time
3. ui-router >> This router helps to adopt oclazyload.

Following is sample code for your reference.

Router.js

'use strict';
module.exports = {
    routes: function ($stateProvider, $urlRouterProvider) {
        //Set the default route
        $urlRouterProvider.otherwise('/myapp/dashboard');
        //Define routes for view   (Please make sure the most matched pattern is define at top)
        $stateProvider
                .state('dashboard', {
                    url: '/myapp/dashboard/:userid',
                    params: {
                        userid: {squash: true, value: null}
                    },
                    templateProvider: ['$q', function ($q) {
                            var deferred = $q.defer();
                            // note that the file name needs to be repeated in the require.ensure([...]) block 
                            // if you're going to use the uglifyJS plugin. It breaks otherwise.
                            require.ensure(['html!./../../../templates/partials/dashboard/dashboardView.html'], function (require) {
                                var template = require('html!./../../../templates/partials/dashboard/dashboardView.html');
                                deferred.resolve(template);
                            });
                            return deferred.promise;
                        }],
                    controller: 'dashboardViewController',
                    resolve: {
                        dashboard: ['$q', '$ocLazyLoad', function ($q, $ocLazyLoad) {
                                var deferred = $q.defer();

                                require.ensure([], function () {
                                    var app =require('./../webpackmodules/dashboard');
                                    $ocLazyLoad.load({
                                        name: 'MyApp.dashboard'
                                    });
                                    deferred.resolve(app.controller);
                                });

                                return deferred.promise;
                            }
                        ]
                    }
                })
                .state('clubview', {
                    url: '/myapp/clubview/:userid',
                    params: {
                        userid: {squash: true, value: null}
                    },
                    templateProvider: ['$q', function ($q) {
                            var deferred = $q.defer();
                            // note that the file name needs to be repeated in the require.ensure([...]) block 
                            // if you're going to use the uglifyJS plugin. It breaks otherwise.
                            require.ensure(['html!./../../../templates/partials/productpage/ClubPageView.html'], function (require) {
                                var template = require('html!./../../../templates/partials/productpage/ClubPageView.html');
                                deferred.resolve(template);
                            });
                            return deferred.promise;
                        }],
                    controller: 'ClubPageViewController',
                    resolve: {
                        product: ['$q', '$ocLazyLoad', function ($q, $ocLazyLoad) {
                                var deferred = $q.defer();

                                require.ensure([], function () {
                                    var app = require('./../webpackmodules/ClubPageViewPage');
                                    $ocLazyLoad.load({
                                        name: 'MyApp.BplatProductpage'
                                    });
                                    deferred.resolve(app.controller);
                                });

                                return deferred.promise;
                            }]
                    }
                })
                ;
    },
    html5mode: function ($locationProvider) {
        $locationProvider.html5Mode(true);
    }
};

dashboard webpack module (webpackmodules/dashboard.js)

'use strict';
var app = angular.module('myApp.dashboard', ['ngResource', 'ngSanitize']);

//Add directives for dashboardview page
app.directive("product", ["$state", require("./../directives/dashboard/Product").getProduct]);
app.directive("userfilter", [require("./../directives/dashboard/UserFilter").getUserFilter]);
app.directive("compareuser", ["$location", require("./../directives/dashboard/compareuser").getcompareuser]);
app.directive("userquicklook", ["$location", require("./../directives/dashboard/userquicklook").getuserquicklook]);
app.directive("preloadimages", [require("./../directives/common/PreloadImages").getPreloadImages]);
//Add dashboardViewController which is specific to Dashboard page
app.controller('dashboardViewController', ['$scope', '$window', '$location', 'ApplicationLoaderService', 'ApplicationConstants', require("./../controllers/dashboardViewController").getdashboardViewController]);

module.exports = app;

App.js (First Angularjs file)

'use strict';
// you need these two lines so that webpack can fetch the chunked bundles from the proper path
// or else it'll try to get them as a root relative path
if (location.protocol === 'https:') {
    __webpack_public_path__ = 'https://' + window.location.host + '/js/';
} else {
    __webpack_public_path__ = 'http://' + window.location.host + '/js/';
} 
var angular = require("angular");
require("angular-ui-router");
require("angular-resource");
require("angular-sanitize");
require("oclazyLoad");  

var Routers = require("./routers/Routers");
//load all common modules 
require('./webpackmodules/CommonAcrossPages');
//Get Angular Project module
var app = angular.module("myApp", ['ngResource', 'ui.router', 'ngSanitize', 'myApp.main', 'oc.lazyLoad']);


//Add client side routers
app.config(['$stateProvider', '$urlRouterProvider', Routers.routes]);
//Enable html5 mode
app.config(["$locationProvider", Routers.html5mode]);

index.html

<!--Render different view as per requests -->        
<div class="myapp-container-wrapper" ui-view></div>