angular 1.6.4ルーティングが機能しない

プロジェクトで作業していますが、ルートが機能していないようです。私は '＃！/'と '＃'を試しました。以下は同じ私のコードです。私は角度1.6.4を使用しています。ホームページURLはlocalhost/ang/index.htmです。リンクをクリックするとurlはlocalhost/ang/index2.htm＃aboutになります。必要なURL：ローカルホスト/ ANG /についてangular 1.6.4ルーティングが機能しない

<!DOCTYPE html> 
<html > 
<head> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script> 
    <script > 

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

     myApp.config(["$routeProvider", "$locationProvider", function (e, r) { 
      r.hashPrefix(''); 
      r.html5Mode(true); 
      e.when('/', { templateUrl : 'red.html', controller : 'mainController' }) 
      .when('/about', { templateUrl : 'blue.html', controller : 'aboutController' }) 
      .when('/contact', { templateUrl : 'green.html', controller : 'contactController' }); 
     }]); 

     myApp.controller('mainController', function($scope) { 
      $scope.message = 'Test'; 
     }); 

     myApp.controller('aboutController', function($scope) { 
      $scope.message = 'Test'; 
     }); 

     myApp.controller('contactController', function($scope) { 
      $scope.message = 'test'; 
     }); 
    </script> 
</head> 

<body ng-controller="mainController" ng-app="myApp"> 
    <nav class="navbar navbar-default"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <a class="navbar-brand" href="/">Angular Routing Example</a> 
      </div> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#"><i class="fa fa-home"></i> Home</a></li> 
       <li><a href="#about"><i class="fa fa-shield"></i> About</a></li> 
       <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li> 
      </ul> 
     </div> 
    </nav> 
    <div id="main"> 
     <div ng-view></div> 
    </div> 
</body>

私はStackOverflowの上で提供される多くのソリューションを試みたが、私のために働いていません。

出典

2017-09-05 Akhilesh Kumar

あなたはそれが働いていないとはどういう意味ですか？ –

ホームページのURLはhttp：//localhost/ang/index.htmです。リンクをクリックすると、urlはhttp：//localhost/ang/index2.htm#aboutになります。必須URL：http：// localhost/ang/about –

エラーが発生しましたか？ –

あなたのコードが動作しない理由は、あなたのアプリケーションのベースhrefについて言及していないからです。 r.html5Mode(true);を削除するか、ベースhrefを追加してアプリケーションを動作させることができます。しかし、ローカルホストの設定からr.html5Mode(true);を削除することをお勧めします。コードを実稼働環境にデプロイするときに、ベースhrefと一緒に追加してください。

HTML：

<base href="/ang/"> 
<!-- Give a base Url for your application --> 

<body ng-controller="mainController" ng-app="myApp"> 
    <nav class="navbar navbar-default"> 
     <div class="container"> 
      <div class="navbar-header"> <a class="navbar-brand" href="/">Angular Routing Example</a> </div> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="home"><i class="fa fa-home"></i> Home</a> 
       </li> 
       <li><a href="about"><i class="fa fa-shield"></i> About</a> 
       </li> 
       <li><a href="contact"><i class="fa fa-comment"></i> Contact</a> 
       </li> 
      </ul> 
     </div> 
    </nav> 
    <div id="main"> 
     <div ng-view></div> 
    </div> 
</body>

JS：

var myApp = angular.module('myApp', ['ngRoute']); 
myApp.config(["$routeProvider", "$locationProvider", function(e, r) { 
    r.hashPrefix(''); 
    r.html5Mode(true); 
    e.when('/home', { 
     templateUrl: 'red.html', 
     controller: 'mainController' 
    }).when('/about', { 
     templateUrl: 'blue.html', 
     controller: 'aboutController' 
    }).when('/contact', { 
     templateUrl: 'green.html', 
     controller: 'contactController' 
    }); 
}]); 
myApp.controller('mainController', function($scope) { 
    $scope.message = 'Test'; 
}); 
myApp.controller('aboutController', function($scope) { 
    $scope.message = 'Test'; 
}); 
myApp.controller('contactController', function($scope) { 
    $scope.message = 'test'; 
});

ワーキングPlunker：https://plnkr.co/edit/rPr4atjkuxnCwissmdl3?p=preview

出典

2017-09-05 08:22:56 Vivz

Plunker link is me。私がどこが間違っていたかを調べてみましょう。ソリューションに感謝します。 –

angular 1.6.4ルーティングが機能しない

答えて

関連する問題