web-dev-qa-db-fra.com

Comment injecter $ stateProvider dans une application angulaire?

J'essaie d'utiliser angular-ui et d'essayer 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 ui.router avec des commentaires, tout fonctionnera:

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 des idées sur la résolution?

P.S. J'ai essayé ui sample cela fonctionne, mais je ne peux pas comprendre pourquoi le mien ne fonctionne pas.

javascripthtmlangularjsangular-ui
14
Cherry

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 pouvez uniquement utiliser le fournisseur d'état dans la configuration, par exemple:

angular.module('appModule').config(['$stateProvider', function($stateProvider){
    /* do w/e with state provider */
})];
32
Jon Snow
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"
 })
});
0
spyder