Using $state in ui-router gives

Question

This one is baffling; I'm trying to use the simple $state.go() function in my app which uses ui-router, but I get this:

Uncaught Error: [$injector:modulerr] Failed to instantiate module MainApp due to:
Error: [$injector:modulerr] Failed to instantiate module GroupApp due to:
Error: [$injector:unpr] Unknown provider: $state
http://errors.angularjs.org/1.4.3/$injector/unpr?p0=%24state
    at REGEX_STRING_REGEXP

Here is the code I am using:

var app = angular.module('GroupApp', ['ui.router']);

groupjs_config.$inject = ['$stateProvider', '$state', '$urlRouterProvider'];
app.config(groupjs_config);

groupjs_controller.$inject = ['$scope'];
app.controller('groupjs.ctrl', groupjs_controller);

//----------------------------------------------------
//  FUNCTIONS
//----------------------------------------------------

function groupjs_config($stateProvider, $state, $urlRouterProvider){
    // For any unmatched url, redirect to /state1

    $stateProvider
    .state('group', {
      abstract: true,
      url: "/group/:groupid",
      onEnter: function(){
        if (true){ //logged in
          $state.go('group.home');
        }
        else {
          $state.go('group.noaccess');
        }
      }
    })
    .state('group.home', {
      url: "/group/:groupid",
      templateUrl: "groups/group/group.html"
    })
    .state('group.noaccess', {
      url: "/group/:groupid",
      templateUrl: "groups/group/group_noaccess.html"
    });
}

function groupjs_controller($scope){
    $scope.hi = "hi";
    $.material.checkbox('mycheckbox');

    $scope.groups = [
    ];
}

Remove $state from your $inject. It is not provider. For route configuration you only need $stateProvider and $urlRouterProvider — Tomislav, Aug 07 '15 at 07:24

score 1 · Answer 1 · answered Aug 07 '15 at 07:32

Only providers and constants can be injected into config blocks see the table at the bottom of https://docs.angularjs.org/guide/providers

The $state can be injected into the controller, or any filter, factory, service, run block etc. but just not in config. In order for anything but a provider to be created it must first have been configured (this is what the config blocks are for, configuring providers of services/factories/values).

richardtz · Accepted Answer · 2015-08-08T14:29:52.220

1

Try injecting the $state to the onEnter method :

  onEnter: ['$state',function($state){
    if (true){ //logged in
      $state.go('group.home');
    }
    else {
      $state.go('group.noaccess');
    }
  }]

and take it out from the config:

groupjs_config.$inject = ['$stateProvider', '$urlRouterProvider'];

...

function groupjs_config($stateProvider, $urlRouterProvider){

edited Aug 08 '15 at 14:29

answered Aug 07 '15 at 07:35

richardtz

4,993
2
27
38

It is mainly due to the fact that $state is a service, not a provider. And you cannot inject services in your config. Check this answer : http://stackoverflow.com/a/15287041/1393360 – richardtz Aug 07 '15 at 14:33

score 1 · Answer 3 · answered Aug 07 '15 at 07:36

First change this line:

groupjs_config.$inject = ['$stateProvider', '$state', '$urlRouterProvider'];

to:

groupjs_config.$inject = ['$stateProvider', '$urlRouterProvider'];

Change your routing function like this:

function groupjs_config($stateProvider, $urlRouterProvider){
    // For any unmatched url, redirect to /state1

    $stateProvider
    .state('group', {
      abstract: true,
      url: "/group/:groupid",
      onEnter: ['$state',function($state){
        if (true){ //logged in
          $state.go('group.home');
        }
        else {
          $state.go('group.noaccess');
        }
      }]
    })
    .state('group.home', {
      url: "/group/:groupid",
      templateUrl: "groups/group/group.html"
    })
    .state('group.noaccess', {
      url: "/group/:groupid",
      templateUrl: "groups/group/group_noaccess.html"
    });
}

score 0 · Answer 4 · answered Aug 13 '15 at 18:12

ui-router

$stateProvider
      .state('admin', {
        abstract: true,
        url: '/admin',
        template: '<div ui-view></div>'
      })
      .state('admin.index', {
        url: '/index',
        template: '<h3>Admin index</h3>'
      })
      .state('admin.users', {
        url: '/users',
        template: '<ul>...</ul>'
      });

onEnter, onExit

Our app calls these callbacks when we transition into or out of a view. For both options, we can set a function we want called; these functions have access to the resolved data.

These callbacks give us the ability to trigger an action on a new view or before we head out to another state. It’s a good way to launch an “Are you sure?” modal view or request the user log in before they head into this state.

Using $state in ui-router gives

4 Answers4