Menu
this will work: http://paprikka.github.io/le-bat/#/preview/asdadasda
this won't: http://paprikka.github.io/le-bat/#/preview/http://page.com
neither will this: http://paprikka.github.io/le-bat/#/preview/http%3A%2F%2Fpage.com
or this: http://paprikka.github.io/le-bat/#/preview/?url=http%3A%2F%2Fpage.com
AngularJS routing mechanism by its design does not allow to pass strings with slashes as query parameters. I can understand the reasoning behind this decision - we don't want to create a stateless server here.
However, there are still cases when using different separators or regular expressions in routes might be necessary.
I wanted to create an app that takes a url hash string parameter and loads its content to an iframe (link here). Routes are set up in pretty standard way (I'm using Coffeescript, but this snippet does not differ from pure js):
$routeProvider
.when('/preview/:src', {templateUrl: 'partials/preview.html',
controller: 'PreviewCtrl'})
.when('/preview', {templateUrl: 'partials/preview.html',
controller: 'PreviewCtrl'})
Of course, I can load url from hash before AngularJS gets bootstrapped and then pass it to the library, but it would be nice if I could also update current route parameter when changing data in scope - that's why I think it's much better not to avoid AngularJS API.
521
Creating a Default Route in AngularJS The below syntax just simply means to redirect to a different page if any of the existing routes don't match. otherwise ({ redirectTo: 'page' }); Let's use the same example above and add a default route to our $routeProvider service. function($routeProvider){ $routeProvider.
To use params simply append them like this: $routeProvider. when('/view1/:param1/:param2', { templateUrl: 'partials/partial1. html', controller: 'MyCtrl1' });
The $routeParams service allows you to retrieve the current set of route parameters. Requires the ngRoute module to be installed. The route parameters are a combination of $location 's search() and path() . The path parameters are extracted when the $route path is matched.
With the $routeProvider you can define what page to display when a user clicks a link.
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:
<iframe ng-src="{{picture_url}}"></iframe>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
