启用html5mode时，为什么此AngularJS路由中断？

Question

I would like to use AngularJS routing. 我想使用AngularJS路由。 I am using AngularJS-seed-master as a start and routing works by default. 我使用AngularJS-seed-master作为启动，并且默认情况下路由工作。 However, it stopped working after I enabled html5mode. 但是，在启用html5mode之后它停止工作。 Below is the html code when routing works; 下面是路由工作时的html代码；

  <ul class="menu">
    <li><a href="#/view1">view1</a></li>
    <li><a href="#/view2">view2</a></li>
  </ul>    
  <div ng-view></div>
  <script src="lib/angular/angular.min.js"></script>
  <script src="lib/angular/angular-route.min.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>

Javscript app.js code when routing works; 路由工作时Javscript app.js代码；

angular.module('myApp', [
  'ngRoute',
  'myApp.filters',
  'myApp.services',
  'myApp.directives',  
  'myApp.controllers'
]).
config(['$routeProvider', function($routeProvider) 
{
    //configuration for $routeProvider
    $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
    $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
    $routeProvider.otherwise({redirectTo: '/view1'});

}])

Then, I enabled html5mode by adding this to app.js 然后，我通过将其添加到app.js启用了html5mode

.config(['$locationProvider', function($locationProvider)
{        
    $locationProvider.html5Mode(true);
}])

It is at this point that AngularJS routing stops working. 至此，AngularJS路由停止工作。 What did I do wrong? 我做错了什么？ How can AngularJS routing be made to work after enabling html5Mode? 启用html5Mode后如何使AngularJS路由工作？

Answer 1

What you have to do is in "app.js" set the "html5mode" to true: 您要做的是在“ app.js”中将“ html5mode”设置为true：

config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
   $locationProvider.html5Mode(true).hashPrefix('!');
   $routeProvider.otherwise({redirectTo: '/view2'});
}]);

In index.html add under header: 在index.html中的标题下添加：

<head>
      <base href="/" />
      <meta name="fragment" content="!">
</head>

And change the link: 并更改链接：

<body>
  <ul class="menu">
    <li><a href="/#!/view1">view1</a></li>
    <li><a href="/#!/view2">view2</a></li>
  </ul>
</body>

And that's it the main URL: http://localhost:8000 这就是主URL： http：// localhost：8000

Will redirect to: http://localhost:8000/view1 将重定向到： http：// localhost：8000 / view1

And link will work showing sexy address. 和链接将显示性感的地址。

启用html5mode时，为什么此AngularJS路由中断？

问题描述

1 个解决方案

解决方案1
1

启用html5mode时，为什么此AngularJS路由中断？

问题描述

1 个解决方案

解决方案1 1

解决方案1
1