How to separate between routing API Sails js and Angularjs

Question

I build standalone web using node js (Sails) for backend and angularJs for frontend on linux environment and nginx for production mode. I want to remove hash (#!) in my url. I follow this tutorial

1. AngularJS: How to remove #!/ (bang prefix) from URL?
2. https://www.youtube.com/watch?v=XsRugDQaGOo

Now my website is working properly without hash (#!) in every page as long as I don't refresh, but when I refresh, it call my API from backend or 404 not found. I following those tutorial to put

<base href="/"/>

on my layout.ejs but it still not work.

Here is my sample code for routing angularjs using state

(function() {
  'use strict';

  angular
  .module('buyer.routes', ['ui.router'])
  .config(function($locationProvider, $urlMatcherFactoryProvider, $urlRouterProvider, $stateProvider){
    $urlRouterProvider.otherwise("/");
    $urlMatcherFactoryProvider.caseInsensitive(true);
    $stateProvider
    .state('home', {
      url: '/',
      templateUrl: 'templates/buyer/buyer-index.html',
      controller: 'BuyerController',
      controllerAs: 'vm'
    })

    .state('home.testi', {
      url: 'testimoni',
      templateUrl: 'templates/buyer/buyer-testimoni.html',
      controller: 'BuyerTestimoniController',
      controllerAs: 'vm',
      data : { pageTitle: 'Testimoni page'}
    })

    $locationProvider.hashPrefix('');
    $locationProvider.html5Mode(true);

  })

}());

Whats wrong with my code? Thankyou

Answer 1

There is nothing wrong in your code, but you need to understand the concept. Angular SPA application changes the URL according to the component you are accessing. This has nothing to do with back-end. No request will be sent to back-end in this case.

However, when you refresh your browser, request is sent to back-end and back-end does not find any resource matching this URL, hence returns 404. To handle this, you have to make your back-end able to handle all these URL's in generic way.

You can handle these requests in your back-end in different ways based on your requirements. Few options are:

1. On refresh, logout the user.
2. On refresh, redirect to base URL.