How to route without a templateUrl?

2019-03-09 17:08发布

问题:

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?

回答1:

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.



回答2:

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!