如何在 angular 中使用 stateprovider？

Question

尝试在 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');
});

我收到这个错误：

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

Answer 1

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

您无法在配置阶段访问 $state，$state 是 provider

从函数中删除 $state 将解决您的问题。

为了重新重定向到默认状态，我希望您使用 $urlRouterProvider 并在其中提及您的 URL，当 url 没有时，它将重定向到 /orders '匹配任何更有意义的state。

配置

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

Answer 2

在应用模块中使用.run

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

如何在 angular 中使用 stateprovider？

how to use stateprovider in angular?

javascript

angularjs

angular-ui

angularjs-routing

angular-ui-router