Coding notes: January 2017

Sunday, January 15, 2017

Angular JS and URLs

While trying to run a demo application from a tutorial from OpenClassroom, I was confronted with the problem that all my URLs were rewritten with a trailing #. This ruined my navigation.

From a few contributions in Stackoverflow (especially this one), I found a solution:
1. Configuring $locationProvider
- This causes the browser running in html5mode, removing the need for adding # to the url

2. Setting the base for relative links

1. Configuring $locationProvider

in the file app.js

angular.module('cineAngularApp', ['ngRoute'])
  .config(function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {

...

});

    $locationProvider.html5Mode(true);  });


2. Setting the base for relative links
in index.html:
<html>
<base href="/">
...
</html>

Afterwards, I still had the problem that all urls were rewritten with a %2F. This is related to the fact that AngularJS 1.6 has changed the default for hash-bang urls in the $location service.

Just have to configure $locationProvider to change the behavior (see this post):    $locationProvider.hashPrefix('');