2016-10-14 2 views
1

Я бы хотел, чтобы main.htm стала страницей по умолчанию, которая появляется без ввода mysite.com/main.htm. Я бы предпочел, чтобы это было правильно с mysite.com. Когда я нажимаю ссылку Main с сайтом ниже, он переходит на 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> 
+0

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

ответ

1

Я выглядит как имя должно быть index.htm не main.htm, а затем он работает.

[EDIT]

Конечно, когда я делаю что другие маршруты (красный/зеленый/синий) не работает.

[Редактировать] добавил plunker на мой оригинальный пост в комментариях

+0

Вы можете добавить ссылку plunker пожалуйста? –

+0

nevermind, я удалил r в routeProvider, поэтому он не был маршрутизирован, но теперь он рушится сразу. Он показывает страницу на секунду, затем сбой хрома, и он переходит на страницу сбоя «Aw Snap». Я буду тестировать на этом сайте. – user441521

+0

ОК, так что, похоже, если у меня есть сопоставление для «/» с шаблоном url как index.htm, это приводит к сбою (возможно, бесконечный цикл?). Guessing index.htm запускается по умолчанию, видит маршрут, который затем пытается изменить на тот, который запускает его снова, и так далее? Поэтому, угадывая, есть ли у меня имя index.htm в базовом каталоге, я не должен на него набросать, так как IIS Express в любом случае запускает его по умолчанию. – user441521

1

Вы попробуйте использовать вместо государства маршрут? Когда я делаю это с моим приложением:

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> 

Для меня это работа, вы можете попробовать?

+0

Я никогда раньше не использовал состояния. Доступно ли это в 1.5.8? Я должен был бы прочитать о состояниях, чтобы посмотреть, хочу ли я использовать этот метод маршрутизации против того, который я использую, я думаю. Трудно идти в ногу со всем этим и разными способами. – user441521

1

Попробуйте это в качестве 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> 
+0

Я хочу красивые URL. – user441521

+0

Так что это работает, но когда я пытаюсь получить красивые URL-адреса, я не могу заставить его работать. Можете ли вы попробовать пример с хорошими URL-адресами, потому что это то, что нарушает его для меня? – user441521