CODEWITHSUNDEEP
angularjsangular-ui-router
CodyBugstein
CodyBugstein

Reputation: 23302

Using $state in ui-router gives

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 = [
    ];
}

Upvotes: 1

Views: 228

Answers (4)

shailendra pathak
shailendra pathak

Reputation: 622

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.

Upvotes: 0

richardtz
richardtz

Reputation: 4993

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){

Upvotes: 1

Tomislav
Tomislav

Reputation: 3201

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"
    });
}

Upvotes: 1

shaunhusain
shaunhusain

Reputation: 19748

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).

Upvotes: 1

Related Questions