TOGOUTECH

javascript - 警告 : Tried to load angular more than once. ..因为 jQuery...为什么？

coder 2024-12-09 原文

我想了解这里发生了什么。警告是不言自明的，我意识到在应用程序中，使用下面的代码和结构，它会运行 ng-view 两次('test' 将在控制台中记录两次，所以 Angular 当然会加载两次! )....但为什么？

我已经阅读了所有我能找到的关于它的帖子，它似乎归结为在 angular 之前加载 jQuery。

如果我遗漏了 jQuery 或者如果我在 angualr 之后加载 jQuery(据我所知这不是好的做法)，没问题。我想让 jQuery 支持某些功能(特别是 ui-sortable )。而且，虽然它似乎并没有真正引起任何问题，但我不想让它运行我的 ng-view 两次。

我是不是在结构上做错了什么，或者我是否缺少解决此问题的明显方法？

更新: Plunker of the issue (查看控制台)

index.html:

<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Site Title</title>

</head>

<body ng-view>
<script type="text/javascript">
    console.log('test')
</script>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js"></script>
    <script type="text/javascript" src="app_simple.js"></script>
</body>
</html>

app_simple.js:

'use strict';

/**
 * Configure client module
 */
var myApp = angular.module('myApp', 
    [
      'ngRoute'
    ]);

myApp.config(function ($routeProvider) {
  $routeProvider
    .when('/simple', {
      templateUrl: 'components/simple/simple.html',
      controller: 'SimpleCtrl'
    })
    .otherwise({
        redirectTo: '/x'
    })
});

myApp.controller('SimpleCtrl', ['$scope', '$log', '$http', function($scope, $log, $http){

}]);

simple.html: 我的简单内容

最佳答案

好的，总结一下评论的帮助:

如果包含 jQuery，任何 script> 标签 included WITHIN an ng-view will be evaluated twice . (感谢@lossleader!)。

我在测试中的错误假设是，当我尝试将 ng-view 从 body 移到 div> 时，它正在处理整个模板内容两次，因为我看到了两次日志消息。它不是!

<body>
<div ng-view>
<script>console.log('duplicated if jQuery');</script>
</div>
</body>

所以@Tom 和@Wawy 都有正确的解决方案。将 ng-view 移动到 div> 或将 script> 标签移动到 head>(在 ng-查看)。

关于javascript - 警告 : Tried to load angular more than once. ..因为 jQuery...为什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27050158/

javascriptangularscript34gtjqueryangularjs

