javascript - $locationProvider 在我的 Angular 页面中不起作用

标签 javascript angularjs

在我的 Angular 页面中,我使用了 $locationProvider .但它在我的网页中不起作用。我的控制台出现这样的错误,HTML5 模式下的 $location 需要存在标签!。所以我添加了一个<base href="/" /> ,这在我的 Angular 页面中也不起作用。在这里我提到了我的目录结构和我的代码。

这是我的 sample Project link也。帮我解决这个问题。

我的目录结构

 iwa (root directory)
  > js
      > lib
         -> angular.js
         -> angular.route.js
      -> app.js
  > views
      -> home.html
      -> about.html
 -> index.html

index.html

 <!DOCTYPE html>
 <html ng-app="inQueueWeb">
 <head lang="en">
     <meta charset="UTF-8">
     <script src="js/lib/angular.js"></script>
     <script src="js/lib/angular-route.js"></script>
  </head>
 <body>
     <div ng-view></div>
 </body>
     <script src="js/app.js"></script>
 </html>

app.js

  var iwa = angular.module('inQueueWeb', ['ngRoute']);

   iwa.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider) {
$routeProvider
   .when("/", {templateUrl: 'views/home.html'})
   .when("/rest", {templateUrl: 'views/about.html'});
$locationProvider.html5Mode(true);
}]);

我也试过这些

$locationProvider.html5Mode({enable: true, requireBase: false});

$locationProvider.html5Mode(true).hashPrefix('!');

最佳答案

您走在正确的轨道上。你必须添加 $locationProvider.html5Mode(true)到您应用的 .config()方法,然后添加一个 <base href="/">到你的 HTML 头。我认为您已经这样做了。

出了什么问题:使用$locationProvider.html5Mode(true) , hashbang ( /#mypage) URL 不是必需的。一个 URL 就是 /mypage ,没有哈希。您需要更新 views/templates/header.html 中的链接以适应这一点。

我已经更新了:

  • 你的 app.js添加$locationProvider.html5Mode(true) .
  • 你的 index.html添加<base href="/"> , 和
  • 你的 views/templates/header.html调整 anchor 链接。

希望对您有所帮助!你可以download an archive with the adjusted files here .

关于javascript - $locationProvider 在我的 Angular 页面中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30305249/

相关文章:

jquery - 公式居中模态

javascript - 从 PHP 页面动态值解析到弹出模态框

angularjs - PUT/DELETE 在 VS Community 2015 中使用 Angular 和 WebAPI 给出 ​​405 错误

angularjs - 渲染在我的自定义指令中的 setViewValue 之后吃掉空格

angularJS读取响应cookie参数为空

javascript - 设置输入来更新范围变量似乎不起作用

javascript - JS - 将无穷大结果变为 0

javascript - 在 for 循环中使用 Model.create() 和 save()

javascript - 具有不同 $stateParams 的 Ionic $ionicHistory.goBack

ios - Ionic ios 模拟器不加载谷歌地图