Comment injecter $ stateProvider dans une application angulaire?

J'essaie d'utiliser angular-uiet essayez d'injecter $stateProvider:

html

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular-resource.min.js"></script>
    <script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script>
    <script src="test/appModule.js"></script>
</head>
<body>
    <div ng-app="appModule">
        <div ng-controller="appController">
            {{date}}
        </div>

    </div>
</body>
</html>

js (test/appModule.js)

var module = angular.module("appModule", ['ui.router']);

module.controller('appController', ['$scope', '$stateProvider',
    function ($scope, $stateProvider) {
        $scope.date = new Date();
    }]);

trace de la pile

Error: Unknown provider: $stateProviderProvider <- $stateProvider
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js:28:236
...

Si je supprime $stateProvider et de l'interface utilisateur.routeur avec des commentaires tout fonctionne:

var module = angular.module("appModule"/*, ['ui.router']*/);
module.controller('appController', ['$scope'/*, '$stateProvider'*/,
    function ($scope, $stateProvider) {
        $scope.date = new Date();
    }]);

Donc le problème avec l'injection $stateProvider toutes les idées sur la résolution?

P. S. j'ai essayé l'interface utilisateur de l'échantillon il fonctionne, mais je ne peux pas comprendre pourquoi le mien ne fonctionne pas.

source d'informationauteur Cherry | 2014-05-29

  1. 32

    Lorsque vous l'utilisez dans un contrôleur, vous devez utiliser $state:

    angular.module("appModule", ['ui.router']).controller('appController', ['$scope', '$state', function ($scope, $state) {
    $scope.date = new Date();
}]);

    Vous ne pouvez utiliser que l'état fournisseur dans le fichier de configuration, par exemple:

    angular.module('appModule').config(['$stateProvider', function($stateProvider){
    /* do w/e with state provider */
})];
  2. 0
    var bootstrapApp = angular.module('bootstrapDemoApp', ['ui.bootstrap','ui.router']);

bootstrapApp.config(function($stateProvider, $urlRouterProvider,$locationProvider) {




 //For any unmatched url, redirect to /
 $urlRouterProvider.otherwise("/");

 //Now set up the states
 $stateProvider
  .state('login', {
   url: "/",
   controller: "loginCtrl",
   templateUrl: "partials/login.html"
 })
});