//write a unit test
describe('state changes', function() {
beforeEach(module('app'));
var $rootScope, $state;
beforeEach(inject(function(_$rootScope_, _$state_) {
// The injector unwraps the underscores (_) from around the parameter names when matching
$rootScope = _$rootScope_;
$state = _$state_;
}));
it('loads page 1', function(done) {
//wait for the state to change, then make sure we changed to the correct state
$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
expect(toState.controller).toEqual('Controller1');
done();
});
//navigate to the state
$state.go('state1');
//start a digest cycle so ui-router will navigate
$rootScope.$apply();
});
it('loads page 2', function(done) {
//wait for the state to change, then make sure we changed to the correct state
$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
expect(toState.controller).toEqual('Controller2');
done();
});
//navigate to the state
$state.go('state2');
//start a digest cycle so ui-router will navigate
$rootScope.$apply();
});
it('loads page 3', function(done) {
//wait for the state to change, then make sure we changed to the correct state
$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
expect(toState.controller).toEqual('Controller3');
done();
});
//navigate to the state
$state.go('state3');
//start a digest cycle so ui-router will navigate
$rootScope.$apply();
});
});
//set up some dummy controllers and some dummy states
angular.module('app', ['ui.router']).controller('Controller1', function() {
this.message = 'Page 1';
}).controller('Controller2', function() {
this.message = 'Page 2';
}).controller('Controller3', function() {
this.message = 'Page 3';
}).config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/state1");
$stateProvider.state('state1', {
url: "/state1",
controller: 'Controller1',
controllerAs: 'vm',
template: '<h1>{{vm.message}}</h1>'
}).state('state2', {
url: "/state2",
controller: 'Controller2',
controllerAs: 'vm',
template: '<h2>{{vm.message}}</h2>'
}).state('state3', {
url: "/state3",
controller: 'Controller3',
controllerAs: 'vm',
template: '<h3>{{vm.message}}</h3>'
});
});
h1 {
color: red;
}
h2 {
color: blue;
}
h3 {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="
https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<link rel="stylesheet" type="text/css" href="http://jasmine.github.io/2.0/lib/jasmine.css">
<script src="http://jasmine.github.io/2.0/lib/jasmine.js"></script>
<script src="http://jasmine.github.io/2.0/lib/jasmine-html.js"></script>
<script src="http://jasmine.github.io/2.0/lib/boot.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-mocks.js"></script>
<div ng-app="app">
<a ui-sref="state1">State 1</a>
<a ui-sref="state2">State 2</a>
<a ui-sref="state3">State 3</a>
<div ui-view></div>
</div>
Per favore, puoi essere più chiaro, se è possibile fornire un codice demo o qualsiasi esempio, sarà un ottimo aiuto – shreyansh