角度ルーティングのデフォルトの開始ページを設定します

mysite.com/main.htmを入力せずにmain.htmをデフォルトのページにしたいとします。私はそれがmysite.comの右に来るのが好きです。下のサイトでメインリンクをクリックすると、mysite.com（現時点ではlocalhostですが、これを実行するためにVisual Studioを使用しています）に行きますが、main.htmにはルーティングされません。 main.htmを「デフォルト」のページにするにはどうすればよいですか？角度ルーティングのデフォルトの開始ページを設定します

<!DOCTYPE html> 
<html> 
<script src="Scripts/angular.js"></script> 
<script src="Scripts/angular-route.js"></script> 
<head> 
    <base href="/" /> 
    <title></title> 
    <meta charset="utf-8" /> 
</head> 
<body ng-app="myApp"> 
    <p><a href="/">Main</a></p> 

    <a href="red">Red</a> 
    <a href="green">Green</a> 
    <a href="blue">Blue</a> 

    <!-- below is where the partial pages will replace --> 
    <div ng-view></div> 

<script> 
    var app = angular.module("myApp", ["ngRoute"]); 

    app.config(function($routeProvider, $locationProvider) { 
     $routeProvider 
     .when("/", { 
      templateUrl : "main.htm" 
     }) 
     .when("/red", { 
      templateUrl : "red.htm" 
     }) 
     .when("/green", { 
      templateUrl : "green.htm" 
     }) 
     .when("/blue", { 
      templateUrl : "blue.htm" 
     }); 

     // note: when you do this you must have the <base> tag in the header as well 
     $locationProvider.html5Mode(true); 
    }); 
</script> 
</body> 
</html>

出典

2016-10-14 user441521

https://plnkr.co/edit/1x8gswxIwmdoXiEgSLDK?p=preview – user441521

名前はmain.htmではなくindex.htmである必要があります。

[EDIT]もちろん

私は他の経路（赤/緑/青）が動作していないことを行います。

は、[編集]コメント

出典

2016-10-14 15:45:21 user441521

あなたはplunkerリンクを追加することができますしてください？ –

nevermind、私はrouteProviderのrを削除したので、ルーティングされなかったのですが、今すぐクラッシュしています。それは1秒間のページを表示してクロムをクラッシュさせ、それは "Aw Snap"クラッシュページに移動します。私はそのようなサイトでテストします。 – user441521

[OK]をクリックすると、templateUrlで "/"のマッピングをindex.htmとして取得すると、クラッシュ（無限ループかもしれませんか？）が発生します。 index.htmの推測では、デフォルトで起動してルートを表示し、それを再び開始するルートに変更しようとします。ベースディレクトリにindex.htmという名前が付いていれば、IIS Expressがデフォルトで起動しているので、そのディレクトリにはルーティングしないでください。 – user441521

で私の最初の投稿にplunkerを追加しましたあなたの代わりにルートの状態を使用しようとすることがありますか？私は私のアプリでこれを行うと：

var myApp = angular.module('starter', ['starter.controllers','starter.services','ui.router']) 

myApp.config(function($stateProvider, $urlRouterProvider) { 

    $stateProvider 


    .state('green', { 
    url: "/green", 
    templateUrl: 'templates/green.htm' 
    }) 

    .state('red', { 
    cache: false, 
    url: '/red', 
    templateUrl: 'templates/red.htm' 
    }) 

    .state('blue', { 
    url: '/blue', 
    templateUrl: 'templates/blue.htm' 
    }) 

    $urlRouterProvider.otherwise('/red'); //red become the default view 

});

、テンプレートで：

それの仕事私にとって

<a ui-sref="red">Red</a> 
<a ui-sref="green">Green</a> 
<a ui-sref="blue">Blue</a>

、あなたは試すことができますか？

出典

2016-10-14 15:55:49 PositivProd

私は今までに州を使ったことはありません。これは1.5.8で利用できますか？私は、私が推測して使っているものとルーティングの方法を使いたいかどうかを知るために州を読み上げなければならないでしょう。このすべてのものとそれを行うさまざまな方法についていくことは難しいです。 – user441521

あなたindex.htmlとしてこれを試してみてください：

<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
</head> 
<body ng-app="myApp"> 
    <p><a href="#/">Main</a></p> 

    <a href="#red">Red</a> 
    <a href="#green">Green</a> 
    <a href="#blue">Blue</a> 

    <!-- below is where the partial pages will replace --> 
    <div ng-view></div> 

<script> 
    var app = angular.module("myApp", ["ngRoute"]); 

    app.config(function($routeProvider) { 
     $routeProvider 
     .when("/", { 
      templateUrl : "main.htm" 
     }) 
     .when("/red", { 
      templateUrl : "red.htm" 
     }) 
     .when("/green", { 
      templateUrl : "green.htm" 
     }) 
     .when("/blue", { 
      templateUrl : "blue.htm" 
     }); 
    }); 
</script> 
</body> 
</html>

出典

2016-10-14 16:26:14

私はかなりのURLをしたい。 – user441521

これはうまくいきますが、私がかなりのURLを取得しようとすると、うまく動作しません。それは私のためにそれを破壊しているので、あなたはかなりのURLで例を試すことができますか？ – user441521

角度ルーティングのデフォルトの開始ページを設定します

答えて

関連する問題