यूआरएल क्वेरी पैरामीटर के साथ कोणीय यूई-राउटर जिसमें "डॉट"

Question

हमारे कोणीय ऐप में हमें आईडी के साथ सौदा करना होगा जिसमें "डॉट" होता है। उदाहरण के लिए:

book = { 
    id: '123.456' 
} 

हमें ऐसी आईडी का उपयोग यूआरएल पैरामीटर के रूप में करने में समस्याएं हैं। अगर नेविगेशन "कोणीय" के माध्यम से होता है, तो $state.go('bookDetails', {bookId: book.id}); को आमंत्रित करने वाले लिंक पर क्लिक करने पर सभी ठीक काम करते हैं। जब पृष्ठ को पुनः लोड लेकिन चीजें काम नहीं करते

नियंत्रक में

"/bookDetails?bookId=123.456 प्राप्त नहीं कर सकते": ध्यान में रखते हुए

$scope.viewBookDetails = function() { 
    $state.go('bookDetails', {bookId: book.id}); 
} 

<a href="" ng-click="viewBookDetails(); $event.stopPropagation();"> 

में

राउटर:

.state('bookDetails', { 
    url: '/bookDetails?bookId' 
} 

ब्राउज़र में:

https://example.com/bookDetails?bookId=123.456 

लिंक काम करता है "डॉट" ब्राउज़र में %2E साथ बदल दिया है।

हम "% 2 ई" $ state.go()

$scope.viewBookDetails = function() { 
    $state.go('bookDetails', {bookId: book.id.split('.').join('%2E')}); 
} 

के लिए पैरामीटर के साथ "डॉट" को बदलने के लिए कोशिश की, लेकिन क्योंकि "%" स्वचालित रूप से एन्कोड किया गया है काम नहीं करता है और "डॉट" ब्राउज़र में "% 252E"

https://example.com/bookDetails?bookId=123%252E456 

Answer 1

ताज़ा समस्या मैं एक यूआरएल क्वेरी एक 'डॉट' वाले पैरामीटर के साथ हो रही थी एक सर्वर समस्या है।
यह रास्ता मैं html5mode से निपटने के कारण होता है घुरघुराना सर्वर सेटिंग्स

// The original grunt server settings 
connect: { 
    options: { 
    port: 9000, 
    // Change this to '0.0.0.0' to access the server from outside. 
    hostname: 'localhost', 
    livereload: 35729 
    }, 
    livereload: { 
    options: { 
     open: true, 
     middleware: function (connect) { 
     return [ 
      require('connect-modrewrite')(['^[^\\.]*$ /index.html [L]']), //Matches everything that does not contain a '.' (period) and causes the problem 
      connect.static('.tmp'), 
      connect().use(
      '/bower_components', 
      connect.static('./bower_components') 
     ), 
      connect().use(
      '/app/styles', 
      connect.static('./app/styles') 
     ), 
      connect.static(appConfig.app) 
     ]; 
     } 
    } 
    }, 

में (अगर एक स्थिर संसाधन नहीं है index.html रीडायरेक्ट करता है) मैं

को

require('connect-modrewrite')(['^[^\\.]*$ /index.html [L]']), 

बदल

require('connect-modrewrite')([ 
    '!\\.html|\\.js|\\.css|\\.svg|\\.jp(e?)g|\\.png|\\.gif|\\.ttf$ /index.html' 
]), 

Answer 2

मैंने कोड को पूरी तरह से संशोधित किया है। मैं डॉट्स ठीक का उपयोग कर सकता हूं इसलिए कृपया प्लंकर को यह दिखाने के लिए फोर्क करें कि आपको एक त्रुटि कहां मिल रही है।

http://plnkr.co/edit/Ct09Q9uoc282JuWdsO1s?p=preview

console.log("Scripts loading... "); 
 

 
// Here's a skeleton app. Fork this plunk, or create your own from scratch. 
 
var app = angular.module('demonstrateissue', ['ui.router']); 
 

 
app.controller('myController', function($scope, $state){ 
 
    $scope.book = { 
 
    id: '123.456' 
 
}; 
 
    
 
    $scope.viewBookDetails = function() { 
 
    console.log('new id'); 
 
    $state.go('bookDetails', {bookId: 456.3456}); 
 
    } 
 
}); 
 

 

 

 
// Empty config block. Define your example states here. 
 
app.config(function($stateProvider, $urlRouterProvider, $urlMatcherFactoryProvider) { 
 
    $stateProvider.state('bookDetails', { 
 
    url: '/bookDetails:bookId', 
 
    controller: function($scope, $stateParams) { 
 
     $scope.book = { 
 
     id: $stateParams.bookId 
 
     }; 
 
    }, 
 
    template: "<h3>book: {{book}}</h3>" 
 
    }); 
 

 
    $urlRouterProvider.otherwise("/bookDetails/91.23"); 
 
}); 
 

 
// Adds state change hooks; logs to console. 
 
app.run(function($rootScope, $state, $location) { 
 
    
 
    $rootScope.$state = $state; 
 
    $rootScope.$location = $location; 
 
    
 
    function message(to, toP, from, fromP) { 
 
    return from.name + angular.toJson(fromP) + " -> " + to.name + angular.toJson(toP); 
 
    } 
 
    
 
    $rootScope.$on("$stateChangeStart", function(evt, to, toP, from, fromP)  { console.log("Start: " + message(to, toP, from, fromP)); }); 
 
    $rootScope.$on("$stateChangeSuccess", function(evt, to, toP, from, fromP)  { console.log("Success: " + message(to, toP, from, fromP)); }); 
 
    $rootScope.$on("$stateChangeError", function(evt, to, toP, from, fromP, err) { console.log("Error: " + message(to, toP, from, fromP), err); }); 
 
});

body { 
 
    margin-top: 6em; 
 
} 
 
.link { 
 
    text-decoration: underline; 
 
    color: blue; 
 
} 
 

 
.link:hover { 
 
    cursor: pointer; 
 
} 
 

 
.header { 
 
    position: fixed; 
 
    right: 0; 
 
    top: 0; 
 
    height: 6em; 
 
    width: 100%; 
 
    border-bottom: 1px solid gray; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <script src="https://code.angularjs.org/1.2.25/angular.js"></script> 
 
    <script src="https://rawgit.com/angular-ui/ui-router/0.2.13/release/angular-ui-router.js"></script> 
 
    <script src="main.js"></script> 
 
    <link rel="stylesheet" href="styles.css" /> 
 
    <title>Plunk demonstrating ui-router issue</title> 
 
    </head> 
 

 
    <body ng-app="demonstrateissue"> 
 

 
     <div ui-view>ui-view not populated</div> 
 
    
 
     <div class="header"> 
 
     Current URL: <b>{{$location.url() }}</b> <br> 
 
     Current State: <b>{{$state.current.name }}</b> <br> 
 
     Current Params: <b>{{$state.params | json }}</b><br> 
 
     </div> 
 
    <br/> 
 
    <br/> 
 
    <div ng-controller="myController"> 
 
     {{book}} 
 
     <br/> 
 
     <a ui-sref="bookDetails({bookId: 6789.1011})">Change params to book with dot</a><br/> 
 
     <button ng-click="viewBookDetails()">View Book Details</button> 
 
     </div> 
 
    </body> 
 
</html>

Answer 3

यदि आप अपने सर्वर पर connect-history-api-fallback का उपयोग कर रहे हैं (जैसे lite-server करता है), तो डॉट वाले URL डिफ़ॉल्ट रूप से फिर से लिखे नहीं जाते हैं।

connect-history-api-fallback code

if (parsedUrl.pathname.indexOf('.') !== -1) { 
    logger(
    'Not rewriting', 
    req.method, 
    req.url, 
    'because the path includes a dot (.) character.' 
); 
    return next(); 
} 

connect-history-api-fallback संस्करण 1.2 के साथ शुरू।0URLs with dots are allowed और आप आ rewrite roule

उदाहरण का उपयोग करके this problem हल कर सकते हैं

तो बिंदु से आपका यूआरएल है /api/test/:id (उदा। /api/test/123.34) और आप index.html पेज में कोणीय एप्लिकेशन जीवन आप किसी पुनर्लेखन जोड़ सकते हैं इस

rewrites: [ 
    { 
    from: /^\/api\/test\/[0-9]+\.[0-9]+$/, 
    to: 'index.html' 
    } 
    } 
]