如何在角度中使用 stateprovider？答案

【问题标题】：how to use stateprovider in angular?如何在角度中使用 stateprovider？
【发布时间】：2015-10-19 23:04:42
【问题描述】：

尝试在 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

【问题讨论】：

标签： javascript angularjs angular-ui-router angular-ui angularjs-routing

【解决方案1】：

在应用模块中使用.run

运行块 - 在注入器创建并使用后执行启动应用程序。只有实例和常量可以注入运行块。这是为了防止进一步的系统在应用程序运行时进行配置。

Run 块是 Angular 中最接近 main 方法的东西。一次跑步 block 是启动应用程序需要运行的代码。它在所有服务都已配置并且注射器已创建。运行块通常包含以下代码难以进行单元测试，因此应该单独声明模块，以便在单元测试中可以忽略它们。

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

【讨论】：

【解决方案2】：

provider 只能在配置阶段使用Provider post-fix 访问就像你想访问$state 提供者那么它将是$stateProvider

你不能在配置阶段访问$state，$state是provider

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

对于重新重定向到默认状态，我希望您使用 $urlRouterProvider 并在其中提及您的 URL，当 url 与任何 state 不匹配时，它将重定向到 /orders，这使得更多感觉。

配置

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 我能问你为什么不喜欢$urlRouterProvider吗？