javascript - 未知提供者 : $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。请检查这个runnable fiddle并切换到 $routeProver 或将 ui-router 与 $stateProvier 结合使用。

---

ngRoute配置

这是一个 runnable fiddle 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-router配置

这是一个 runnable fiddle 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"
        });
});