Инъекция Угловые модули: Неизвестный поставщик

Question

Я последовал за учебником о том, как организовать и угарный проект. У меня есть каталог 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) { 
     ... 
    } 
}) 

Учебник Ждут» t использовать любые угловые модули, и я хотел попробовать один т. Я добавил ui.bootstrap на моей странице с CDN и попытаться изменить 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 'действительно доступен.

EDIT: Plunker скрипку здесь: http://plnkr.co/edit/FWHQ5ZDAByOWsL9YeMUH?p=preview

Answer 1

угловой маршрут еще один модуль, который вы должны не только включать, но и использовать как этот в создании модуля приложения

означает DI маршрута

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

Просьба перейти через угловой route doc

Answer 2

Удалить контроллер '' ui.bootstrap ''. Вы должны добавлять зависимости только один раз, но вы добавляете их дважды, чтобы второй список зависимостей переопределял первый.

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

Answer 3

ваши маршруты фрагмент кода выглядит так, вы должны висеть, когда отзывать $ routeProvider и, возможно, объявить $ routeProvider как закачиваемой вал, если он не взял, например,

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

Answer 4

Я проверил вашу ссылку. Я думаю, что есть серьезная проблема с угловой и ui начальной загрузкой. В панели управления 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 & D. Попробуйте использовать различные версии ui-bootstrap. если он не работает, вы можете сделать PR.