How to access the otherwise $ urlRouterProvider property in Angular UI Router

Question

Under certain circumstances, I would like to switch to the default state or "otherwise." Therefore, I need to get from the controller that otherwise the state is configured in the routing object.

When I try to enter $urlRouterProvidermy directives into the controller, I get an error message:

Error: [$ injector: unpr] Unknown provider: $ stateProviderProvider <- $ stateProvider <- bbvNavDirective

What am I doing wrong?

Code example:

.config([ '$stateProvider', '$urlRouterProvider', '$locationProvider', ( $stateProvider, $urlRouterProvider, $locationProvider ) => {

    $locationProvider.html5Mode(true);
    $urlRouterProvider.otherwise('/bbv/voorstellen/open');

    (...routing code)

}])

Directive

    .directive('bbvNav', [ '$state', ( $state ) => {
        return {
            restrict: 'E',
            template,
            scope: {
                titleBind: '&',
                onButtonClick: '&'
            },
            bindToController: true,
            controller: [ '$scope', function ( $scope ) {
                $state.go( <NAVIGATE TO URLROUTERPOVIDER.OTHERWISE> );
                console.log('Accessing $urlRouterProvider.otherwise state:'); // How do I get the value of $urlRouterProvider.otherwise here?
            }
        }
    })

Answer 1

. , , , , ...

CONSTANT

app.module('example').constant('defaultState','app.defaultState')

$urlprovider

CONFIG

$urlRouterProvider.otherwise(function ($injector, defaultState) {
    var $state = $injector.get('$state');
    $state.go(defaultState);
});

, , ...

.controller(defaultState){
   ... TODO ...
}

Answer 2

, , . :

.directive('bbvNav', [ '$stateProvider', '$urlRouterProvider', ( $state, $urlRouter ) => {
        return {
            restrict: 'E',
            template,
            scope: {
                titleBind: '&',
                onButtonClick: '&'
            },
            bindToController: true,
            controller: [ '$scope', function ( $scope ) {
                console.log('Accessing otherwise state:'); // How do I get the value of $urlRouterProvider.otherwise here?
            }
        }
    })

Answer 3

, . , :

angular.module('myApp', ['myApp.directive']);

, :

angular.module('ModuleName', [])   // creates a module.
angular.module('ModuleName')       // gets you a pre-existing module.

Answer 4

, , config...
///..., $route :

$route.current : {scope, params, templateUrl}

https://docs.angularjs.org/api/ngRoute/service/ $route

$routeChangeSuccess / $routeChangeStart

, , , " ", :)

Update

, , ui-router, "ngRoute", , . $urlRouterProvider.otherwise $state

:

(function(){
    // wrap to prevent user to interact with
    var urlProvider;
    app.config(["$urlProvider", function(provider){
        urlProvider = provider;
    }]);
    app.directive([...]{
        console.log(urlProvider); // log provider to see if you can access otherwise ( like $$otherwise ), due to otherwise is a function
    })
})();

Answer 5

Save state and stateParams in rootScope

 .run(function($rootScope, $state, $stateParams){
          $rootScope.$state = $state;
          $rootScope.$stateParams = $stateParams;
        })

Use $ state.go ("state-name") in the desired state

$rootScope.$state.go("state-name");

I tried to demonstrate with the following plunger

Description: Click State2 or State 3, and then click the Home button, one will be redirected to the home page.

demo for routing to the desired state