注入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模塊確實可用。

編輯：在這里胡鬧： http ://plnkr.co/edit/FWHQ5ZDAByOWsL9YeMUH?p=preview

Answer 1

角形路線是另一個模塊，您不僅應包括該模塊，還應在應用程序模塊創建中像這樣使用

表示路線的DI

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

請仔細閱讀角度路線文檔

Answer 2

刪除['ui.bootstrap']表單控制器。 您應該只添加一次依賴關系，但是要添加兩次，因此第二個依賴關系列表將覆蓋第一個依賴關系列表。

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

Answer 3

您的路線代碼片段看起來不對，您應該掛起when調用$ routeProvider，如果未取回，則可能將$ routeProvider聲明為注入的val，例如

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

Answer 4

我已經檢查了您的鏈接。 我認為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>

如果您只想使用角度版本。 我要你做一些研發。 嘗試使用不同版本的ui-bootstrap。 如果仍然無法解決問題，您可以進行PR。