Question

我正在使用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控制器没有定义。是否有任何其他方式，我可以加载所有控制器和服务，以便我可以提高应用程序的性能吗？

Answer 1

我认为这就是你要找的东西

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

Controller 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

角度加载控制器和服务

1 个答案: