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不工作在本地主機

回答

相關問題