Angular Route for specific url

Question

I'm currently working on a MEAN stack project and am trying to get a specific template to display on a specific url.

Currently if users goto www.myurl/catalog, it loads the catalog.html template, as it would with any /catalog?catagory=productType url.

I would like it so that when users go to /catalog?category=specificProductType that it loads the catalogSpecific.html template. Currently, the catalog.html template supersedes the catalogSpecific.html template. I can't find much about this specific issue so any help would be appreciated.

Currently my routes look like this:

app/front/app.js

angular.module('app', ['ngRoute',
                    'app.LandingModule.controller',
                    'app.CatalogModule.controller',
                    'app.ProductModule.controller',
                    'app.HeaderModule.directives',
                    'app.FooterModule.directives'
                    ])


.config(['$routeProvider', function($routeProvider) {
  $routeProvider
.when('/', {
  templateUrl: 'html/landing.html',
  controller: 'LandingController'
})
.when('/catalog', {
  templateUrl: 'html/catalog.html',
  controller: 'CatalogController'
})
.when('/catalog?category=specificProductType', {
  templateUrl: 'html/catalogSpecific.html',
  controller: 'CatalogController'
})
.otherwise({
  redirectTo: '/'
});
}]);

John Gallagher · Answer 1 · 2017-05-31T19:30:29.007

EDIT: Seems I was wrong about this not being possible with the default router. As Hadi describes in their comment, you can replace "templateUrl" with a function that returns a template url given the current route.

To my knowledge you cannot route the way that you want to with the built-in angular router.

As far as I can see you have two options to go with from here:

1: Learn to use the ui-router library (found here: https://github.com/angular-ui/ui-router)

2: Send all routes from /catolog to a controller/page that manually looks at your route-params and re-routes you based off of that manually. (see https://docs.angularjs.org/api/ngRoute/service/$routeParams)

I tried Hadi's suggestion, but have not been successful, I will take a look at your links. Thanks! — expenguin, May 31 '17 at 20:14

Hadi J · Answer 2 · 2017-05-31T20:58:50.080

2

Try use templateUrl function like to this. I have not tested.

  templateUrl: function($location){
     if($location.category)
         return 'html/catalogSpecific.html';
       else
          return  'html/catalog.html'; 
 },

Demo

edited May 31 '17 at 20:58

answered May 31 '17 at 19:08

Hadi J

16,989
4
36
62

I tried the following in my routes: if($location.search().category = "specificProductType") I also tried for giggles: if($location.search().category == "specificProductType") No luck there, it just breaks my app. I think this was the right direction, but I'm clearly still doing something wrong (this is my first time using angular) – expenguin May 31 '17 at 20:13
Hey Hadi, I checked your answer, but it doesn't seem any different. I'm trying to match the string that follows the category= such like. /catalog?category=specificProductType would lead me to my specific template, and all other categories, /catalog?category=specificProductType#2, /catalog?category=specificProductType#3 and so on would lead me to the generic category template. – expenguin Jun 06 '17 at 13:50
Hey Hadi, I was able to figure this out following your example. I ended up with .when('/catalog', { templateUrl: function($location){ if($location.category == "specificProductType") { return 'html/catalogSpecific.html'; } else { return 'html/catalog.html'; } }, controller: 'CatalogController' }) – expenguin Jun 06 '17 at 14:01
1

It was just sample to displayed how to do. – Hadi J Jun 06 '17 at 14:21
Yup! Thanks again! – expenguin Jun 06 '17 at 14:31
I had one more question, is it possible to do this with the controller too? Based on a specificProductType, use specificProductType controller. – expenguin Jun 08 '17 at 14:06
1

see https://stackoverflow.com/questions/18423054/dynamically-loading-the-controller-in-angularjs-routeprovider and https://stackoverflow.com/questions/28442865/angularjs-routeprovider-with-dynamic-controller-name-wont-load – Hadi J Jun 08 '17 at 14:27

score 1 · Accepted Answer · answered Jun 06 '17 at 14:02

I was able to figure this out following Hadi's example:

    .when('/catalog', {
  templateUrl: function($location){
            if($location.category == "specificProductType") {
            return 'html/catalogSpecific.html';         
        } else {
            return 'html/catalog.html';
       }
},
  controller: 'CatalogController'
})

Angular Route for specific url

3 Answers3