javascript - 为什么启用 html5mode 后 AngularJS 路由会被破坏?

标签 javascript angularjs html url-routing angular-routing

我想使用 AngularJS 路由。我使用 AngularJS-seed-master 作为启动,默认情况下路由有效。然而,在我启用 html5mode 后它就停止工作了。下面是路由工作时的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 代码;

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'});

}]) 

然后,我通过将其添加到 app.js 来启用 html5mode

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

此时 AngularJS 路由停止工作。我做错了什么?启用 html5Mode 后如何使 AngularJS 路由正常工作?

最佳答案

您要做的就是在“app.js”中将“html5mode”设置为 true:

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

在index.html标题下添加:

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

并更改链接:

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

这就是主 URL: http://localhost:8000

将重定向到: http://localhost:8000/view1

并且链接将显示性感地址。

关于javascript - 为什么启用 html5mode 后 AngularJS 路由会被破坏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23319424/

相关文章:

javascript - 是否可以从函数外部访问函数的局部变量?

JavaScript console.dir 和运行时

javascript - "Stop running this script"确认框 - 如何获取有关脚本的更多详细信息?

javascript - 确定是否启用 javascript 的正确方法

javascript - Mediaelement.js:如何更改海报图片?

javascript - 根据所选选项显示 HTML

angularjs - ng-init 是否像 ng-model 一样监视实例化属性的变化?

javascript - Angular http 数据显示在一个 div 而不是另一个

javascript - 用于查找 Web 浏览器和浏览器错误之间呈现行为差异的资源

javascript - 当鼠标静止时使框淡出并在鼠标移动时淡入