为 Angular 路由设置默认起始页

Question

我希望 main.htm 成为无需键入 mysite.com/main.htm 即可出现的默认页面。我更希望它与 mysite.com 一起出现。当我点击 Main link 和下面的站点时，它确实会转到 mysite.com（现在是本地主机，因为我正在使用 Visual Studio 到运行这个）但是那不会不会被路由到 main.htm。如何让 main.htm 成为 "default" 页面？

<!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 然后就可以了。

[编辑]

当然，当我这样做时，其他路线 (red/green/blue) 现在不工作了。

[编辑] 在评论post 中添加了一个 plunker

Answer 2

您尝试过使用 state 代替 route 吗？当我使用我的应用程序执行此操作时：

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 路由设置默认起始页

Set default start page for Angular routing

angularjs

angular-routing