Angular 1.5.x Routing funktioniert nicht

Ich habe mir hier dutzende von Fragen über das Angular Routing angeschaut, aber ich konnte das nicht funktionieren. Ich entschuldige mich, wenn ich etwas übersehen habe. Ich habe versucht, mit dem offiziellen Tutorial und dem Seed-Repository von Angularj eine einfache App auf den Weg zu bringen. Dieser Code wird auf einem Webserver gehostet, aber zu diesem Zweck habe ich meinen Code auf Plunker here kopiert. Der Code ist auch unten - ich danke Ihnen für Ihre Einsichten.Angular 1.5.x Routing funktioniert nicht

Index.HTML

<!DOCTYPE html> 
<html ng-app> 

    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-route.js"></script> 
    <script type="text/javascript" src="script1.js"></script> 
    <script type="text/javascript" src="script2.js"></script> 
    <script type="text/javascript" src="script3.js"></script> 
    </head> 

    <body> 
    <header ng-include="'header.html'"></header> 
    <div ng-view></div> 
    </body> 

</html>

home.html

<div ng-controller='homeCtrl'> 
    <h2>{{ location }}</h2> 
    <p>This is the home page content.</p> 
    <a href='#faq'>FAQ</a> 
</div>

faq.html

<div ng-controller='faqCtrl'> 
    <h2>This is the FAQ.</h2> 
    <p>{{ question }}</p> 
</div>

Script1

angular.module('testApp', [ 
    'ngRoute', 
    'home', 
    'faq' 
]) 

.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider.otherwise('/'); 
}]);

Script2

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

.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider.when('/', { 
     templateUrl : 'home.html', 
     controller : 'homeCtrl' 
    }); 
}]) 

.controller('homeCtrl', [function ($scope) { 
    $scope.location = 'USA'; 
}]);

Script3

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

.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider.when('/faq', { 
     templateUrl : 'faq.html', 
     controller : 'faqCtrl' 
    }); 
}]) 

.controller('faqCtrl', [function ($scope) { 
    $scope.question = 'Who am I?'; 
}]);

Quelle

2017-06-07 Keegan S.

Sie haben einige Fehler/Auslassungen in Ihrer App:

<html ng-app="testApp">

In index.html werden Sie den Namen der Anwendung in ng-app fehlt

In Ihren "home" und "faq" Controllern müssen Sie dieverwenden 210 für die Injektionen:

Verwendung:

.controller('homeCtrl', ['$scope', function ($scope) {

Statt:

.controller('homeCtrl', [function ($scope) {

, schließlich in home.html und faq.html, nicht ng-controller nicht verwenden. In Ihren Routendefinitionen geben Sie den Controller an, der für jede Route verwendet werden soll. Wenn Sie es erneut in der Vorlage angeben, wird ein zweiter Controller instanziiert.

Plnkr

Quelle

2017-06-07 17:07:54

Danke - ich sehe die Änderungen, die Sie den Code in dem Plunker Link fix gemacht haben. Aber als ich den Code auf meinem Webserver editierte - speziell "" in '' änderte, tat es das Gegenteil, die ganze Seite wurde leer - sogar das Header-Snippet war weg. Wenn Sie es wieder auf "" zurücksetzen, wird der Header zurückgebracht. Irgendwelche Ideen? –

Der Name, den Sie an "ng-app" übergeben, sollte mit dem Namen des Hauptmoduls Ihrer App übereinstimmen. Im obigen Code ist das "ng-app" (aus Script1). In deiner echten App verwendest du vielleicht einen anderen Namen? –

Ja, der Name stimmt mit dem Namen des Moduls überein. Ich sehe nicht, warum das Verhalten auf der realen App anders als Plunker wäre. –

Angular 1.5.x Routing funktioniert nicht

Antwort

Verwandte Themen