Angular JS 'route' doesn't match component with / (encoded '/')

Question

I have a \'route\' in Angular JS as follows

$routeProvider.when(\'/foos/:fooId\', { controller: FooController, templateUrl: \'foo.html\'});

Answer 1

You can't easily do this because if you use a link with %2F in it, the browser will just decode it for you and it'll end up being /. AngularJS currently doesn't allow you to use / in $route params.

You can double encode it, like in this plnkr: http://plnkr.co/edit/e04UMNQWkLRtoVOfD9b9?p=preview

var app = angular.module('app', []);

app.controller('HomeCtrl', function ($scope, $route) {
});
app.controller('DirCtrl', function ($scope, $route) {
  var p = $route.current.params;

  $scope.path = decodeURIComponent(p.p1);
});

app.config(function ($routeProvider) {
    $routeProvider
            .when('/', {templateUrl: 'home.html', controller: 'HomeCtrl'})
        .when('/dir/:p1', {templateUrl: 'dir.html', controller: 'DirCtrl'})
            .otherwise({redirectTo: '/'});

});

And the link would be: click here.

Another option, if you have a set number of / characters in your parameters can be found here: How can I make the angular.js route the long path