การใช้ HTML5 pushstate บน angular.js


84

ฉันกำลังพยายามใช้ pushstate ของ html5 แทน # navigation ที่ Angularjs ใช้ ฉันได้ลองค้นหาคำตอบของ Google แล้วและลองใช้ห้องสนทนา irc เชิงมุมโดยยังไม่มีโชค

นี่คือของฉันcontrollers.js:

function PhoneListCtrl($scope, $http) {
    $http.get('phones/phones.json').success(function(data) {
        $scope.phones = data;
    });
}

function PhoneDetailCtrl($scope, $routeParams) {
  $scope.phoneId = $routeParams.phoneId;
}

function greetCntr($scope, $window) {
    $scope.greet = function() {
    $("#modal").slideDown();
    }
}

app.js

angular.module('phoneapp', []).
    config(['$routeProvider', function($routeProvider){
        $routeProvider.
            when('/phones', {
                templateUrl: 'partials/phone-list.html',
                controller: PhoneListCtrl
            }).
            when('/phones/:phoneId', {
                templateUrl: 'partials/phone-detail.html',
                controller: PhoneDetailCtrl
            }).
            otherwise({
                redirectTo: '/phones'
            });
    }])

คำตอบ:


129

ฉีด $ locationProvider $locationProvider.html5Mode(true)เข้าสู่การตั้งค่าของคุณและชุด

http://docs.angularjs.org/api/ng.$locationProvider

ตัวอย่างง่ายๆ:

JS:

myApp.config(function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider
    .when('/page1', { template: 'page1.html', controller: 'Page1Ctrl' })
    .when('/page2', { template: 'page2.html', controller: 'Page2Ctrl' })
});

HTML:

<a href="/page1">Page 1</a> | <a href="https://stackoverflow.com/page2">Page 2</a>

ฉันขอดูตัวอย่างโค้ดได้ไหมเมื่อมี config () สำหรับ routeProvider อยู่แล้ว ไม่แน่ใจว่าฉันควรจะสร้าง config () ใหม่สำหรับสิ่งนี้หรือเพิ่มเป็นลำดับแรกเป็นอาร์เรย์ของการกำหนดค่าและไม่แน่ใจว่า configFn ควรเป็นอย่างไร ( docs.angularjs.org/api/angular.module )
Mike Crittenden

ฉันได้ทำเช่นเดียวกัน แต่เมื่อฉันคลิก / โทรศัพท์ /: phoneId url เทมเพลตกลายเป็นโทรศัพท์ / บางส่วน / phone-detail.html และแท็บ firebug net แสดงหน้า html ไม่พบ
Ajay Beniwal

ฉันยังไม่พบเพจเมื่อฉันไปที่ url ที่ระบุในเบราว์เซอร์ (เช่น/homeแทนที่จะเป็น/) คุณได้ลองเปิดใช้ html5 สำหรับไซต์ของคุณเองแล้วหรือยัง?
Andriy Drozdyuk

37
คุณต้องกำหนดค่าเซิร์ฟเวอร์ของคุณเพื่อให้คุณสามารถดึงเพจได้อย่างถูกต้อง เมื่อคุณพยายามนำทางไปยังmysite.com/helloมีการพยายามรับหน้านั้นจากเซิร์ฟเวอร์ของคุณ แต่คุณต้องการให้เบราว์เซอร์ GET mysite.comจากนั้นใช้เชิงมุมเพื่อค้นหาตำแหน่งของเบราว์เซอร์/helloและไปที่นั่น ดังนั้นคุณต้องกำหนดค่าเซิร์ฟเวอร์ของคุณให้คืนmysite.comข้อมูลไม่ว่าจะป้อนโดเมนย่อยใดก็ตาม
Andrew Joslin

18
ฉันจะบอกว่าใส่ API ที่เหลือของคุณที่/apiหรือบางอย่างแล้วสร้างทุกอย่างยกเว้น / api / * ให้ index.html
Andrew Joslin
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.