i find the solution AngularJS and UI-Router: 'Error: transition superseded' during angularjs unit tests but this not work for me.
AngularJs version v1.6.1
Ui-routing Version v0.3.2
I solved it.
In my project, root state is login state if login is successful then it goes to admin.dashboard state, where admin state was an abstract state.
I used$state.transitionTo method instead of $state.go when transitioning to the admin.dashboard state.
I've also added on app.config section.
$qProvider.errorOnUnhandledRejections(false);
I updated to UI Router 1.0 beta 3. I've managed to update my Angular 1.5 app to use it, but Karma is giving me an error:
No coreservices implementation for UI-Router is loaded. You should include one of: ['angular1.js'
I've not been able to discover what's causing this or how to fix it.
It seems to be caused by a test that was mocking $location.
Now to find another way to spy on $location inside a run block.
I have been trying to follow the suggestions for running an angular app in production. However I have been struggling to disable the comment and css class directives:
$compileProvider.commentDirectivesEnabled(false);
$compileProvider.cssClassDirectivesEnabled(false);
When I try to add these commands to the config block I receive the error:
$compileProvider.commentDirectivesEnabled is not a function
The codepen below demonstrates my issue, if you comment out the two lines then the code runs without any problem:
http://codepen.io/anon/pen/RoaKbj?editors=1010
These two methods don't exist in the 1.5.8 version of angular that you're using.
They exist in the 1.6.0-rc.0 version though.
The angular tutorial switches back and forth between defining modules like this:
angular.module('appname', ['phonecatFilters','phonecatAnimations']).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
...
};*/
and like this:
var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatAnimations',
'phonecatControllers',
'phonecatFilters',
'phonecatServices'
]);
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
etc...
});
}]);
I am not able to get the animation module loaded in my already working app that defines them the first way. I get a "missing provider" error. Is this because I am mixing the methods of defining modules? It is not clear from their documentation and they also switch the entire app between one method and the next during the tutorial, which is frustrating. Thanks anyone!
Are you defining your app module twice?
angular.module('appname', ['phonecatFilters','phonecatAnimations'], ...
The injection should only happen once. Other calls should not use the [], as that will create a new module, replacing your previous.
Either approach is valid and it's unlikely to be the source of your problem. The first possibility that jumps to mind- make sure you've included animate as well. So something like the following (or linking from the CDN) should be in your index.html header.
<script src="angular-animate.js">
Or if that's not it, including your code here and ideally including a version that exhibits the problem on http://plnkr.co so we can all try it out is a big help.
The two different styles stem from javascript which supports each. There's the second approach you show of assigning your module to a variable and then extending it.
And it supports what's called chaining calls as in your first version (firstFunction().secondFunction().lastFunction(). This is especially popular with functional programmers as it fits that mindset/approach nicely.
The answer turned out to be that my version of Angular was 1.0. I was using the angular from the tutorial. I downloaded the working tutorial from the Git repository here: https://github.com/angular/angular-phonecat
and compared all of my files to that side by side. As soon as I upgraded my version to Angular 1.2 used in that demo it worked. There were some other changes I needed to make for the new version (like putting controller names in quotes), but now everything is working. Hope this helps someone else.
When I have an Angular directive that uses a controller I've been able to access the directive's scope in my tests by doing this:
element = angular.element('<my-directive></my-directive>');
element = $compile(element)($rootScope);
$rootScope.$digest();
scope = element.scope();
That enables me to set/get scope properties and directly call functions defined by the directive's controller.
However, as soon as I introduced jQuery to the project (required by another dependency I want to use) this stopped working. Specifically in the test element.scope() is returning undefined. Using dev tools I can see that this is not the case when the app is running for real – i.e. I can do $('.blah').scope() and get back a non-undefined value.
Anyone got an idea why this wouldn't work? I've added jQuery to my karma.conf.js (I'm using the Yeoman Angular generator) in the same order as it's included in the HTML file.
I found the problem. I'm running my tests in PhantomJS and was pulling in jQuery 2.0.3. Downgrading to jQuery 1.10.2 made everything work again. I'm kind of surprised that PhantomJS would have a compatibility issue but that seems to have been the problem.