角度ローディングコントローラとサービス

私は自分のアプリケーションにAngularjsを使用しています。私はすべてのpages.Thats yiに共通のヘッダーとフッターを共通の1つの共通のページを持っています。他のhtmlページに配置しています。角度ローディングコントローラとサービス

私は1つの共通のページを使用しています。私はすべてのコントローラと、アプリケーションで使用しているすべてのサービスをロードしています。ここで

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

ですインターネットは非常に遅いです。私はすべてのコントローラとサービスeverytime.Ifをロードする1つのページにすべてを配置しているので、私はそれぞれのhtmlでコントローラを配置し、ExamController.jsまたは任意の.jsコントローラのようなエラーが表示されます定義されていません。私はすべてのコントローラとサービスをロードできるので、アプリケーションのパフォーマンスを向上させることができます。

出典

2017-09-14 Sachin HR

使用連結、縮小化または遅延読み込み、あなたは罰金になります。真新しいことは、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では、すべてのコントローラを1つのhtmlファイルで読み込む代わりにすべて宣言する必要がありますか？ –

index.htmlにすべてのコントローラを定義し、app.jsで宣言する必要があります – Swanand

これは質問のコードよりもパフォーマンスが劣ります。多くのHTTPリクエスト=パフォーマンスが悪いコードも有効ではありません。 'ngRoute'を使用してもパフォーマンスの問題は解決しません。 – lin

角度ローディングコントローラとサービス

答えて

関連する問題