Pass URL to as $routeParam in AngularJS app

Question

How can I pass actual URL (with slashes, commas, etc.) as a $routeParam to AngularJS App?

this will work: http://paprikka.github.io/le-bat/#/preview/asdadasda

Answer 1

Using $routeProvider in Angular 1.2, you can pass in a url if it's at the end of the path by adding an asterik to the pattern. The following should work whether or not you URLComponentEncode the url.

The route:

angular.module('angularApp', ['ngRoute'])
      .when('/frame/:picture_url*', {
        templateUrl: 'views/frame.html',
        controller: 'PictureFrame'
      });

The controller:

      .controller('PictureFrame', function($scope, $routeParams, $sce){
        //whitelist the URL
        $scope.picture_url = $sce.trustAsResourceUrl($routeParams.picture_url);
      });

Then in your template: