未知提供者：$stateProvider

Question

我真的不明白为什么这个标记不能识别我的 $stateProvider？

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

简单模块：

(function () {
   'use strict';
// get modules we need for the app
angular.module('app', ['ngRoute'])
    .config(config);

config.$inject = ['$stateProvider']

function config($stateProvider) {
    console.log('works'); // actually doesn't
};

})();

我尝试了各种其他样式，例如直接在配置中加载它们

 .config(['$stateProvider'], function ($stateProvider) {
  // not working this way either.
  });

Answer 1

您正在ngRoute以这种方式使用，您必须使用$routeProvider. 该$stateProvider基于ui-router。请检查这个可运行的小提琴并切换到$routeProver或ui-router与$stateProvier.

ngRoute配置

这是一个可运行的ngRoute实现。

/* App Module */
angular.module('demoApp', ['ngRoute'])
  .config(['$routeProvider', function( $routeProvider) {

     // Define routes 
     $routeProvider.when('/homepage', { 
         templateUrl: 'partial/homepage.html',
         controller: HomePageCtrl
       }).when('/users', { 
         templateUrl: 'partial/users.html',
         controller: UsersListCtrl
       }).when('/contacts',{ 
         templateUrl: 'partial/contacts.html',
         controller: ContactPageCtrl
       }).otherwise({
         redirectTo: 'homepage'
       });
   }
]);

ui路由器配置

这是一个可运行的ui-route实现。

var myApp = angular.module("myApp",["ui.router"])
  .config(function ($stateProvider, $urlRouterProvider){
      $stateProvider.state("state1", {
          url: "#",
          template: "<p>State 1</p>",
          controller: "Ctrl1"
        }).state("state2", {
          url: "#",
          template: "<p>State 2</p>",
          controller: "Ctrl2"
        });
});