Fout: [$injector:unpr] Onbekende provider: $routeProvider

Ik probeer een AngularJS 1.2 RC2-app in gebruik te nemen. Momenteel gebruik ik het Angular Seed-project om te proberen mijn app aan de gang te krijgen. Helaas gebruikt het Angular Seed-project v1.0.7. Van het Angular Seed-project heb ik de afhankelijkheden als volgt bijgewerkt:

$script([
  'res/js/angular-1.2.0-rc.2.js',
  'res/js/angular-route-1.2.0-rc.2.js',
  'res/js/app.js?v=2',
], function() {
  // when all is done, execute bootstrap angular application
  angular.bootstrap(document, ['myApp']);
});

In app.js heb ik het volgende:

'use strict';
angular.module('myApp', []).
    config(['$routeProvider', function($routeProvider) {
        $routeProvider.otherwise({redirectTo: '/home'});
    }]);

Als ik deze app start, krijg ik de volgende foutmelding:

Error: [$injector:unpr] Unknown provider: $routeProvider

Ik heb enkele van de andere reacties gelezen die dingen zeggen als 1) Injecteer ‘ngroute’ of 2) Je moet de controller in de route definiëren. Mijn probleem is dat ik niet begrijp hoe ik ngroute moet injecteren. Moet ik daarnaast echt de controller in de route definiëren? Die aanpak lijkt niet schaalbaar. Mijn app heeft misschien duizend keer bekeken. Naar mijn mening lijkt het erop dat er een manier moet zijn om routes te definiëren zonder alle controllers te hoeven laden.


Antwoord 1, autoriteit 100%

Het lijkt erop dat u bent vergeten de ngRoute-module op te nemen in uw afhankelijkheid voor myApp.

In Angular 1.2 hebben ze ngRoute optioneel gemaakt (zodat je externe routeproviders kunt gebruiken, enz.) en je moet er expliciet van afhankelijk zijn in modules, samen met inclusief het aparte bestand.

'use strict';
angular.module('myApp', ['ngRoute']).
    config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/home'});
}]);

Antwoord 2, autoriteit 23%

In hoekig 1.4 +, naast het toevoegen van de afhankelijkheid

angular.module('myApp', ['ngRoute'])

, we moeten ook verwijzen naar het afzonderlijke bestand angular-route.js

<script src="angular.js">
<script src="angular-route.js">

zie https://docs.angularjs.org/api/ngRoute

Other episodes