Angular, ngRoute, routeProvider

Guten Morgen! Ich versuche, eckige Anwendung mit Springboot zu machen. Ich habe das Ende mit Spring Boot gemacht, aber als ich anfing Front End mit Angular zu machen, bekam ich ein Missverständnis. Ich habe einige Fehler in meinem Browser und ich kann nicht verstehen, welche Fehler und was sie bedeuten. Ich habe den gesamten Stack-Overflow durchsucht und habe nichts gefunden.Angular, ngRoute, routeProvider

Mein book.html und book.js sind:

var myApp = angular.module('myApps',['ngRoute']). 
 

 
config(['$routeProvider',function($routeProvider,$locationProvider){ 
 
    $locationProvider.html5Mode(true); 
 
    $routeProvider.when('/books/', 
 
     { templateUrl:'/book/list'} 
 

 
    )}]);

<!DOCTYPE html> 
 
<html > 
 
<head> 
 
    <!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script>--> 
 
    <!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-resource.min.js"></script>--> 
 
    <!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-route.min.js"></script>--> 
 

 
</head> 
 
<body> 
 
<div data-ng-app="myApps"> 
 

 
    <h1>Hello</h1> 
 

 

 

 
    <data-ng-view> 
 

 
    </data-ng-view> 
 

 

 

 
</div> 
 
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<script src="//code.angularjs.org/1.4.4/angular.min.js"></script> 
 
<script src="//code.angularjs.org/1.4.4/angular-route.js"></script> 
 
<script src="//code.angularjs.org/1.4.4/angular-resource.min.js"></script> 
 
<script type="text/javascript" src="apelo/book.js"></script> 
 
</body> 
 
</html>

list.html, die in book.html sein sollte, wenn ich mit routeProvider url gehen:

<table > 
 
    <thead> 
 

 
    <tr> 
 
     <td>#</td> 
 
     <td>Name Book</td> 
 
     <td>Author</td> 
 
     <td>Count</td> 
 
     <td><i class="icon-plus-sign"></i></td> 
 

 
    </tr> 
 

 
    </thead> 
 
    <tbody> 
 

 
    <tr data-ng-repeat="book in book"> 
 
     <td>{book.id{}}</td> 
 
     <td>{{book.name}}<td> 
 
     <td>{{book.author}}</td> 
 
     <td>{{book.count}}</td> 
 
     <td><i class="icon-edit"></i></td> 
 
    </tr> 
 

 
    </tbody> 
 
</table>

Und nach all dieser versuche ich bekam zu laufen und diese:

Bitte beachten Sie, dass ich in book.js $ locationProvider in html5Mode (true) definiert ;, aber trotzdem muss ich # in url setzen für das Rendern Seite, ich versuche es ohne, aber ich habe Json-Wert von Back-End.

Ich habe alles versucht was ich konnte aber trotzdem nicht gefunden habe. Ich hoffe, du konntest herausfinden, was passiert.

< - AKTUALISIERT ->

Nach Löschen · min aus allen Skripten habe ich neue broser Konsole Fehler.

Quelle

2016-04-10 Dave

Der erste Fehler zeigt Ihre book.js Sie die Lage von book.js überqueren, um load.Did gescheitert überprüfen – jithin

Datei Es ist sehr wahrscheinlich ein Fehler mit 'book.js'path, wie @ jithin erklärte, dass der erste GET-Fehler besagt, dass der Browser die Datei nicht laden kann. – fbid

Aber wie Pfad von book.js kann falsch sein, wenn ich Pfad mit dem Schlag Alt + enter in Intelijj und book.js auch erstellen. Ich kann Pfade senden. – Dave

Zunächst einmal keine minimierte Version von Winkel verwenden, wenn Sie eine App entwickeln beschriebenen Fehler in Browsern Konsole zu sehen:

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
<script src="//code.angularjs.org/1.4.4/angular.js"></script> 
<script src="//code.angularjs.org/1.4.4/angular-route.js"></script> 
<script src="//code.angularjs.org/1.4.4/angular-resource.js"></script> 
<script type="text/javascript" src="apelo/book.js"></script>

Update:

Wenn Sie die Zeichenfolgen des Dienstes hinzufügen, bevor die Funktion sicher minieren soll, sollten Sie alle eingefügten Dienste schreiben:

var myApp = angular.module('myApps',['ngRoute']). 

config(['$routeProvider', '$locationProvider',function($routeProvider,$locationProvider){ 
    $locationProvider.html5Mode(true); 
    $routeProvider.when('/books/', 
     { templateUrl:'/book/list'} 

    )}]);

Quelle

2016-04-10 13:02:19

Ich habe getan, wie Sie sagten, und es gibt wirklich eine Menge Fehler in der Browser-Konsole, aber warum? Ich habe genau wie aus Tutorials und ich sehe diese Fehler Ich fühle, dass es in meinem Antrag jetzt überhaupt keine eckigen gibt, was zu tun ist? – Dave

Ich habe die Antwort aktualisiert. Schau, ob es funktioniert! –

In $locationProvider.html5Mode(true); finden Sie eine <base> im <head> des Dokuments, das Link um Ihre Anwendung mit relativen Links festlegen müssen.

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 

    <base href="/"> 
</head>

Sie müssen auch die Serverkonfiguration für Routing-Umleitung verwalten. Hier ist ein großartiger Link, mit dem ich mein Problem gelöst habe. Deep Linking AngularJS.

Glücklich Codierung ..

Quelle

2016-04-10 19:09:22

Antwort

Verwandte Themen