Einfache AngularJS Routing-System funktioniert nicht (xampp Server)

Ich versuche Angular zum ersten Mal, und mein erstes Problem, das ich implementieren möchte, ist Single-Seite-Anwendung-Funktion. Aber hier das erste Problem: Ich habe eine sehr einfache Arbeit konfiguriert, es ist in zwei Dateien unterteilt: index.html und project.js.Einfache AngularJS Routing-System funktioniert nicht (xampp Server)

Ich arbeite an einer Windows 10 Maschine und ich benutze Xampp 3.2.2, dieses Projekt ist in den Ordner/htdocs/webapp putted.

Wenn der Zugriff auf "localhost/webapp /" es richtig laden die "sonst" Bedingung, aber wenn ich versuche, laden Sie zum Beispiel "localhost/webapp/#/tomate" oder "localhost/webapp/# tomate" die URL wird "http://localhost/webapp/#!#tomato" und die Seite zeigt immer noch den Inhalt der ansonsten Bedingung ...

Ich weiß wirklich nicht, was die Ursache ist, und auch die Konsole zeigt keine Fehler, es scheint, dass in $ routeProvider bekomme immer den anderen Zustand.

Bitte Jungs, geben einige Lösungen, die ich sehr nervös bin ;-) Danke

Unterhalb der Schnipsel der Dateien

<!doctype html> 
 
<html> 
 
    <head> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.min.js"></script> 
 
     <script src="project.js"></script> 
 
    </head> 
 
    <body ng-app="myApp"> 
 
     <h2>JavaScript Projects</h2> 
 
     <div ng-view></div> 
 
    </body> 
 
</html>

var app = angular.module("myApp", ["ngRoute"]); 
 
app.config(function($routeProvider) { 
 
    $routeProvider 
 
    .when("/banana", { 
 
     template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>" 
 
    }) 
 
    .when("/tomato", { 
 
     template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>" 
 
    }) 
 
    .otherwise({ 
 
     template : '<h1>None</h1><p>Nothing has been selected</p><a href="#tomato">prova</a>' 
 
    }); 
 
});

Quelle

2017-01-28 Matteo Zerbi

DEMO

var app = angular.module("contactMgr", ['ngRoute']); 
 
app.config(['$routeProvider', function($routeProvider) { 
 
    $routeProvider 
 
    .when("/banana", { 
 
     template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>" 
 
    }) 
 
    .when("/tomato", { 
 
     template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>" 
 
    }) 
 
    .otherwise({ 
 
     template : '<h1>None</h1><p>Nothing has been selected</p><a href="#tomato">prova</a>' 
 
    }); 
 

 
}])

<!DOCTYPE html> 
 
<html ng-app="contactMgr"> 
 

 
<head> 
 
    <meta charset="UTF-8" /> 
 
    <meta name="description" content="" /> 
 
    <meta name="keywords" content="" /> 
 
    <meta name="robots" content="" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 
 
    <link data-require="[email protected]*" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" /> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
    <script src="app.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <title>Title of the document -1</title> 
 
</head> 
 
<body> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
     <h1>Welcome to Route</h1> 
 
     <div class="nav"> 
 
      <a href="#tomato" class="button">Tomato</a> 
 
      <a href="#banana" class="button">Banana</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="container"> 
 
    <div ng-view=""></div> 
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2017-01-28 10:47:09 Sajeetharan

ehy es funktioniert gut! Vielen Dank! –

Ich fühle mich sehr dumm, kann ich dich die Erklärung fragen? vielleicht ist die Version von eckigen? –

Einfache AngularJS Routing-System funktioniert nicht (xampp Server)

Antwort

Verwandte Themen