Kann nicht mit ngroute zu einer anderen Seite umleiten

Also benutze ich ngroute, um Redirect zu anderen HTML-Seiten zu mögen. Ich habe es von einem Online-Tutorial gelöst, aber wenn ich versuche, es auszuführen, wird die Nachricht nicht angezeigt oder die gewünschte Seite wird nicht angezeigt. Wenn ich beispielsweise auf der Navigationsleiste auf die Startseite klicken möchte, sollte sie auf die Startseite umleiten. Wenn ich zur Anmeldeseite umleiten möchte, sollte sie zur Anmeldeseite gehen. Ich bin mir nicht sicher, was falsch ist. Diese enter code here ist das, was ich habe:Kann nicht mit ngroute zu einer anderen Seite umleiten

index.html

<!DOCTYPE html> 
<html ng-app="homepageApp"> 
<head> 
<meta charset="UTF-8"> 
<title>Quiz HomePage</title> 
<link rel="stylesheet" href="cs/homepage.css"> 
<script src="lib/angular.js"></script> 
<script src="js/home.js"></script> 
<!-- NG ROUTE --> 
<script type="text/javascript" src="i"></script> 

</head> 
<body ng-controller="mainController"> 
    <h1>Welcome To The Online Quiz Management</h1> 

    <div id="navigationBar"> 
     <ul> 
      <li><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</a></li> 
      <li style="float: right"><a href="#login">Login</a></li> 
     </ul> 
    </div> 

    <!-- angular templating --> 
    <!-- this is where content will be injected --> 
    <div ng-view></div> 
</body> 
</html>

home.js

// creating the module 
var app = angular.module("homepageApp", ["ngRoute"]); 

// configure our routes 
app.config(function($routeProvider) { 
    $routeProvider 

     // route for the homepage 
     .when("/homepage", { 
      templateUrl: "homepage.html", 
      controller: "mainController" 
     }) 
     // route for login 
     .when("/login", { 
      templateUrl: "login.html", 
     }) 
     // route for about 
     .when("/about", { 
      templateUrl: "about.html", 
      controller: "aboutController" 
     }) 
     // route for contact 
     .when("/contact", { 
      templateUrl: "contact.html", 
      controller: "contactController" 
     }); 
}); 

// create the controller and inject Angular's $scope 
app.controller("mainController", function($scope) { 
    $scope.message = 'Everyone come our homepage'; 
}); 

app.controller("loginController", function($scope) { 

});

about.html

<!DOCTYPE html> 
<html ng-app="homepageApp"> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
</head> 
    <h1>About Page</h1> 

    <p>{{ message }}</p> 
</body> 
</html>

Quelle

2017-08-22 bubbles2189

https://www.w3schools.com/angular/tryit.asp?filename=try_ng_routing_provider –

Ihr ng Route src nicht .js Erweiterung –

@ bubbles2189, Bitte markieren Sie meine Antwort als akzeptiert, wenn es Ihnen bei der Lösung Ihres Problems geholfen hat. –

Wie @Barclick sagte, müssen Sie importieren Winkel-Route richtig. Da Sie angularjs von Ihrem lokalen verwenden, nicht sicher, welche Version Sie verwenden. Seit Version 1.6+ gibt es einige Änderungen an der Bibliothek. Bitte sehen Sie sich die detaillierte Antwort hier an: https://stackoverflow.com/a/41655831/6347317

Ich habe einen Plünderer mit eckigen 1.6 + erstellt. Bitte siehe unten:

http://plnkr.co/edit/xDOSh3OSdKcBFTPJN6qj?p=preview

Hinweis: Um die Art und Weise sehen Sie die Route in HTML "# Route" verwiesen wird.

HTML: 
<!DOCTYPE html> 
<html ng-app="homepageApp"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.min.js"></script> 
    <script src="app.js"></script> 
    </head> 

    <body ng-controller="mainController"> 
    <h1>Welcome To The Online Quiz Management</h1> 

    <div id="navigationBar"> 
     <ul> 
      <li><a href="#!">Home</a></li> 
      <li><a href="#!about">About</a></li> 
      <li><a href="#!contact">Contact</a></li> 
      <li style="float: right"><a href="#!login">Login</a></li> 
     </ul> 
    </div> 

    <!-- angular templating --> 
    <!-- this is where content will be injected --> 
    <div ng-view></div> 
    </body> 

</html>

JS:

// creating the module 
var app = angular.module("homepageApp", ['ngRoute']); 

// configure our routes 
app.config(function($routeProvider) { 
    $routeProvider 

     // route for the homepage 
     .when('/', { 
      templateUrl: 'homepage.html', 
      controller: 'mainController' 
     }) 
     // route for login 
     .when('/login', { 
      templateUrl: 'login.html', 
     }) 
     // route for about 
     .when('/about', { 
      templateUrl: 'about.html', 
      controller: 'aboutController' 
     }) 
     // route for contact 
     .when('/contact', { 
      templateUrl: 'contact.html', 
      // controller: 'contactController' 
     }); 
}); 

// create the controller and inject Angular's $scope 
app.controller("mainController", function($scope) { 
    $scope.message = 'Everyone come our homepage'; 
}); 

app.controller("aboutController", function($scope) { 
    $scope.message = 'Everyone come our about page'; 
});

Quelle

2017-08-22 03:00:09

Danke, ich sehe, was ich falsch gemacht habe – bubbles2189

Ich bin froh, dass ich helfen konnte! :) –

Kann nicht mit ngroute zu einer anderen Seite umleiten

Antwort

Verwandte Themen