Question

我希望main.htm成为默认页面，无需输入mysite.com/main.htm。我希望它与mysite.com一致。当我点击下面的网站的主链接时，它会转到mysite.com（localhost现在因为我使用Visual Studio来运行它），但是它没有被路由到main.htm。如何让main.htm成为＆＃34;默认＆＃34;网页？

<!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>

Answer 1

我看起来名字必须是index.htm而不是main.htm，然后才能运行。

[编辑]

当然，当我这样做时，其他路线（红色/绿色/蓝色）现在不起作用。

[编辑]在评论

中为我原来的帖子添加了一个plunker

Answer 2

您是否尝试使用州而不是路线？当我使用我的应用程序执行此操作时：

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>

对我而言，你能尝试吗？

Answer 3

将此作为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>

设置Angular路由的默认开始页面

3 个答案: