Tried to Load Angular More Than Once
This could be a number of issues: essentially it's a problem of routeProvider not finding a file and recursively loading the default.
For me, it turned out that it wasn't minification but concatenation of the js that caused the problems.
angular.module('myApp').config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/listing.html',
controller: 'ListingCtrl'
})
.otherwise({
redirectTo: '/'
});
}]).constant('FIREBASE_URL', 'something');
You'll notice that if the app can't find a file (i.e., otherwise), then it will redirect to the root, which in this case loads the templateUrl. But if your templateUrl is wrong, then it will cause a recursion that reloads index.html loading angular (and everything else) over and over.
In my case, grunt-concat caused the templateUrl to be wrong after build, but not before.
WARNING: Tried to load angular more than once. when I include JQuery
After long hours of testing... it ended up being that on my index.html file I had a
<ui-view />
to be used by angular ui router and replacing it to this, did the trick.
<ui-view></ui-view>
WARNING: Tried to load angular more than once.' Karma warning
If combined.bower.js includes angular and angular-mocks bower packages (as file name says), these lines
'app/bower_components/angular/angular.js',
'app/bower_components/angular-mocks/angular-mocks.js',
should be omitted.
Tried to load angular more than once warning - Only on initial page load
I finally got this issue resolved. This is NOT an issue with Angular JS (or just Angular JS).
I removed all the Angular JS code and I was still getting the warning. The issue was with Turbolinks.
I believe there are 2 solutions.
Solution 1 - Remove Turbolinks
I removed Turbolinks from my Layout's page's JS reference and restarted the server and everything seemed to work fine.
Here is how my javascript references looks like -
jquery
jquery-ujs
jquery-ui
angular
foundation
If you're not really using Turbolinks, you might as remove it.
Solution 2 - Add data-no-turbolink attribute
I came across this thread - Using angularjs with turbolinks
But apparently, the marked answer did't seem to work for me.
As one of the comments pointed out, it works for angular-1.0.6 and less.
Although, one of the answers suggested to add data-no-turbolink attribute to tag where you specify ng-app. This worked like a charm.
My version of Angular is 1.4.8
So, here is how my Angular template looks like now -
<body ng-app="test" data-no-turbolink>
<div ng-controller="TestController">
<div ng-init="items = <%= items.to_json %>">
<div ng-repeat="item in items">
<p ng-bind="item"></p>
</div>
</div>
</div>
</body>
Hopefully this helps someone.
Tried to load angular more than once on ionic
ionic.bundle.js is a concatenation of:
- ionic.js,
- angular.js,
- angular-animate.js
- angular-sanitize.js,
- angular-ui-router.js
- ionic-angular.js
and your app.js should be
var app = angular.module('ionicApp', [ 'ionic' ])
app.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url : "/tab",
abstract : true,
templateUrl : "templates/tabs.html",
controller : 'dashboardCtrl'
})
// Each tab has its own nav history stack:
.state('tab.overview', {
url : '/overview',
views : {
'tab-overview' : {
templateUrl : 'templates/tab-overview.html',
//controller : 'overviewCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/overview');
})
Related Topics
Lodash Remove Duplicates from Array
Getting How Many People Are in a Chat Room in Socket.Io
Converting JSON Results to a Date
When to Use the Double Not (!!) Operator in JavaScript
Detect When User Accepts to Download a File
Create a File Using JavaScript in Chrome on Client Side
How to Scroll the Window Using Jquery $.Scrollto() Function
Does Execcommand Saveas Work in Firefox
Unsigned Integer in JavaScript
How Is a Promise/Defer Library Implemented
How to Split a String into an Array of Characters
Downloading Canvas Element to an Image
Convert an Image into Binary Data in JavaScript
JavaScript Fuzzy Search That Makes Sense