Using $state in ui-router gives - angularjs

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

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

Answer 2

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

Answer 3

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

Answer 4

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.