6

I'm trying to understand what's going on here. The warning is self explanatory, and I realize that in the app, with the code and structure I have below, it runs the ng-view twice ('test' will be logged twice in the console, so of course angular is loaded twice!)....but why?

I've read every post I could find about it, and it seems to boil down to jQuery being loaded before angular.

If I leave out jQuery or if I load jQuery after angualr (which isn't good practice from what I understand), no problem. I'd like to have jQuery to support some functionality (specifically ui-sortable). And, although it doesn't seem to be actually causing any problems, I'd like to not have it running my ng-view twice.

Am I doing something structurally wrong, or am I missing an obvious way to fix this?

Update: Plunker of the issue (check the console)

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: My simple content

Ben
  • 5,079
  • 2
  • 20
  • 26
  • 1
    What if you created a `div` inside of your `body` and put the `ng-view` on that, and then put your scripts outside of that `div`? – Tom Nov 20 '14 at 21:50
  • Could this be it? http://stackoverflow.com/questions/23765941/warning-tried-to-load-angular-more-than-once-when-i-include-jquery – Lauri Elias Nov 20 '14 at 21:50
  • @tom That prevents angular from being loaded twice, so it gets rid of the warning, but the root issue remains where it runs the ng-view twice :/ – Ben Nov 20 '14 at 21:54
  • Can we see the template simple.hmtl – Wawy Nov 20 '14 at 22:09
  • @Wawy All that's in it is that text, My simple content. As far as I've been able to tell the issue is the same regardless of what's actually in the template page – Ben Nov 20 '14 at 22:10
  • Can you create a plnkr with the issue? – Wawy Nov 20 '14 at 22:16
  • @Wawy Yep, plunker added – Ben Nov 20 '14 at 22:37
  • 2
    I don't see how having the scripts within the view wouldn't do this, but I guess it works without proper jQuery due to an oddity of jqLite: http://stackoverflow.com/a/18220411/1269466 – lossleader Nov 20 '14 at 22:39
  • 3
    Just take the scripts outside of the body and put them in the head and it works. Take into account that ng-view will replace the contents of your body with your template so you shouldn't put anything that could potentially cause an issue if it's taking off of your html. – Wawy Nov 20 '14 at 22:44
  • I guess that if you put your ng-view in the body tag, each angularjs loop will execute the scripts inside the body. Try doing
    So the view is in other scope of the place where scripts are executed     – Jorge Sainz Nov 20 '14 at 23:02

2 Answers2

8

Ok, to summarize the help from the comments:

If jQuery is included, any <script> tags included WITHIN an ng-view will be evaluated twice. (Thanks @lossleader!).

My incorrect assumption in testing was that it was processing the entire template content twice when I tried moving the ng-view off the body onto a <div> because I saw the log message twice. It wasn't!

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

So @Tom and @Wawy both had correct solutions. Either move the ng-view into a <div> or move the <script> tags into the <head> (outside of the ng-view).

Community
  • 1
  • 1
Ben
  • 5,079
  • 2
  • 20
  • 26
  • 1
    For me it was an incorrect view route, see: [this answere here](http://stackoverflow.com/questions/23765941/warning-tried-to-load-angular-more-than-once-when-i-include-jquery/#answer-27028147) – VeldMuijz Sep 16 '15 at 08:54
0

i have same issue, and i fix it by loading JQuery before i load AngularJS hope that works for you

Brahim Es-sabery
  • 1