AngularJS routeProvider-Ressource nicht gefunden

Ich weiß, dass routeProvider Thema wurde über tausend Mal ausgelöst, aber ich kann immer noch nicht herausfinden, warum mein Code nicht funktioniert. Das Problem ist, glaube ich, mit routeProvider, die zeigt Ressource nicht gefunden, wenn ich versuche, auf localhost zu gehen: 8080/loginAngularJS routeProvider-Ressource nicht gefunden

Hier ist der Code:

index.html

<!DOCTYPE html> 
<html lang="en" ng-app="myApp"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Strona Logowania</title> 
    <link rel="stylesheet" type="text/css" href="../bower_components/bootstrap/dist/css/bootstrap.min.css"> 
</head> 
<body> 

<div class="jumbotron"> 
    <div class="container"> 
     <div class="col-xs-offset-2 col-xs-8"> 
      <div ng-view></div> 
     </div> 
    </div> 
</div> 

<script src="../bower_components/jquery/dist/jquery.min.js"></script> 
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 
<script src="../bower_components/angular/angular.min.js"></script> 
<script src="../bower_components/angular-resource/angular-resource.min.js"></script> 
<script src="../bower_components/angular-route/angular-route.min.js"></script> 

<script src="../scripts/app.js"></script> 
<script src="../scripts/controllers.js"></script> 
<script src="../scripts/services.js"></script> 

</body> 
</html>

app.js

'use strict'; 

var app = angular.module('myApp', ['ngRoute', 'services', 'controllers']); 

app.config(['$routeProvider', '$locationProvider', 
        function($routeProvider, $locationProvider) { 
         $locationProvider.html5Mode(true); 
         $routeProvider. 
         when('/login', { 
          controller: 'loginCtrl', 
          templateUrl: '../page/login.html' 
         }). 
         when('/home', { 
          controller: 'homeCtrl', 
          templateUrl: '../page/home.html' 
         }). 
         otherwise({ 
             redirectTo: '/login' 
            }); 
        }]);

controllers.j s

'use strict'; 

var cont = angular.module('controllers', ['services']); 

cont.controller('loginCtrl', ['$scope', 'usersFactory', '$window', 
           function ($scope, usersFactory, $window) { 

            $scope.login = function() { 
             usersFactory.create($scope.user).$promise 
              .then(function (response) { 

               $window.location.href = "/page/test.html"; 
              }, function (response) { 

               $scope.errorMessage = "Bledne dane logowania"; 
              }); 

            } 

           }]); 

cont.controller('homeCtrl', ['$scope', 'usersFactory', '$window']);

login.html

<div class="container"> 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" aria-selected="true">Davay bilet</a> 
      </div> 
      <div id="navbar" class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li class="dropdown"> 
         <a class="nav dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PL<span class="caret"></span></a> 
         <ul class="nav dropdown-menu"> 
          <li><a href="#">PL</a></li> 
          <li><a href="#">EN</a></li> 
         </ul> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </nav> 
</div> 
<div class="jumbotron"> 
    <form name="myForm"> 
     <div> 
      <label>Login*:</label> 
      <input type="text" ng-model="user.ldapLogin" name="ldapLogin"/> 
     </div> 
     <div> 
      <label>Hasło*:</label> 
      <input type="password" ng-model="user.password" name="password"/> 
     </div> 
     <button ng-click="login()" type="submit" class>Loguj</button> 
    </form> 
</div>

Als ich login.html in index.html mit zugesetztem ng-Controller einsetzen funktioniert es gut.

Quelle

2016-04-23 Kamil Zaharan

Stellen Sie sicher, dass Sie die templateUrl is set correctly. Relative Pfade in Winkel beziehen sich auf das Dokument, in dem die App instanziiert wird (d. H. Index.html). Angenommen, Sie haben eine Struktur wie:

root/scripts/myApp.js 
root/page/login.html 
root/index.hmtl

die richtige Verweisung templateUrl: 'page/login' wäre, nicht wie man templateUrl: '../page/login' erwarten. Je nach Winkel müssen Sie in Ihrer Ordnerstruktur nicht eine Ebene tiefer gehen.

Quelle

2016-04-23 13:15:42 WiRo

Eigentlich meine Struktur ist: 'root/scripts/app.js root/Seite/login.html root/Seite/index.html' –

dann Sie sollten 'templateUrl: 'login.html'' verwenden. – WiRo

Geändert, aber immer noch keine Ergebnisse. –

Ich denke, die templateUrl ist relativ zu der aktuellen URL, aber nicht den Dateisystempfad, weil die Ansicht auf der Clientseite geladen wird. Deshalb denke ich, den Code unten funktionieren sollte:

$routeProvider 
    .when('/login', { 
     controller: 'loginCtrl', 
     templateUrl: '/page/login.html' 
    }) 
    .when('/home', { 
     controller: 'homeCtrl', 
     templateUrl: '/page/home.html' 
    }) 
    .otherwise({ 
     redirectTo: '/login' 
    });

Quelle

2016-04-23 14:03:43

AngularJS routeProvider-Ressource nicht gefunden

Antwort

Verwandte Themen