正在注入Angular模块:未知提供程序

Question

我学习了一个关于如何组织和Angular项目的教程。我有一个ng目录，其中包含我的所有控制器、服务和routes.js。然后，我的gulp配置将所有这些绑定到一个app.js中。

我的module.js是这样的：

var app = angular.module('app', [
    'ngRoute',
    'ui.bootstrap'
]);

这是我的routes.js:

angular.module('app')
.config(function ($routeProvider) {
    .when('/login', { controller: 'LoginCtrl', templateUrl: 'login.html'})
});

以下是我的工作LoginCtrl的样子：

angular.module('app')
.controller('LoginCtrl', function($scope, UserSvc) {
    $scope.login = function(username, password) {
        ...
    }
})

教程没有使用任何Angular模块，我想尝试一下。我从CDN将ui.bootstrap添加到我的页面，并尝试将LoginCtrl更改为：

angular.module('app')
.controller('LoginCtrl', function($scope, $uibModal, UserSvc) {
    ...
})

但这给我带来了以下错误：

"Error: [$injector:unpr] Unknown provider: $templateRequestProvider <- $templateRequest <- $uibModal

导致此错误的原因是什么？在我发现的每一个教程中，这似乎都是他们加载模块的方式，我看到的唯一区别是该教程似乎没有使用路由器。

PS:请注意，如果我使用空模块列表[]，我会得到完全相同的错误。如果我使用不存在的模块['helloworld'] I get an error模块"helloworld"不可用。因此，我得出结论，我的"ui.bootstrap"模块确实可用

编辑：Plunker小提琴在这里：http://plnkr.co/edit/FWHQ5ZDAByOWsL9YeMUH?p=preview

Answer 1

angular route是另一个模块，您不仅应该包括它，还应该像这样使用它在应用程序模块中创建

表示路由的DI

angular.module('app', ['ngRoute']);

请浏览角度路线文档

Answer 2

删除['ui.bootstrap']表单控制器。您应该只添加一次依赖项，但添加两次，这样第二个依赖项列表就会覆盖第一个。

angular.module('app')
.controller('LoginCtrl', function($scope, UserSvc) {
... })

Answer 3

您的路由片段看起来有问题，您应该挂起调用$routeProvider的时候，如果没有提取$routeProver，可能会将其声明为注入的val，例如

angular.module('app')
    .config(["$routeProvider", function ($routeProvider) {
        $routeProvider.when('/login', { controller: 'LoginCtrl', templateUrl: 'login.html'})
}]);

Answer 4

我已经检查了你的链接。我认为angular和ui引导程序版本存在严重问题。在ui boostrap仪表板中，有人写道0.12.0是支持AngularJS 1.2.x的最后一个版本。我尝试过所有组合，但它不适用于您的angular版本。我建议您将angular版本更改为最新版本，将ui引导程序版本更改为最近版本，这样它就可以工作了。

请查看这个工作的Plukr

    <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-route.js'></script>    //change this to latest also.
    <script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.0.3/ui-bootstrap.min.js'></script>
    <script src='./app.js'></script>

如果你只想使用有棱角的版本。我请求你做一些R&D.尝试使用不同版本的ui引导程序。但如果它不起作用，你可以制作PR.