Angularjs - Ошибка: [$ injector: unpr]

Question

Я пытаюсь использовать Angular UI Bootstrap module, в частности плагин Modal. Мое приложение-папка структурирована таким образом:

• приложение
  • Scheda
    • scheda.html
    • schedacontroller.js
  • app.js
• css
• ...
• index.html

Это app.js, главное приложение файл:

// created the module GasistaFelice 
// also included ngRoute for all our routing needs 

angular.module('ngGasistaFelice', []) 
.run(function($rootScope) { 
    $rootScope.gasID = "10"; //default value 
}); 

angular.module('ngGasistaFelice', ['ui.bootstrap']); 

var GasistaFelice = angular.module('ngGasistaFelice', ['ngRoute']); 

GasistaFelice.config(['$routeProvider',function($routeProvider) { 
      $routeProvider 
// route for the home page 
      .when('/', { 
       templateUrl : 'app/ordinare/ordinare.html', 
       controller : 'orderController' 
      }) 

      // route for the paniere page 
      .when('/:id/gasmember/:id/basket', { 
       templateUrl : 'app/paniere/paniere.html', 
       controller : 'paniereController' 
      }) 

      // route for the scheda page 
      .when('/:id/profile', { 
       templateUrl : 'app/scheda/scheda.html', 
       controller : 'schedaController' 
      }) 

      // route for the conto page 
      .when('/:id/gasmember/:id/cash', { 
       templateUrl : 'app/conto/conto.html', 
       controller : 'contoController' 
      }) 
      .otherwise({ 
        redirectTo: '/' 
       }); 
    }]); 

отл ....

Это контроллер страницы, на которой я хочу разместить плагин Modal:

var app = angular.module('ngGasistaFelice', ['ui.bootstrap']); 
app.controller('schedaController', function ($scope, $routeParams, $modal, $log, $http) { 
     var id = $routeParams.id; 
     // --- URL finale --- 
     //var url = 'http://localhost:8000/gasistafelice/api/v1/person/id/?format=json'; 
     //URL di prova 

     $scope.items = ['item1', 'item2', 'item3']; 

      $scope.open = function (size) { 

      var modalInstance = $modal.open({ 
       templateUrl: 'myModalContent.html', 
       controller: ModalInstanceCtrl, 
       size: size, 
       resolve: { 
       items: function() { 
        return $scope.items; 
       } 
       } 
      }); 

      modalInstance.result.then(function (selectedItem) { 
       $scope.selected = selectedItem; 
      }, function() { 
       $log.info('Modal dismissed at: ' + new Date()); 
      }); 
      }; 

Когда я загрузить страницу, содержащую schedaController, я постоянно получаю эту ошибку:

Error: [$injector:unpr] h ttp://errors.angularjs.org/1.2.16/$injector/unpr?p0=%24routeParamsProvider%20%3C-%20%24routeParams 
    at Error (native) 
    at http://localhost/GasistaFelice2_angular/js/angular.min.js:6:450 
    at http://localhost/GasistaFelice2_angular/js/angular.min.js:35:431 
    at Object.c [as get] (http://localhost/GasistaFelice2_angular/js/angular.min.js:34:13) 
    at http://localhost/GasistaFelice2_angular/js/angular.min.js:35:499 
    at c (http://localhost/GasistaFelice2_angular/js/angular.min.js:34:13) 
    at d (http://localhost/GasistaFelice2_angular/js/angular.min.js:34:230) 
    at Object.instantiate (http://localhost/GasistaFelice2_angular/js/angular.min.js:34:394) 
    at http://localhost/GasistaFelice2_angular/js/angular.min.js:66:112 
    at http://localhost/GasistaFelice2_angular/js/angular.min.js:53:14 

Спасибо вам

Answer 1

Вы определяете angular.module('ngGasistaFelice', []) несколько раз с разными необходимыми модулями (внутри второго параметра к module функция):

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

... в частности, последний из которых является тот, который вы пытаетесь использовать ngRoute с, и вы не имеете даже я вытолкнул его там.

Лучшим решением является определение его один раз, сказать:

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

И тогда вы могли бы делать то, что вы пытаетесь сделать:

GasistaFelice.controller(...); 

Или, если вам это нужно в другом файле (или сфера действия) и GasistaFelice еще не определено, вы можете получить его, позвонив по телефону angular.moduleбез, передавая необходимые зависимости, например:

var app = angular.module('ngGaistaFelice'); 
app.controller(...); 

Answer 2

Начиная с версии 0.14.0 угловая команда с префиксом всех компонентов, которые вы должны использовать, посмотрите more. Для вашего дела вам нужно Изменить: $ modal для $ uibModal. Изменить: $ modalInstance для $ uibModalInstance. Изменить: modal-transclude for uib-modal-transclude