未知提供者：$ 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"
        });
});