Search code examples
javascriptangularjsangularjs-routing

Angular routes for following links?

I have link as mention below and i want to write Angular route condition for that.

Link : 

1.www.example.com/level-1
2.www.example.com/level-1/level-2
3.www.example.com/level-1/level-2/level-3

Like this i have mega menu links so i want route condition for this so i can write in $routeProvider.when( '/level-1/:slug', {} );

I want this in dynamic way means i dont want to manually write level-1 as prefix terms.

Dynamic means it will be any terms as prefix in level 1 or level 2 or level 3

I have tried like this : 

.when( '/level-1/:slug', {
})
.when( '/level-1/level-2/:slug', {
})
.when( '/level-1/level-2/level-3/:slug', {
})

Its working fine but i dont want to do by this way.

Solution

  • You can pass as many params as you need to your router so try creating as many of them as segments you need in your route. This way:

    .when( '/:lev1/:slug', { ... })
.when( '/:lev1/:lev2/:slug', { ... })
.when( '/:lev1/:lev2/:lev3/:slug', { ... })

    of course, you can access these parameters in your controller the same you do with :slug. But be aware, these routes will catch all your states having 2, 3 or 4 segments so they can mess with other routes you have defined in your app... One thing you can do to avoid this problem is prefix all these routes with a fixed string of your choice. For example:

    .when( '/megamenu/:lev1/:slug', { ... })
.when( '/megamenu/:lev1/:lev2/:slug', { ... })
.when( '/megamenu/:lev1/:lev2/:lev3/:slug', { ... })

    EDIT: As per your comments it seems you need n levels in these routes and probably you will want to bind to the same controller. This leads to two possibilities:

    1) If you're using AngularJS 1.5 or later you can create a component and route to it, creating as bindings as parameters you need. You'll have enough with one route.

    2) if you use a previous version of AngularJS or you don't want to mess with the new component architecture then try doing this way: Define only one route with the maximum number of levels, let's say 5. Call all the routes with 5 segments plus the slug parameter, passing a dummy value to the not used ones, and then parse these parameters on your controller to see wich ones are valid.

    .when( '/megamenu/:lev1/:lev2/:lev3/:lev4/:lev5/:slug', { ... })

    then generate links like this:

    <a href="/megamenu/group/item/code/XXXXX/XXXXX/whatever123">CLICK ME</a>

    you will know then than 'XXXXX' is a placeholder and must be ignored in your controller.