Winkelfehler: Fehler: [$ Injektor: UNPR] Unbekannter Anbieter:

urlRouteProvider $

Ich erhalte einen Winkelfehler: Fehler: [$ Injektor: UNPR] Unbekannter Anbieter: $ urlRouteProvider

Ich bin mit ui-Router für das Routing

Meine Html-Code:

<html ng-app="myApp"> 
<head> 
    <title>TODO supply a title</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <script src="angular.js" type="text/javascript"></script> 
    <script src="Controller.js" type="text/javascript"></script> 
    <script src="angular-route.js" type="text/javascript"></script> 

    <script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js" defer></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

</head> 
<body ng-app="myapp"> 
    <div class="container"> 
     <header ng-include="'templates/nav.html'"></header> 
     <div ui-view></div> 
     <footer ng-include="'templates/footer.html'"></footer> 
    </div> 


</body>

Mein Modul:

angular.module("myApp", ['ui.router']) 
    .config(["$urlRouteProvider", "$stateProvider", function ($urlRouteProvider, $stateProvider) { 
      $urlRouteProvider.otherwise('/index.html'); 

      $stateProvider.state("home", { 
       url: '/', 
       template: "home" 
      }); 
     }]);

Ist etwas falsch, was ich hier mache?

Quelle

2017-03-21 punith gowda

Es ist '$ urlRouterProvider', mit einem R :) – Phugo

ersten hinzufügen Skripte ui Router mit dem Index HTML-Datei ändern.

<script data-require="[email protected]" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script> 
<script data-require="[email protected]" data-semver="0.3.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script>

Dann fehlt hier auch Zeichen.

Änderung $urlRouteProvider.otherwise('/index.html');

.config(["$urlRouteProvider", "$stateProvider", function ($urlRouteProvider, $stateProvider)

zu $urlRouterProvider.otherwise('/index.html');

.config(["$urlRouterProvider", "$stateProvider", function ($urlRouterProvider, $stateProvider)

Demo

Quelle

2017-03-21 06:37:23

Danke Mate! Hat funktioniert. –

@punith gowda kein Problem, stellen Sie sicher, zu markieren ist als richtige Antwort, wenn dies geholfen hat –

Sie müssen

die controller.js nach dem Laden ui Router Referenz nennen

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<script src="angular.js" type="text/javascript"></script> 
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js" defer></script> 
<script src="Controller.js" type="text/javascript"></script>

auch von

angular.module("myApp", ['ui.router']) 
    .config(["$urlRouteProvider", "$stateProvider", function ($urlRouteProvider, $stateProvider) {

ändern

angular.module("myApp", ['ui.router']) 
    .config(["$urlRouterProvider", "$stateProvider", function ($urlRouterProvider, $stateProvider) {

Quelle

2017-03-21 06:26:26 Sajeetharan

versucht. Funktioniert immer noch nicht. –

Sie benötigen Abhängigkeiten von anderen zu lösen Module, damit Ihr Modul funktioniert.

neu anordnen So Ihr Code zu

<html ng-app="myApp"> 
    <head> 
    <title>TODO supply a title</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <script src="angular.js" type="text/javascript"></script> 

    <script src="angular-route.js" type="text/javascript"></script> 

    <script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js" defer></script> 
    <script src="Controller.js" type="text/javascript"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
<!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

    </head> 
    <body ng-app="myapp"> 
     <div class="container"> 
      <header ng-include="'templates/nav.html'"></header> 
      <div ui-view></div> 
      <footer ng-include="'templates/footer.html'"></footer> 
     </div> 
</body>

Und auch Ihre Abhängigkeit Namen von $ urlRouteProvider zu $ urlRouterProvider

angular.module("myApp", ['ui.router']) 
    .config(["$urlRouterProvider", "$stateProvider", function ($urlRouterProvider, $stateProvider) { 

}]);

Quelle

2017-03-21 06:32:09

Vielen Dank. –

Sie können mir mit einem upvote, Happy coding danken :) –

Winkelfehler: Fehler: [$ Injektor: UNPR] Unbekannter Anbieter:

Antwort

Verwandte Themen