2016-06-30 7 views
0

私のプロジェクトでこの警告が表示されています。これは、私のバックエンドのAPIを呼び出す際に問題を引き起こしています。私はフォーラムでこの同じ質問に関して前に投稿された解決策を試しましたが、私はこれを乗り越えることができません。もし誰かが私を助けてくれたら大丈夫だろう。以下はapp.jsとindex.htmlファイルです。あなたのコードで警告:ページの読み込み中に角を複数回ロードしようとしました

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Qwinix Aptitude Test</title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width"> 
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> 
    <!-- build:css(.) styles/vendor.css --> 
    <!-- bower:css --> 
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" /> 
    <!-- endbower --> 
    <!-- endbuild --> 
    <!-- build:css(.tmp) styles/main.css --> 
    <link rel="stylesheet" href="styles/styles.css"> 
    <link rel="stylesheet" type="text/css" href="styles/question/normalize.css" /> 
    <link rel="stylesheet" type="text/css" href="styles/question/demo.css" /> 
    <link rel="stylesheet" type="text/css" href="styles/question/component.css" /> 
    <!-- <link rel="stylesheet" type="text/css" href="bower_components/font-awesome/css/font-awesome.min.css" /> --> 
    <!-- <link rel="stylesheet" type="text/css" href="bower_components/semantic/dist/semantic.css"> --> 
    <link rel="stylesheet" type="text/css" href="styles/scss/style.scss"> 
    <!-- <link rel="stylesheet" type="text/css" href="components/angular-ui/build/angular-ui.css"> --> 

    <!-- endbuild --> 
</head> 

<body data-ng-view="" ng-app="onlineTestAngularApp"> 
    <!-- build:js(.) scripts/vendor.js --> 
    <!-- bower:js --> 
    <script src="bower_components/jquery/dist/jquery.js"></script> 
    <script src="bower_components/angular/angular.js"></script> 
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script> 
    <script src="bower_components/angular-animate/angular-animate.js"></script> 
    <script src="bower_components/angular-aria/angular-aria.js"></script> 
    <script src="bower_components/angular-cookies/angular-cookies.js"></script> 
    <script src="bower_components/angular-messages/angular-messages.js"></script> 
    <script src="bower_components/angular-resource/angular-resource.js"></script> 
    <script src="bower_components/angular-route/angular-route.js"></script> 
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script> 
    <script src="bower_components/angular-touch/angular-touch.js"></script> 
    <script src="bower_components/angular-local-storage/dist/angular-local-storage.js"></script> 
    <script src="bower_components/moment/moment.js"></script> 
    <script src="bower_components/humanize-duration/humanize-duration.js"></script> 
    <script src="bower_components/angular-timer/dist/angular-timer.js"></script> 
    <script src="bower_components/semantic/dist/semantic.js"></script> 
    <script src="bower_components/angular-fontawesome/dist/angular-fontawesome.js"></script> 
    <script src="bower_components/angular-drag-and-drop-lists/angular-drag-and-drop-lists.js"></script> 
    <!-- endbower --> 
    <!-- endbuild --> 

    <!-- build:js({.tmp,app}) scripts/scripts.js --> 
    <script src="scripts/app.js"></script> 
    <script src="scripts/config.js"></script> 
    <script src="scripts/controllers/main.js"></script> 
    <script src="scripts/controllers/about.js"></script> 
    <script src="scripts/controllers/registration.js"></script> 
    <script src="scripts/services/registration.js"></script> 
    <script src="scripts/controllers/question.js"></script> 
    <script src="scripts/controllers/feedback.js"></script> 
    <script src="scripts/services/feedback.js"></script> 
    <script src="scripts/services/question.js"></script> 
    <script src="scripts/controllers/index.js"></script> 
    <script src="scripts/controllers/instruction.js"></script> 
    <script src="scripts/services/admin.js"></script> 
    <script src="scripts/controllers/admin.js"></script> 
    <script src="scripts/my_jquery.ui.js"></script> 
    <script src="scripts/lib/angular-timer.js"></script> 
    <!-- endbuild --> 
</body> 
</html> 

'use strict'; 
 

 
/** 
 
* @ngdoc overview 
 
* @name onlineTestAngularApp 
 
* @description 
 
* # onlineTestAngularApp 
 
* 
 
* Main module of the application. 
 
*/ 
 
angular 
 
    .module('onlineTestAngularApp', [ 
 
    'ngAnimate', 
 
    'ngAria', 
 
    'ngCookies', 
 
    'ngMessages', 
 
    'ngResource', 
 
    'ngRoute', 
 
    'ngSanitize', 
 
    'ngTouch', 
 
    'LocalStorageModule', 
 
    'config', 
 
    'timer' 
 
    ]) 
 
    .config(function ($routeProvider) { 
 
    $routeProvider 
 
     .when('/', { 
 
     templateUrl: 'views/registration.html', 
 
     controller: 'registrationCtrl', 
 
     controllerAs: 'registration' 
 
     }) 
 
     .when('/instruction', { 
 
     templateUrl: 'views/instruction.html', 
 
     controller: 'instructionCtrl', 
 
     controllerAs: 'instruction' 
 
     }) 
 
     .when('/question', { 
 
     templateUrl: 'views/question.html', 
 
     controller: 'questionCtrl', 
 
     controllerAs: 'question' 
 
     }) 
 
     .when('/feedback', { 
 
     templateUrl: 'views/feedback.html', 
 
     controller: 'feedbackCtrl', 
 
     controllerAs: 'feedback' 
 
     }) 
 
     .when('/admin', { 
 
     templateUrl: 'views/admin.html', 
 
     controller: 'adminCtrl', 
 
     controllerAs: 'admin' 
 
     }) 
 
     .otherwise({ 
 
     redirectTo: '/' 
 
     }); 
 
    });

