AngularJS specific HTML on route suffix

Question

I am building a simple gallery with Angular and I am trying to have a template shown on some route, which is very easy with angular.

some.site/#/gallery

is done with

App.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider
            .when('/gallery', {
                templateUrl: 'js/views/gallery/main.htm',
                controller: 'galleryCtrl',
                controllerAs: 'gallery'
            })
            .otherwise({
                redirectTo: '/'
            });
    }
]);

But then I want to have a div popup when user clicks on thing and goes to

some.site/#/gallery/thing/1

Note that I still want my gallery to be on the background.

My initial idea was to have that div always hidden unless there's */thing so that I could just get the id like so */thing/:id when needed, but this approach seems rather ugly, because why have that thing hanging in there all the time?

Are there any other, better ways of doing that?

maybe you can hook into the [global route change events](http://stackoverflow.com/a/15009419/36938) and check for `/#/gallery/thing/1` there to toggle the popup? just a suggestion. — Taylan Aydinli, Feb 17 '15 at 09:47

score 0 · Accepted Answer · answered Feb 17 '15 at 09:55

What you can do is set a $routeParam depending on your route, let's say:

if url is /gallery, then 'showPopup' = false
if url is /gallery/thing/:id, then 'showPopup' = true

and then in your html you bind the popup state to $routeParams.showPopup.

To do so, you can set the params directly in your mapping:

App.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider
        .when('/gallery', {
            templateUrl: 'js/views/gallery/main.htm',
            controller: 'galleryCtrl',
            controllerAs: 'gallery',
            resolve: {
              ignored: function ($route) { 
                 $route.current.params.showPopup = false; 
               }
            }
        })
        .when('/gallery/thing/:id', {
            templateUrl: 'js/views/gallery/main.htm',
            controller: 'galleryCtrl',
            controllerAs: 'gallery',
            resolve: {
              ignored: function ($route) { 
                 $route.current.params.showPopup = true; 
               }
            }
        })
        .otherwise({
            redirectTo: '/'
        });
  }
]);

Hope I helped !

i ended up doing pretty much the same thing, though after rethinking the architecture of my routing i didn't need to 'hide' that variable in $routeParams. Your method is pretty useful in other circumstances, so thanks again) — funthing, Feb 17 '15 at 18:49
You're welcome ! If it answers your question, I encourage you to accept the answer (by clicking the green tick) so that other users knows there is a solution to the question you ask. — tanou, Feb 18 '15 at 08:50

AngularJS specific HTML on route suffix

1 Answers1