警告：尝试在页面加载期间多次加载角度

时间：2016-06-30 14:49:47

标签： javascript jquery angularjs

我在其中一个项目中收到此警告。这会在调用我的后端api时引起问题，因为它正在调用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: '/'
      });
  });

4 个答案:

答案 0 :(得分：0)

检查您是否已在控制器中初始化模块..

在您的代码中，您不存储在任何变量中创建的模块（在全局命名空间中）。您正在将所有内容链接到模块本身，因此创建控制器时有可能首先创建模块然后将其链接到下面

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

这会将应用初始化两次。

为避免这种情况，您可以将app.js中创建的模块存储在变量中，然后使用该变量创建控制器。

OR

如果您选择使用链接创建它们，那么只需从模块创建控制器时省略[]

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

如果您创建一个模块而不使用[]角度优先搜索具有相似名称的模块，如果它找到一个模块，它只使用该模块，否则创建一个。

答案 1 :(得分：0)

我不知道为什么会发生这种情况，但我知道什么时候会发生，当这个angular.js文件多次调用时，我们得到这个。有些时候它可能会因为调用其他js文件代表或者重新调用angular.js文件。请以这种方式检查，确定你会摆脱它。

答案 2 :(得分：0)

在Angular之前的脚本引用中包含jQuery时，我看到了“警告：尝试多次加载角度”消息。如果您重新订购脚本包含，则问题应该解决。

显示再现问题的示例。您可以通过注释顶部jQuery引用并取消注释底部的引用来查看分辨率：

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

答案 3 :(得分：0)

当我的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: '/' }); 更改为模板路径后，我不再收到变暖。

>ant -f build.xml
相关问题
最新问题