Visual StudioでAngularJSルーティングが機能しない

私はVS 2015でAngularJSコードを実行しています。ルーティングは機能しません。私はすべてを試しましたが、ハイパーリンク「追加」をクリックするとブラウザのアドレスバーに次のようなURLが表示され、何も表示されず、他のハイパーリンクと同じ問題が表示されます。お知らせ下さい。ここでVisual StudioでAngularJSルーティングが機能しない

 "http://localhost:21530/Index.html#!#Add"

はコードです：

HTMLファイル：

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

<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <script src="Scripts/angular.js"></script> 
    <script src="Scripts/angular-route.js"></script> 
    <script src="Scripts/Main/Home.js"></script> 
</head>`enter code here` 

<body> 
    <div> 
     <ul> 
      <li><a href="#Home">Homes</a></li> 
      <li><a href="#Add">Add</a></li> 
      <li><a href="#Edit">Edit</a></li> 
      <li><a href="#Delete">Delete</a></li> 
     </ul> 
     <ng-view> 
     </ng-view> 
    </div> 
</body> 

</html>

Home.js：

/// <reference path="../angular.js" /> 
var MyApp = angular.module("MyApp", ["ngRoute"]); 

MyApp.config(function($routeProvider) { 
    $routeProvider. 
    when("/Add", { 
      templateUrl: "Views/Add.html", 
      controller: "AddController" 
     }) 
     .when("/Edit", { 
      templateUrl: "Views/Edit.html", 
      controller: "EditController" 
     }) 
     .when("/Delete", { 
      templateUrl: "Views/Delete.html", 
      controller: "DeleteController" 
     }) 
     .when("/Home", { 
      templateUrl: "Views/Home.html", 
      controller: "HomesController" 
     }); 
}); 

MyApp.controller("AddController", function($scope) { 
    $scope.message = "Add Screen"; 
}); 
MyApp.controller("EditController", function($scope) { 
    $scope.message = "Edit Screen"; 
}); 
MyApp.controller("DeleteController", function($scope) { 
    $scope.message = "Delete Screen"; 
}); 
MyApp.controller("HomeController", function($scope) { 
    $scope.message = "Home Screen"; 
});

出典

2017-01-21 Rahul B

変更すべてのhref以下のように：

<div> 
     <ul> 
     <li><a href="#/Home">Homes</a></li> 
     <li><a href="#/Add">Add</a></li> 
     <li><a href="#/Edit">Edit</a></li> 
     <li><a href="#/Delete">Delete</a></li> 
    </ul> 
    <ng-view> 
    </ng-view> 
</div>

出典

2017-01-21 11:20:22 Priyank

これを試しましたが、運はありません。 –

HTML5モード（$locationProvider.html5Mode(true);）をMyApp.configにアクティブにしてください。

は、公式ドキュメントを参照してください：https://docs.angularjs.org/api/ngRoute/service/ $ルート＃の例

出典

2017-01-21 12:40:32 ValLeNain

MyApp.config(['$ routeProvider', function ($routeProvider) { $routeProvider. when("/Add", { templateUrl: "Views/Add.html", controller: "AddController" }) .when("/Edit", { templateUrl: "Views/Edit.html", controller: "EditController" }) .when("/Delete", { templateUrl: "Views/Delete.html", controller: "DeleteController" }) .when("/Home", { templateUrl: "Views/Home.html", controller: "HomesController" }); }]);

あなたが最初 routeprovider に$を注入する必要があります。あなたが書いたfunction（）内の$ routeproviderはパラメータ名だけです。何でも構いません。

角括弧を正しく開いて閉じていることを確認してください。今すぐアプリケーションを実行してみてください。それがうまくいかない場合は、nav liの中に<a ng-href="#Add">Add</a>も試してください。

希望：それはあなたのために働く:)。

出典

2017-01-21 12:41:54

Visual StudioでAngularJSルーティングが機能しない

答えて

関連する問題