Entfernen # meine angularjs Seiten funktionieren nicht

Ich lerne angularjs nach einem Tutorial und sah, dass Sie # aus dem Link entfernen können. Ich habe das gemacht, aber dann sind meine Partials (von templateUrl) nicht mehr auf der Seite erschienen. Kann mir bitte jemand sagen, wo ich falsch liege?Entfernen # meine angularjs Seiten funktionieren nicht

angular.module('myApp', ['ngRoute']) 
 
\t .controller('mainController', ['$scope', '$location', '$log', function($scope, $location, $log) { 
 
    \t 
 
    \t $log.info($location.path()); 
 

 
    
 
\t }]) 
 
\t .controller('secondController', ['$scope', '$location', '$log', function($scope, $location, $log) { 
 
    \t 
 
    \t $log.info($location.path()); 
 

 
    
 
\t }]) 
 
\t .config(function($routeProvider, $locationProvider) { 
 
\t \t // $routeProvider lets us specify routes 
 
\t \t $routeProvider 
 
\t \t \t .when('/', { 
 
\t \t \t \t templateUrl: 'pages/main.html', 
 
\t \t \t \t controller: 'mainController' 
 
\t \t \t }) 
 
\t \t \t .when('/second', { 
 
\t \t \t \t templateUrl: 'pages/second.html', 
 
\t \t \t \t controller: 'secondController' 
 
\t \t \t }); 
 
\t \t $locationProvider.html5Mode(true); 
 
\t });

<!DOCTYPE html> 
 
<html lang="en-us" ng-app="myApp"> 
 
    <head> 
 
     <title>Learn and Understand AngularJS</title> 
 
     <meta http-equiv="X-UA-Compatible" content="IE=Edge"> 
 
     <meta charset="UTF-8"> 
 
     <base href="/"> 
 
     <!-- load bootstrap and fontawesome via CDN --> 
 
     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> 
 
     <style> 
 
      html, body, input, select, textarea 
 
      { 
 
       font-size: 1.05em; 
 
      } 
 
     </style> 
 
     
 
     <!-- load angular via CDN --> 
 
     <script src="//code.angularjs.org/1.3.0-rc.1/angular.min.js"></script> 
 
     <script src="//code.angularjs.org/1.3.0-rc.1/angular-route.min.js"></script> 
 
     <script src="angularjs-learn-understand/ch05/app.js"></script> 
 
    </head> 
 
    <body> 
 

 
     <header> 
 
\t \t \t <nav class="navbar navbar-default"> 
 
\t \t \t <div class="container"> 
 
\t \t \t \t <div class="navbar-header"> 
 
\t \t \t \t \t <a class="navbar-brand" href="/">AngularJS</a> 
 
\t \t \t \t </div> 
 

 
\t \t \t \t <ul class="nav navbar-nav navbar-right"> 
 
\t \t \t \t \t <li><a href="#"><i class="fa fa-home"></i> Home</a></li> 
 
        <li><a href="#/second"><i></i> Second</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t </div> 
 
\t \t \t </nav> 
 
\t \t </header> 
 

 
     <div class="container"> 
 

 
      <div ng-view></div> 
 
      
 
\t \t </div> 
 

 
    </body> 
 
</html>

main.html:

<h1>This is Main.</h1>

second.html

<h1>This is second.</h1>

Also in meinem Browser ich nicht bekommen main.html und second.html wenn ich auf Home und Second klicke. Warum?

Quelle

2016-11-25 John Smith

Der UI-Router Github docs erwähnt:

Wenn Sie html5Mode aktiviert ist, wird das Zeichen # nicht mehr in Ihrem Urls verwendet werden. Das Symbol # ist nützlich, da es keine serverseitige Konfiguration erfordert. Ohne # sieht die URL viel schöner aus, erfordert aber auch serverseitige Neuschreibungen.

Wenn Sie versuchen, Ihre Anwendung in html5Mode zuzugreifen (Routen ohne Hash) dann zunächst einmal müssen Sie das „#“ von jedem Ihrer Links (in diesem Fall sind die Links zu entfernen: Home , Zweite).

So ...

"#" wäre nur "/"
"#/Sekunde" wäre "/ Sekunde"

Danach würden Sie auch brauchen um die serverseitige URL zu aktivieren. Bitte überprüfen Sie this link und konfigurieren Sie Ihren Server wie auf dem Server, den Sie verwenden.

Quelle

2016-11-25 14:37:42

Vielen Dank :) –

Versuchen Sie, am Ende von $ routerProvider, das eine Standardroute angibt, eine .otherwise() einzurichten.

Die Vorlagen main.html und second.html sind korrekt definiert? Der Standort ist korrekt?

Quelle

2016-11-25 14:20:39

Ich tat das, aber nichts passiert. Ich weiß nicht, warum in meinem Link immer noch #, wenn ich auf die Schaltflächen Home und Second klicke: ** http: // localhost/angularjs-lernen-verstehen/ch05/#% 2Fsecond ** –

Entfernen # meine angularjs Seiten funktionieren nicht

Antwort

Verwandte Themen