How to route without a templateUrl?

Question

Ok. I have a url setup to log a user out. On the server, there is no html. The session on the server simply gets destroyed, and then the user is redirected to an address.

This works fine with plain html, but with Angular i am having issues. I've been routing all main routes using $routeProvider.when('/foo', {templateUrl: '/foo.html', controller: 'Ctrl'}) and that works fine for normal templated routes.. however, if there is no template it will not work.

So, how do i support the route /logout in the same fashion as above, when there is no html template?

score 60 · Accepted Answer · edited May 11 '16 at 12:56

60

A workaround is to use template instead of templateUrl. From the Angular docs:

template – {string=} – html template as a string that should be used by ngView or ngInclude directives. this property takes precedence over templateUrl.

This can be used as follows:

$routeProvider.when("/foo", {template: " ", controller: "Ctrl"});

Note: You must use " " instead of an empty string "" because Angular uses an if (template) check before firing the controller, and an empty string evaluates to false.

-- EDIT --

A better way to do it is to use the resolve map. See the Angular Docs:

resolve - {Object.=} - An optional map of dependencies which should be injected into the controller.

This can be used like this:

$routeProvider.when('/foo', {resolve: {redirect: 'RedirectService'}});

Note: I've changed it from "Ctrl" to "RedirectService", because what you're describing in the question isn't really a "controller" in the Angular sense. It doesn't set up scope for a view. Instead, it's more like a service, which ends up redirecting.

edited May 11 '16 at 12:56

Antonio Pérez

6,702
4
36
61

answered Jan 19 '13 at 07:16

Lukas

9,765
2
37
45

5

PS I've created [an issue](https://github.com/angular/angular.js/issues/1838) on GitHub for this. – Lukas Jan 19 '13 at 07:32
3

After discussion on the GitHub issue, I've updated my answer with a better solution at the end. – Lukas Jan 21 '13 at 18:26
The second example, `$routeProvider.when('/foo', {resolve: {controller: 'Ctrl'}})`, makes Angular look for a 'CtrlProvider' rather than a real Controller named 'Ctrl'. Do you have an example of the controller setup? – Ross Allen Jul 28 '13 at 02:16
2

http://jsfiddle.net/j6j2P/ You need to use "factory" instead of "controller". Really, the answer should be updated to show that "Ctrl" isn't actually a "controller" in the Angular sense. It doesn't set up any scope. – Lukas Jul 29 '13 at 15:17
I prefer to add custom property in `$routeProvider.when()` and listen on `$routeChangeSuccess` to see on $route.current.customProp. See http://www.bennadel.com/blog/2420-mapping-angularjs-routes-onto-url-parameters-and-client-side-events.htm – CallMeLaNN May 22 '14 at 17:25

score 9 · Answer 2 · answered Jul 23 '15 at 12:54

I am writing the solution based on the already accepted answer and the github issue mentioned in it's comments.

The approach I am using is a resolve parameter in the $routeProvider. In my case I was trying to create a nice solution to logout in my application, when user goes to /logout.

Example code of $routeProvider:

app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
        ...
        when('/logout', {
            resolve: {
                logout: ['logoutService', function (logoutService) {
                    logoutService();
                }]
            },
        }).
        ...
}]);

In the resolve part you specify a service (factory) by name and later on you have to call it. Still it is the nicest solution around.

To make the example complete I present my logoutService:

angular.module('xxx').factory('logoutService', function ($location, Auth) {
    return function () {
       Auth.setUser(undefined);
       $location.path('/');
    }
});

Works great!

How to route without a templateUrl?

2 Answers2

Linked