Angularjs:-How to generate arabic url in angularjs

Question

I am implementing an arabic site in which I want the url to be generated in arabic Fro eg:-program/يه تشامبيونز ليغ - مباشر

I have implemented the same for english in angularjs and ruby.SO the url is generating for english language

On click event I am calling a filter and the filter is helping me to deal with special characters.

The following is the code I have implemented in the filter:-

woi.filter('encodeUrl',['$routeParams','$rootScope',function($routeParams,$rootScope){
    return function(value){
        if(value != undefined)
        {
            return value.replace(/\$\#\*\!/g, 'CeNc').replace(/\"/g, 'DqO').replace(/\+/g, 'PLus').replace(/\[/g, 'ObR').replace(/\]/g, 'CbR').replace(/\@/g, 'AtR').replace(/\&/g, 'EmPe').replace(/\#/g, 'HaSh').replace(/\*/g, 'StAr').replace(/\$/g, "DoLr").replace(/\-/g, "~").replace(/\s/g, "-").replace(/\//g, "$").replace(/\?/g, '*').replace(/\%/g, 'PeRc');
        }
        else
        {
            return ""
        }
    }
}]);

But when I am trying to implement for arabic url it is giving me a strange output:-

For eg for programs I am getting-

www.example.com/#!/program/%D8%A8%D9%8A%D8%BA-%D8%A8%D9%88%D8%B3

So what should I do to generate the output ie url in arabic.Is there anything I can do to implement it in the filter

Answer 1

Try this solution:

replace the method "encodePath" in angular.js to this:

function toUTF(str) {       
    var b64 = window.btoa(unescape(encodeURIComponent(str)));
    var str2 = decodeURIComponent(escape(window.atob(b64)));
    return str2;
}
function encodePath(path) {
    var segments = path.split('/'), i = segments.length;
    while (i--) { segments[i] = toUTF(segments[i]); }
    return segments.join('/');
}

I mixed the 2 answers from: this answer and the answer from "tonman-neverwalk-alone"

Answer 2

I would like to say, We have a same problem with Thai also but in fact we should not change the angular source code for solve this problem because AngularJS need to be alway encode Uri when start the routing,If you wish to change this thing you should modify the angular source code at the line about.

function encodePath(path) {
    var segments = path.split('/'),
        i = segments.length;

    while (i--) {
        segments[i] = encodeUriSegment(segments[i]);
    }

    return segments.join('/');
}

To this :

function encodePath(path) {   
    return path;
}

for Support Firefox/Safari

function encodePath(path) {
    var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
    var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
    if (isFirefox || isSafari) {
        var segments = path.split('/'),
            i = segments.length;
        while (i--) {
            segments[i] = encodeUriSegment(segments[i]);
        }
    } else {
        return path;
    }    
}

Answer 3

You can use the following package which is written for Persian but it can also works for Arabic: Persian.js