AngularJS route options with any characters

I'm new to AngularJS, so forgive me if this is obvious, but I'm looking for someone who can answer this difficult question. I am implementing an application and must pass some parameters to a specific view in order to display information about the book. Basically, I would like to be able to use the following routing expressions:

bookApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/catalog', {
            templateUrl: 'cataloglist.htm',
            controller: 'catCtrl'
        }).
        when('/book/:title/:chapter', {
            template: 'chapterdetail.htm',
            controller: 'chapterCtrl'
        }).
        otherwise({
            template: 'oops ... do not understand that route',
        });
    }]);

The expression /book/:title/:chaptershould allow me to convey the name of the title of the book. I expect that I can convey ANY title of any book. To make sure everything is properly bounded, I am going to URL-encode the value of the header, so that there will not be any slashes in the encoded value, and the value will be clearly limited by slashes. This is a common way to create URLs containing values.

, , (, The 3/5 solution). URL The+3%2F5+Solution. , URL-:

 /app/#/book/The+3%2F5+Solution/The%20Beginning

, , URL- , ! , , , . , .

REST-, URL- , URL- , . , URL-, :

app.jsp?title=The+3%2F5+Solution&chapter=The%20Beginning

. URL, . , ... , AngularJS.

%2F , , . -, . - ?. ( ) ?

+5
4

angular route.js , , :

path , : , :name*. $routeParams name, .

, , /color/:color/largecode/:largecode*\/edit, /color/brown/largecode/code/with/slashes/edit :
color: brown
largecode: code/with/slashes.

:largecode*\ . , , . , , , / .

, : /book/:title*/chapter/:chapter*

/chapter/. , . /book/:title*/:chapter*, :title* named. , /:title*/chapter/:chapter*, angular , :title* : /chapter/ . /chapter/ :chapter* named

+10

, URL - . , , , - , , URL- , , .

BASE 64 , , , :

    bookApp.filter('btoa', function() {
        return function (str) {
            return window.btoa(encodeURIComponent(escape(str)));
        }
    });

    bookApp.filter('atob', function() {
        return function(str) {
            return unescape(decodeURIComponent(window.atob(str)));
        }
    });

:

<a href="#/book/{{title | atob}}/{{chapter | atob}}">See Details</a>

btoa, . The 3/5 solution VGhlJTI1MjAzJTJGNSUyNTIwc29sdXRpb24=, .

. ๅฅฅใฎ็ดฐ้“ JTI1dTU5NjUlMjV1MzA2RSUyNXU3RDMwJTI1dTkwNTM= - , , .

encodeURIComponent escape , JS, UTF-8, window.atob, Unicode . Mozilla Developer Network

+3

('/catalog/: book', {           templateUrl: 'cataloglist.htm',           : 'catCtrl'       })

, "/" ( ), , encodeURIComponent, "/" "% 2F".

$window.location = '/catalog/' + encodeURIComponent (Solution/The %20Beginning);

0

github: https://github.com/angular/angular.js/issues/10479 param :

encodeURIComponent(encodeURIComponent("The 3/5 solution"))
0

Source: https://habr.com/ru/post/1568855/


All Articles