AngularJS $ locationProvider.html5Mode不工作在本地主机

我想摆脱出现在我的UI路由器URL中的hashtag。（http://localhost:3000/email不起作用，但http://localhost:3000/#email工作。淘宝搜索后，我还没有找到适合我的情况。我现在在本地运行，所以我假设我不需要任何“服务器配置”，我包括“”在我的index.html

(function(angular) { 
    'use strict'; 
    angular.module('myApp', ['ui.router']) 



    .controller('MainController', function($scope, $route, $routeParams, $location) { 
     $scope.$route = $route; 
     $scope.$location = $location; 
     $scope.$routeParams = $routeParams; 
    }) 

    .config([ 
      ['$stateProvider', '$locationProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider, $locationProvider, $provide) { 

       $urlRouterProvider.otherwise('/email'); 

       // PAGES 

       $stateProvider 

        .state('email', { 
        url: '/email', 
        templateUrl: '../pages/email.html', 
        controller: 'EmailController' 
       }) 

       .state('about', { 
        url: '/about', 
        templateUrl: '../pages/about.html', 
        controller: 'AboutController' 
       }) 

       // ... the rest... 

       $locationProvider 
        .html5Mode(true); // enable html5Mode for pushstate ('#'-less URLs DOESN'T WORK) 
        .hashPrefix('!'); 

       $provide.decorator('$sniffer', function($delegate) { 
        $delegate.history = false; 
        return $delegate; 
       }); 

      }]);

来源

2016-03-04 Natu Myers

您需要按照文档建议配置本地服务器。 – georgeawg

你可以做到这一点在你运行阻滞：

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

以及网址的将domain.com/#foo改为domain.com/foo（这需要没有明确的基础）。

......或做在您运行阻滞：

$locationProvider.html5Mode(true);

...然后添加到您的HTML <head>：

<base href="/">

该解决方案提供了相同的结果作为第一，除了现在有一个指定的基地。

来源

2016-03-04 02:52:42 Lansana

没有人说你在工作。我改变了头标中的基本事物，并添加了你说的跑块。是因为我在使用Angular Materialize吗？ https://github.com/krescruz/angular-materialize –

不幸的是，你所有的答案都很棒，但我不得不选择一个。我只需要从scotch.io教程http://plnkr.co/edit/IzimSVsstarlFviAm7S7?p=preview中的新教训中重新开始，然后慢慢构建。我实际上无法追踪问题。 –

materialize/jquery似乎不能很好地与html5mode配合使用，因为某些组件依赖＃，例如模式和选项卡...... – Leon

你设置基地，在HTML文件相同如下：

<html> 
    <head> 
    <base href="/"> 
    </head> 
</html>

，你应该在配置删除.hashPrefix('!');，所以这段代码将同样在这里：

$stateProvider 

    .state('email', { 
    url: '/email', 
    templateUrl: '../pages/email.html', 
    controller: 'EmailController' 
}) 

.state('about', { 
    url: '/about', 
    templateUrl: '../pages/about.html', 
    controller: 'AboutController' 
}) 

// ... the rest... 

$locationProvider 
    .html5Mode(true); // enable html5Mode for pushstate ('#'-less URLs DOESN'T WORK) 

$provide.decorator('$sniffer', function($delegate) { 
    $delegate.history = false; 
    return $delegate; 
});

来源

2016-03-04 02:47:27 dieuhd

也许试试这个代码？我认为这可能归结为其中一个原因。

配置的依赖性没有正确设置（按顺序）
这.hasPrefix（！）放在一个分号之后。
还需要使用<base href='/'>（或者 '/邮件'？）

angular.module（ '对myApp'，[ 'ui.router']）

在 <head>标签分配的基本位置

.controller('MainController', function ($scope, $route, $routeParams, $location) { 
    $scope.$route = $route; 
    $scope.$location = $location; 
    $scope.$routeParams = $routeParams; 
}) 

.config(function ($stateProvider, $urlRouterProvider, $locationProvider, $provide) { 

    $urlRouterProvider.otherwise('/email'); 

    // PAGES 

    $stateProvider 

     .state('email', { 
      url: '/email', 
      templateUrl: '../pages/email.html', 
      controller: 'EmailController' 
     }) 

     .state('about', { 
      url: '/about', 
      templateUrl: '../pages/about.html', 
      controller: 'AboutController' 
     }); 

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

    $provide.decorator('$sniffer', function ($delegate) { 
     $delegate.history = false; 
     return $delegate; 
    });

}）;

道歉，我不能让代码示例行为。

来源

2016-03-04 12:46:44 yjimk

你的应用程序配置看起来像这样

app.config(function ($routeProvider,$locationProvider) { 
$locationProvider.html5Mode(true); 
$routeProvider 
    .when("/", { 
     templateUrl: 'url', 
     controller : 'mainController' 
    }) 
});

使用标签在页面头部

<base href="abc.com/"/>

这可能与以下HREF创建问题，将不会加载该页面正确

<a href="abc.com/about">About Us</a>

为了克服这个使用target="_self"在锚标记如下

<a href="abc.com/about" target="_self">About Us</a>

来源

2018-01-18 11:29:02

AngularJS $ locationProvider.html5Mode不工作在本地主机

回答

相关问题