当我在浏览器中刷新页面时,路由在我的Web应用程序中不起作用

时间:2016-07-14 14:22:34

标签: javascript angularjs html5 routing

当我在浏览器中输入http://localhost:8000时,它会重定向到http://localhost:8000/home。这根据代码工作正常。当我使用相同的http://localhost:8000/home刷新页面时出现404错误。任何人都可以帮助我为什么会发生这种情况并纠正我。

app.js

var myapp=angular
            .module("demo",['ngRoute'])
            .config(function ($routeProvider, $locationProvider){
              $routeProvider
              .when('/home',{
                templateUrl:'Templates/home.html',
                controller:'homeController'
              })
              .when('/about', {
                templateUrl:'Templates/about.html',
                controller:'aboutController'
              })
              .when('/contact',{
                templateUrl:'Templates/contact.html',
                controller:'contactController'
              })

              .otherwise({
               redirectTo: '/home'
               })
              $locationProvider.html5Mode(true);
            });

的index.html

<!doctype html>
<html lang="en" ng-app="demo">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
     <script src="bower_components/angular/angular.js"></script>
     <script src="bower_components/angular-route/angular-route.js"></script>
     <script src="rest-controller.component.js"></script>
     <script src="Controllers/contact.js"></script>
     <script src="Controllers/about.js"></script>
     <script src="Controllers/home.js"></script>
     <base href="/">
</head>
<body>
   <ol>
    <li><a href="home">Home</a></li>
    <li><a href="about">About</a></li>
    <li><a href="contact">Contact</a></li>
  </ol>
  <div ng-view></div>
</body>
</html>

home.js(控制器文件)

 angular.module('demo').controller("homeController", function($scope){
   $scope.hello ="home";
  });

about.js

angular.module('demo').controller("aboutController", function($scope){
  $scope.tap="About Me";
 });

contact.js

angular.module('demo').controller("contactController", function($scope){
 $scope.message="hello";
});

1 个答案:

答案 0 :(得分:0)

您可以尝试禁用html5模式吗?

// $locationProvider.html5Mode(true);