在HTML頁面中加載Angularjs單個JavaScript文件的最佳方式

Question

我的應用程序在客戶端使用Angularjs，在服務器端使用Nodejs來構建單頁面應用程序。應用程序有許多視圖和複雜因此我有許多客戶端指令和視圖。以下是我的客戶端列表Angularjs文件

1. App.js >> Defining the Angularjs app 
2. ApplicationController.js >> This is global controller to handle the common stuff 
3. ControllerView1.js, ControllerView2.js, ControllerView3.js, ControllerView4.js, ControllerView5.js, ControllerView6.js, ControllerView7.js, ControllerView8.js and many more 
4. Directive1.js, Directive2.js, Directive3.js, Directive4.js, Directive5.js, Directive6.js, Directive7.js, Directive8.js, Directive9.js and many more 

目前我已裝在節中的所有這些腳本如下

<script type="text/javascript" src="/js/vendor/angularjs/angular.min.js"></script> 
<script type="text/javascript" src="/js/vendor/angularjs/angular-resource.min.js"></script> 
<script type="text/javascript" src="/js/vendor/angularjs/angular-route.min.js"></script> 
<script type="text/javascript" src="/js/vendor/angularjs/angular-sanitize.min.js"></script> 
<script type="text/javascript" src="/js/vendor/angularjs/angular-animate.min.js"></script> 
<!--App.js which is first file to be declared first --> 
<script type="text/javascript" src="/js/application/App.js"></script> 

<!--Factories --> 
<script type="text/javascript" src="/js/application/factories/Resource.js"></script> 


<!--Factories Implementation--> 
<script type="text/javascript" src="/js/application/factories/implementation/ResourceImplementation.js"></script> 

<!--Services --> 
<script type="text/javascript" src="/js/application/utilities/HTTPResource.js"></script> 
<script type="text/javascript" src="/js/application/services/ApplicationConstants.js"></script> 
<script type="text/javascript" src="/js/application/services/ApplicationLoaderService.js"></script> 
<script type="text/javascript" src="/js/application/services/FileUploadService.js"></script> 

<!-- Application controllers --> 
<script type="text/javascript" src="/js/application/controllers/ApplicationController.js"></script> 
<script type="text/javascript" src="/js/application/controllers/AdminViewController.js"></script> 

<!--Directives --> 
<script type="text/javascript" src="/js/application/directives/common/controls/LoadingScreen.js"></script> 
<script type="text/javascript" src="/js/application/directives/common/controls/FormTextBox.js"></script> 
<script type="text/javascript" src="/js/application/directives/common/controls/ViewFormTextBox.js"></script> 
<script type="text/javascript" src="/js/application/directives/common/controls/FormTextArea.js"></script> 
<script type="text/javascript" src="/js/application/directives/common/controls/FormCheckBox.js"></script> 
<script type="text/javascript" src="/js/application/directives/common/controls/ViewFormCheckBox.js"></script> 
<script type="text/javascript" src="/js/application/directives/common/controls/MenuPullDown.js"></script> 
<script type="text/javascript" src="/js/application/directives/common/controls/ViewDropdownBoxData.js"></script> 
<script type="text/javascript" src="/js/application/directives/common/controls/DropdownBox.js"></script> 
<script type="text/javascript" src="/js/application/directives/common/others/AddressViewer.js"></script> 
<script type="text/javascript" src="/js/application/directives/common/others/AddressEditor.js"></script> 
<script type="text/javascript" src="/js/application/directives/common/media/ImageUploader.js"></script> 
<script type="text/javascript" src="/js/application/directives/common/media/ImageViewer.js"></script> 
<script type="text/javascript" src="/js/application/directives/common/media/ImageEditor.js"></script> 
<script type="text/javascript" src="/js/application/directives/common/media/VideoPlayer.js"></script> 
<script type="text/javascript" src="/js/application/directives/common/media/VideoUploader.js"></script> 
<script type="text/javascript" src="/js/application/directives/common/media/VideoViewer.js"></script> 
<script type="text/javascript" src="/js/application/directives/common/media/VideoEditor.js"></script> 
<script type="text/javascript" src="/js/application/directives/common/media/ContentUploader.js"></script> 
<script type="text/javascript" src="/js/application/directives/common/media/ContentViewer.js"></script> 
<script type="text/javascript" src="/js/application/directives/common/media/HTMLContentEditor.js"></script> 

<script type="text/javascript" src="/js/application/directives/common/others/ObjectTreeEditor.js"></script> 
<script type="text/javascript" src="/js/application/directives/common/others/ObjectArrayTreeEditor.js"></script> 
<script type="text/javascript" src="/js/application/directives/common/others/ObjectTreeViewer.js"></script> 
<script type="text/javascript" src="/js/application/directives/common/others/ObjectArrayTreeViewer.js"></script> 
<script type="text/javascript" src="/js/application/directives/common/others/ObjectViewer.js"></script> 
<script type="text/javascript" src="/js/application/directives/common/others/ObjectEditor.js"></script> 
<script type="text/javascript" src="/js/application/directives/common/others/ObjectArrayEditor.js"></script> 
<script type="text/javascript" src="/js/application/directives/common/others/ObjectArrayViewer.js"></script> 
<script type="text/javascript" src="/js/application/directives/common/others/ObjectFixedArrayEditor.js"></script> 
<script type="text/javascript" src="/js/application/directives/common/others/ObjectFixedArrayViewer.js"></script> 

請注意;因爲我在應用程序中有不同的看法，所以理想情況下我不需要加載所有的js文件。我知道這不是加載js文件的理想方式。但是我不知道什麼是正確的方法。我試圖探索require.js，common.js和browserify.js，但無法映射出此問題的最佳解決方案。

請建議加載與Angularjs視圖相關的js文件的正確方法，以允許瀏覽器只存放該視圖所需的js文件。

Answer 1

使用gulpjs烏拉圭回合項目任務運行[組合JS，少，CSS，HTML醜化&縮小，支持少，青菜，指南針，玉器，HAML，EJS編譯器]或咕嚕

Gulp或Grunt

Answer 2

使用延遲加載，在需要時加載js文件。

你可以退房：https://oclazyload.readme.io/docs

Answer 3

去年我用下面的方法時使用下列庫

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. 

以下是供你參考示例代碼需要它來加載JS/CSS /圖像。

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); 
    } 
}; 

儀表板的WebPack模塊（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（初Angularjs文件）

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