有关javascript - 警告 : Tried to load angular more than once. ..因为 jQuery...为什么？的更多相关文章

  1. javascript - 如何使用 ng-table 进行服务器端分页？ - 2

    我的代码是$scope.loadQuestions=function(){$scope.questionCount=0;$scope.questionTable=newNgTableParams({count:[]},{total:19387,getData:function($defer,params){$scope.filter.sort=params.orderBy();$scope.filter.page=params.page();return$http.get("/api/questions",{params:$scope.filter}).then(function(re

  2. javascript - 获取所有已声明模块导入的列表 (SystemJS) - 2

    我正在使用jspm和SystemJS导入ES2015模块。是否可以通过System对象或其他任何地方获取项目中所有导入模块的列表？我可以通过System._loader.moduleRecords访问我的项目特定模块，但是我通过jspm安装的模块(例如，d3、jquery)不会出现在这个列表中。System._loader.modules包含所有模块的列表，但遗憾的是还包含转译我的代码和模块加载包所需的模块列表。System._loader.moduleRecords(项目模块)System._loader.modules(项目模块、库、转译包)我只想要一个已声明导入的列表，特别是那些

  3. javascript - Chrome 扩展的 Manifest.json 中的自定义值？ - 2

    是否允许将自定义值保存在Chrome扩展的manifest.json中？因为是json，所以我想在manifest.json中保存一些信息，特别是因为ChromeAPI可以用于Opera，我需要一些区分数据。如果manifest.json中有任何自定义数据，Chrome商店会提示吗？ 最佳答案 不，不允许在Chrome扩展manifest.json文件中使用自定义值。您可以引用下面给出的链接。@约翰https://developer.chrome.com/extensions/manifest您只能在manifest.json中使用

  4. javascript转到带有unicode字符的url - 2

    我有一个包含这些url的数组:["path/to/url1","path/to/url2","path/url/unicóde.txt"]我正在使用angular，通过ng-repeat我创建了一个可点击的列表，该列表执行重定向到所需的url，但是，当我点击unicodeurl时，浏览器无法找到它。我尝试使用encodeURI("path/url/unicóde")，但它检索到的是:path/url/unic%C3%B3de.txt未找到。相反，当我手动访问时:path/url/unicóde.txt(这是在ftp中，因此，我逐个文件夹直到到达文件)浏览器中的url现在说:path/u

  5. javascript - 为什么我的 Ice Candidate 请求触发了 6 次而不是 1 次？ - 2

    我正在使用WebRTC编写我的第一个点对点连接应用程序，我通过socket.io连接发送的用于从对等点请求icecandidate的代码触发了6次而不是一次。这真的很令人困惑，因为如果我错误地设计了一个大请求循环，我会期望无限递归，而不仅仅是6(8个onicecandidate事件)。那么谁能告诉我为什么下面的代码会产生6个递归？这里是消息处理程序，它只是发送一条由语法控制的socket.io消息:Muveoo.Messenger.input('icecandidaterequest',data);'icecandidaterequest':function(data){console

  6. javascript - 如何从 asar 存档提供静态文件 - 2

    我正在尝试构建一个带有服务器组件的Electron应用程序，使用express进行远程控制。express模块初始化为varstaticPath=path.resolve('app/assets')setupNotifications(server);app.use(cors());app.use('/api/',json());app.use('/api/',router);app.use('/assets',express.static(staticPath));console.log('servingstaticfilesfrom:'+staticPath);Elecrondoc

  7. javascript - 如何使用 Node js 和 babel 保留正确的行号 - 2

    我有以下设置并且我的错误/堆栈跟踪有问题我是否遗漏了什么？package.json看起来像:{"name":"xxxxxx","main":"server.js","private":true,"scripts":{"start":"nodemon--exec./node_modules/.bin/babel-nodeserver.js"},"dependencies":{"babel":"^6.5.2","babel-cli":"^6.6.5","babel-preset-es2015":"^6.6.0","babel-preset-react":"^6.5.0","babel-pr

  8. javascript - 已知的 JavaScript 指令 - 2

    ECMAScript规范定义了UseStrictDirective，但允许实现定义自己的指令。来自here:ImplementationsmaydefineimplementationspecificmeaningsforExpressionStatementproductionswhicharenotaUseStrictDirectiveandwhichoccurinaDirectivePrologue.什么是已知的特定于实现的指令？在Google上快速搜索一下，除了usestrict什么也没有。我能想到useasm和usestrong.还有其他的在用吗？

  9. javascript - 谷歌浏览器导航器在线始终为真 - 2

    基于mozilla开发者网络https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine它说Returnstheonlinestatusofthebrowser.Thepropertyreturnsabooleanvalue,withtruemeaningonlineandfalsemeaningoffline.Thepropertysendsupdateswheneverthebrowser'sabilitytoconnecttothenetworkchanges.Theupdateoccurswhen

  10. javascript - 如何使用 nodemailer 和电子邮件模板发送消息？ - 2

    我尝试使用nodemailer和电子邮件模板发送电子邮件。现在我从这里exampleemailtemplates得到了例子。但是当我检查这段代码时，出现错误apromisewasrejectedwithanon-error:[objectUndefined]请帮帮我。这是我的代码varnodemailer=require('nodemailer');varEmailTemplate=require('email-templates').EmailTemplate;exports.sendOne=function(){vartemplatesDir=config.templatesDir

随机推荐