Search code examples
javascriptangularjsnode.jsexpressurl-routing

Angular.js routing: how do I reach endpoint routes?

After trying all I can imagine, and reading several posts here, I think I need your help! I have a webapp based on node and express on the server and Angular on the client. I am using angular routing.

BASIC INFO

I have the routing set up like the following:

mainApp.config(['$routeProvider',
        function($routeProvider) {
            $routeProvider
            .when('/home', {
                templateUrl: 'initial.ejs',
                controller: 'controllerInitialView'
            })
            .when('/home/post', {
                templateUrl: 'post.ejs',
                controller: 'controllerAddPost'
            })
            .... other /home/something routes ..
            .otherwise({
                redirectTo: '/home'
            });
            }
           ]);

The html template is organized as follows:

<div class="container-fluid">
      <div class="row">
      <!-- Left Columns: With links to views -->
      <div class="col-xs-2 home-bd-dx">
       <ul>
        <li>
          <a href="/home/post"> Post </a>
        </li>
        ...
        <li>
          <a href="/logout"> Logout </a>
        </li>
      </ul>
     </div>

    <!-- Central Columns: Here the views are inserted -->
    <div class="col-xs-10">
      <div ng-view></div>
    </div>

   </div>
  </div>

The issue is with the Logout link. I have a server serverapp.get('/logout') link which uses passport.js to logout the user. However, I cannot manage to reach that link. Whatever I try transforms my /logout, into /home/logout, and it is handled by Angular rather than by the server.

QUESTION

So here is the question: how can I create links to endpoint routes in Angular without Angular router intercepting them?

ADDITIONAL INFO IF NEEDED

The express server is has a route serverapp.get('/home/*') which delegates these routes to Angular.js by returning the template I sketched above.

I tried with and without a <base href="/home"> tag in the <head> with no luck

I tried creating a route '/home/logout', and then having the angular $window.location.href="/logout"; in the controller of /home/logout. No luck also in this case.

Solution

  • If I understand you correctly, what you're trying to do is disabling deep linking for certain URLs. You can do that by adding target="_self" to the <a> tag.

    Try this:

    <a href="/logout" target="_self">Logout</a>

    Now the URL the link is pointing to will be handled by the server instead of Angular.