javascript - 如何在 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，这将重定向到 /orders 当 url 不匹配任何更有意义的 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');
});