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配置

这是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-route

runnable fiddle配置

这是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" }); }); <div onclick="play();" id="vidwrap" style="height:315px;width:560px;background: black url('http://example.com/image.jpg') no-repeat center;overflow:hidden;cursor:pointer;"></div> <script type="text/javascript"> function play(){ document.getElementById('vidwrap').innerHTML = '<iframe width="560" height="315" src="http://www.youtube.com/embed/xxxxxxxxx?autoplay=1" frameborder="0"></iframe>'; } </script>实施。

NavigationBar

未知提供者：$ stateProvider

1 个答案:

ngRoute配置

runnable fiddle配置