HTML5 pushstate को angular.js पर उपयोग करना

Question

मैं Angularjs द्वारा उपयोग किए गए # नेविगेशन के बजाय HTML5 के पुशस्टेट को लागू करने का प्रयास कर रहा हूं। मैंने उत्तर के लिए 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'
            });
    }])

Answer 1

अपने कॉन्‍फ़‍िगरेशन में $ locationProvider इंजेक्षन करें, और सेट करें $locationProvider.html5Mode(true)।

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

सरल उदाहरण:

जे एस:

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>

Comments

क्या मैं इसके लिए एक कोड नमूना देख सकता हूं जब मार्गप्रोवाइडर के लिए पहले से ही कॉन्फ़िगर () है? निश्चित नहीं है कि क्या मैं इसके लिए एक नया विन्यास () बनाने वाला हूँ या इसे पहली बार किसी विन्यास के रूप में जोड़ रहा हूँ, और यह भी निश्चित नहीं है कि configFn क्या होना चाहिए ( docs.angularjs.org/api/angular.module )

— माइक क्रिटेंडेन

मैंने ऐसा ही किया है, लेकिन जब मैं क्लिक करता हूं / फोन /: phoneId टेम्प्लेट url बन फोन / पार्टिकल्स / फोन-डिटेल। html और फायरबग नेट टैब दिखाता है html पेज नहीं मिला

— Ajay Beniwal

जब भी मैं ब्राउज़र में दिए गए url पर नेविगेट करता हूं (जैसे कि /homeइसके बजाय /) मैं भी पृष्ठ नहीं पा रहा हूं । क्या आपने अपनी साइट के लिए HTML5 को सक्षम करने का प्रयास किया है?

— एंड्री Drozdyuk

आपको पृष्ठों को सही ढंग से खींचने के लिए अपने सर्वर को कॉन्फ़िगर करना होगा। जब आप नेविगेट करने का प्रयास करते हैं mysite.com/hello, तो यह आपके सर्वर से उस पृष्ठ को प्राप्त करने की कोशिश कर रहा है। इसके बजाय, आप चाहते हैं कि ब्राउज़र जीईटी को प्राप्त हो mysite.comऔर फिर ब्राउज़र के स्थान को खोजने के लिए कोणीय का उपयोग करें और /helloवहां जाएं। तो आपको अपने सर्वर को mysite.comडेटा को वापस देने के लिए कॉन्फ़िगर करने की आवश्यकता है कोई बात नहीं जो उपडोमेन दर्ज किया गया है।

— एंड्रयू जोसलिन

मैं कहूंगा कि अपनी बाकी एपीआई को /apiया कुछ और, और फिर सब कुछ बना / लेकिन / एपीआई / * index.html दे।

— एंड्रयू जोसलिन