Question

我正在创建一个网站，我正在使用JavaScript + AngularJS，目前我为应用程序创建路由，但它总是返回服务器上找不到的404，我尝试了几个互联网的例子，但没有一个他们工作，这是我的代码的一个例子，记住html页面在WebContent内：

<html ng-app="angularRoutingApp">
<head>
    <title>Home</title>
    <meta charset="utf-8">
</head>
<body>
    <div>
        <a href="/index">index</a> <br> <a href="/">home</a>
    </div>
    <div ng-view></div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.3/angular-route.js"></script>
    <script>
    var angularRoutingApp = angular.module('angularRoutingApp', ['ngRoute']);

    angularRoutingApp.config(function($routeProvider, $locationProvider) {

        $locationProvider.html5Mode(true);

        $routeProvider
            .when("/index", {
                template: "/index.html"
            })
            .otherwise({
                redirectTo: '/home.html'
            });
    });
    </script>
</body>
</html>

Answer 1

你忘记了ng-view指令。

另外，

href需要使用散列前缀 - 或使用Link指令。
redirectTo键需要提供一个视图[名称/地址]＆amp;不是模板
如果你想使用模板文件＆amp;不是内联代码使用templateUrl key

您可以在此处查看代码示例：the camera tutorial

<html ng-app="angularRoutingApp">
  <head>
    <title>Home</title>
    <meta charset="utf-8">
  </head>
  <body>
    <div>
      <a href="#/index">index</a><br>
      <a href="#/">home</a>
    </div>
    <div class="">
      <ng-view></ng-view>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.3/angular-route.js"></script>
    <script>
      var angularRoutingApp = angular.module('angularRoutingApp', ['ngRoute']);
      angularRoutingApp.config(function($routeProvider){
        $routeProvider
          .when("/index", {template:"<div>INDEX VIEW</div>"})
          .when("/home", {template:"<div>HOME VIEW</div>"})
        .when("/tempFile", {templateUrl: "views/temp_file.html"})
          .otherwise({redirectTo: '/home'});
      });
    </script>
  </body>
</html>

如何在AngularJS + JavaScript中创建路由？

1 个答案: