how to use stateprovider in angular?

Question

Trying to use a state router in angular:

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

app.controller('TabsDemoCtrl', function ($scope, $window) {

    $scope.tabs = [
        { title:'Orders', content:'Dynamic content 1' },
        { title:'Awaiting settlement', content:'Dynamic content 2' },
        { title:'Complete', content:'Dynamic content 3' }
    ];

});

app.config(function($stateProvider,$state) {
    // Now set up the states
    $stateProvider
        .state('orders', {
            templateUrl: '../partials/orders.html',
            controller: 'ordersCtrl'

        });

    $state.go('orders');
});

I am getting this error:

Uncaught Error: [$injector:modulerr] Failed to instantiate module WIP due to:
Error: [$injector:unpr] Unknown provider: $state

Pankaj Parkar · Answer 1 · 2015-07-29T06:24:17.590

provider are only accessible in config phase with Provider post-fix Like you want to access $state provider then it would be $stateProvider

You can not access $state in config phase, $state is provider

Removing $state from function will fix your issue.

For re redirecting to default state I'd prefer you to use $urlRouterProvider & mention your URL in that, that will redirect to /orders when url doesn't match any state which makes more sense.

Config

app.config(function($stateProvider, $urlRouterProvider) {
    // Now set up the states
    $stateProvider
        .state('orders', {
            url: '/order',//just for demonstration
            templateUrl: '../partials/orders.html',
            controller: 'ordersCtrl'
        });
    $urlRouterProvider.otherwise('/orders');
});

@Pindakaas could I ask why you don;t preferring `$urlRouterProvider`? — Pankaj Parkar, Jul 29 '15 at 07:01

score 0 · Accepted Answer · edited May 23 '17 at 11:51

Use .run in app module

Run blocks - get executed after the injector is created and are used to kickstart the application. Only instances and constants can be injected into run blocks. This is to prevent further system configuration during application run time.

Run blocks are the closest thing in Angular to the main method. A run block is the code which needs to run to kickstart the application. It is executed after all of the service have been configured and the injector has been created. Run blocks typically contain code which is hard to unit-test, and for this reason should be declared in isolated modules, so that they can be ignored in the unit-tests.

app.run(function($state) { 
    $state.go('orders');
});

app.config(function($stateProvider) {
  // Now set up the states
  $stateProvider
    .state('orders', {
       url : '/orders',
       templateUrl: '../partials/orders.html',
        controller: 'ordersCtrl'
   });
});

SEE MORE In SO

how to use stateprovider in angular?

2 Answers2