Search code examples
javascriptangularjsprettyphoto

Angular.js : prettyPhoto URL redirected to default page mentioned in angular route


When I click any image associate with prettyPhoto Plugin, The URL of the browser get changed to example.com/#/prettyPhoto[residential1]/0/ and get redirect to the route that's defined in .otherwise({..})

app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/home', {
            title: 'Home',
            templateUrl: 'partials/home.html',
            controller: 'PageCtrl'
        })
        .otherwise({
            redirectTo: '/home'
        });
}]);

Can I do something like I mentioned below, eg: anything that defined after /prettyPhoto******* should redirected to /projects:

.when('/prettyPhoto[*anyArray*]/*anyNumber*/', {
            redirectTo: '/projects'
})

Solution

  • In the doc, It says :

    Route path (matched against $location.path). If $location.path contains redundant trailing slash or is missing one, the route will still match and the $location.path will be updated to add or drop the trailing slash to exactly match the route definition.

    Path can contain named groups starting with a colon: e.g. :name. All characters up to the next slash are matched and stored in $routeParams under the given name when the route matches. path can contain named groups starting with a colon and ending with a star: e.g.:name*. All characters are eagerly stored in $routeParams under the given name when the route matches. path can contain optional named groups with a question mark: e.g.:name?.

    For example, routes like /color/:color/largecode/:largecode*/edit will match /color/brown/largecode/code/with/slashes/edit and extract:

    So if i use what it says, your code becomes :

    .when('/prettyPhoto:anyArray/:anyNumber', {
            redirectTo: '/projects'
    })
    

    Doc : https://docs.angularjs.org/api/ngRoute/provider/$routeProvider

    I hope my answer fit you :)