角加载控制器和服务

我正在使用Angularjs为我的应用程序。我有一个共同的页面，其中有页眉和页脚，这是我为所有页面所共有的。这就是我将它放在一个共同的html.Only内容代码我我正在放置在其他html页面。角加载控制器和服务

由于我使用的是一个普通页面，我正在加载所有控制器和我在应用程序中使用的所有服务。

这里是我的commonpage.html

<!DOCTYPE html> 
    <html lang="en" data-ng-app="adminApp"> 
    <head> 
    </head> 
    <body> 
    <!--Here is header code--> 
    <div class="LeftMenu"> 
    <ul class="navbar"> 
    <a href="#!/admindashboardhome" title="Dashboard"><li> 
    <span>Dashboard</span></li> 
    </a> 
    <a href="#!/examinationhalltickets" title="Declaration"><li> 
    <span>Examination Form</span></li> 
    </a> 
    <a href="#!/collegedetails" title="Declaration"><li>College 
    Details</li> 
    </a> 
    </ul> 
    </div> 
    <!--followed by footer code--> 
    <div data-ng-view> <!--ng-view--> 
    </div> 
    <!--Here i am loading all controllers and services related to application--> 
    <script 
    src="resources/angular/controller/admin/AdminExamController.js"> 
    </script> 
    <script src="resources/angular/service/admin/AdminExamService.js"> 
    </script> 
    <!-- And many more in same fashion--> 
    </body> 
    </html>

我遇到的疑问是，是否有必要把所有控制器和服务，如我这样做，因为我面对的性能问题，即使我已经连接到强互联网它加载速度非常缓慢。因为我把所有在一个页面中它每次加载所有控制器和服务。如果我把控制器放在它们各自的html中，那么我得到像ExamController.js或任何.js控制器没有定义的错误。任何其他方式，我可以加载所有的控制器和服务，以便我可以提高应用程序的性能？

来源

2017-09-14 Sachin HR

使用CONCAT，缩小或惰性加载，你会被罚款。全新的东西应该是直接在你的JavaScript代码中使用'./myJsFile.js'中的'import {myNamesspace} ... ......但我认为这在所有常用浏览器中都不被支持。 – lin

我觉得这是你找什么

app.js

/* Module Creation */ 
var app = angular.module ('adminApp', ['ngRoute']); 

app.config(['$routeProvider', '$controllerProvider', function($routeProvider, $controllerProvider){ 

/*Creating a more synthesized form of service of $ controllerProvider.register*/ 
app.registerCtrl = $controllerProvider.register; 

function loadScript(path) { 
    var result = $.Deferred(), 
    script = document.createElement("script"); 
    script.async = "async"; 
    script.type = "text/javascript"; 
    script.src = path; 
    script.onload = script.onreadystatechange = function (_, isAbort) { 
     if (!script.readyState || /loaded|complete/.test(script.readyState)) { 
     if (isAbort) 
      result.reject(); 
     else 
      result.resolve(); 
    } 
    }; 
    script.onerror = function() { result.reject(); }; 
    document.querySelector("head").appendChild(script); 
    return result.promise(); 
} 

function loader(arrayName){ 

    return { 
     load: function($q){ 
       var deferred = $q.defer(), 
       map = arrayName.map(function(name) { 
        return loadScript(name+".js"); 
       }); 

       $q.all(map).then(function(r){ 
        deferred.resolve(); 
       }); 

       return deferred.promise; 
     } 
    }; 
} 

$routeProvider 
    .when('/view2', { 
     templateUrl: 'view2.html', 
     resolve: loader(['Controller2']) 
    }) 
    .when('/bar',{ 
     templateUrl: 'view1.html', 
     resolve: loader(['Controller1']) 
    }) 
    .otherwise({ 
     redirectTo: document.location.pathname 
    }); 
}]);

的index.html

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.min.js"></script>  
    </head> 
    <body ng-app="adminApp"> 
    <!--Here is header code--> 
    <div class="LeftMenu"> 
    <ul class="navbar"> 
    <a href="#!/admindashboardhome" title="Dashboard"><li> 
    <span>Dashboard</span></li> 
    </a> 
    <a href="#!/examinationhalltickets" title="Declaration"><li> 
    <span>Examination Form</span></li> 
    </a> 
    <a href="#!/collegedetails" title="Declaration"><li>College 
    Details</li> 
    </a> 
    </ul> 
    </div> 
    <!--followed by footer code--> 
    <div data-ng-view> <!--ng-view--> 
    </div> 
    <!--Here i am loading all controllers and services related to application--> 
    <script 
    src="app.js"> 

    </script> 
    <!-- And many more in same fashion--> 
    </body> 
    </html>

控制器1.js

(function(val){ 
    'use strict'; 

    angular.module('Controller1App', []) 
    .controller('Controller1', ['$http','$rootScope','$scope','$window', function($http,$rootScope, $scope, $window){  

     //Your code goes here 

    }]) 


})(this);

控制器2.js

(function(val){ 
    'use strict'; 

    angular.module('Controller2App', []) 
    .controller('Controller2', ['$http','$rootScope','$scope','$window', function($http,$rootScope, $scope, $window){  

     //Your code goes here 

    }]) 


})(this);

参考https://plnkr.co/edit/cgkgG5PCwJBVOhQ1KDW2?p=preview

来源

2017-09-14 12:26:03 Swanand

所以在app.js我需要声明所有的控制器，而不是加载所有在一个HTML文件？ –

您必须在index.html中定义所有控制器，然后在app.js中声明 – Swanand

这比性能代码缺少更多的性能。许多HTTP请求=糟糕的表现。该代码也是无效的。使用'ngRoute'不能解决性能问题。 – lin

角加载控制器和服务

回答

相关问题