+0

'angular-timer.js'という2つの異なるスクリプトを含めるつもりでしたか? – jbrown

+0

@jbrownは彼のように見えますが、私は彼のエラーの原因とは考えていません....?それは...ですか? – trickpatty

+0

@PatrickLawler - 私は分かりませんが、それは答えに対する試行ではなく、一般的なコメントでした。 – jbrown

答えて

0

また、あなたのコントローラモジュールを初期化しているかどうかをチェック..

あなたはグローバル名前空間に(任意の変数で作成したモジュールを格納していません)。これはアプリを2回初期化します

angualr.module('app',[]).controller('ctrl',function(){});

下のようにそれを連鎖その後、あなたはモジュール自体にすべてを連鎖しているので、あなたが最初のモジュールを作成しているあなたのコントローラを作成しながら、チャンスはあると。

これを避けるには、app.jsで作成したモジュールを変数に格納し、その変数を使用してコントローラを作成します。

OR

あなたは、連鎖使用して作成することを選択した場合angualr.module('app').controller('ctrl',function(){});

以下

などのモジュールからコントローラを作成中に[]角度最初に検索を使用せずにモジュールを作成する場合は、単に[]を省略似たような名前を持つモジュールの場合は、そのモジュールを使用するモジュールが見つかった場合にのみ、モジュールを作成します。

+0

うん。私の答えを取り除く、これらのような音はあなたのための非常に可能性の高いシナリオです@PraveenMenon – trickpatty

0

私はなぜこのことが起こっているのか分かりませんが、いつ起こるのでしょうか?angular.jsファイルが複数回呼び出されたときに、私たちはthis.some時間を得るでしょう。または、angle.js file.pleaseチェックを再度呼び出すと、これを取り除くことになります。

0

jQueryがAngularより前のスクリプト参照に含まれている場合、「警告:複数回角を読み込もうとしました」というメッセージが表示されています。スクリプトの内容を変更し直すと、問題は解決します。

問題を再現した例。あなたは、トップjQueryの参照をコメントし、下の1のコメントを外すことで、解像度を見ることができます:

'use strict'; 
 

 
    /** 
 
    * @ngdoc overview 
 
    * @name onlineTestAngularApp 
 
    * @description 
 
    * # onlineTestAngularApp 
 
    * 
 
    * Main module of the application. 
 
    */ 
 
    angular.module('onlineTestAngularApp', [ 
 
     'ngRoute' 
 
    ]) 
 
    .config(function($routeProvider) { 
 
     $routeProvider 
 
     .when('/', { 
 
      template: '<h3>Test Angular App</h3><a ng-href="#/instruction">{{home.linkText}}</a>', 
 
      controller: 'homeCtrl', 
 
      controllerAs: 'home' 
 
     }) 
 
     .when('/instruction', { 
 
      template: '<h3>Instruction Route</h3><a ng-href="#/">{{ins.linkText}}</a>', 
 
      controller: 'instructionCtrl', 
 
      controllerAs: 'ins' 
 
     }) 
 
     .otherwise({ 
 
      redirectTo: '/' 
 
     }); 
 
    }); 
 

 
    angular.module('onlineTestAngularApp') 
 
    .controller('homeCtrl', homeCtrl) 
 
    .controller('instructionCtrl', instructionCtrl); 
 

 
    homeCtrl.$inject = ['$log']; 
 

 
    function homeCtrl($log) { 
 
    var vm = this; 
 
    vm.linkText = "Link to Instruction Page"; 
 
    $log.debug(vm); 
 
    } 
 

 
    instructionCtrl.$inject = ['$log']; 
 

 
    function instructionCtrl($log) { 
 
    var vm = this; 
 
    vm.linkText = "Home Link"; 
 
    $log.debug(vm); 
 
    }
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    
 
</head> 
 
<body data-ng-view="" ng-app="onlineTestAngularApp"> 
 
    <!-- jQuery here causes "WARNING: Tried to load angular more than once" 
 
     Comment this reference out and uncomment the one below to see the difference 
 
    --> 
 
    <!-- --> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> 
 
    <script src="https://code.angularjs.org/1.4.9/angular.js"></script> 
 
    <!-- jQuery referenced AFTER Angular resolves issue with warning message 
 
     UNCOMMENT this one --> 
 
    <!-- 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js></script> 
 
    --> 
 

 
    <script src="https://code.angularjs.org/1.4.9/angular-route.js"></script> 
 

 
</body> 
 

 
</html>

0

templateUrlが空の文字列に設定し、他のテンプレートが上に定義されなかったとき、私はこのエラーを得ました以下に示すようにネストされたstate

app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.otherwise('/'); 
    $stateProvider 
    .state('main', { 
     abstract: true, 
     url: '', 
     templateUrl: '/app/main/wrapper.html' 
    }) 
    .state('main.welcome', { 
     controller: '', 
     templateUrl: '', // Causes WARNING: Tried to load angular more than once. 
     url: '/' 
    }); 
}]); 

私はもはや温暖化を受けていないテンプレートパスへ'main.welcome'templateUrlを変更した後。

.state('main.welcome', { 
    controller: '', 
    templateUrl: '/app/main/welcome.html', 
    url: '/' 
}); 
関連する問題