注入Angular模块:未知提供者

时间:2016-01-13 11:37:46

标签: javascript angularjs module

我遵循了如何组织和Angular项目的教程。我有一个ng目录,其中包含我的所有控制器,服务和我的routes.js。然后,我将app.js配置文件捆绑在一起gulp

我的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

4 个答案:

答案 0 :(得分:0)

角度路线是另一个模块,你不仅应该包括,还要像这样使用 在app模块创建中

表示路线DI

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

请浏览角度route doc

答案 1 :(得分:0)

删除[&#39; ui.bootstrap&#39;]表单控制器。您应该只添加一次依赖项,但是将它添加两次,以便第二个依赖项列表覆盖第一个依赖项。

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

答案 2 :(得分:0)

你的路线片段看起来不对,你应该挂掉$ routeProvider时的呼叫,并且如果它没有被接收,可以将$ routeProvider声明为注入的val,例如。

<a>

答案 3 :(得分:0)

我检查了你的链接。我认为angular和ui bootstrap版本存在严重问题。在ui-boostrap仪表板中,写入 0.12.0是支持AngularJS 1.2.x的最后一个版本。我尝试了所有组合,但它不适用于您的角度版本。 我建议你将角度版本更改为最新版本和ui-bootstrap版本,以便最新版本可以使用。

请查看此工作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&amp; D.尝试使用不同版本的ui-bootstrap。如果它不起作用,你可以制作PR。