title: AngularJS routing services issues with different browsers
body: <p>I just finished coding a new WEB project using AngularJS and Bootstrap. The development took place using Brackets, which launches Chrome for testing (while Brackets itself functions as the SERVER). </p>
  
  <p>So far, everything works as required both when Brackets is used as the SERVER as well as when the whole project is deployed within a TOMCAT installation <strong>as long as the browser being used is Chrome and the machine is my computer</strong>.</p>
  
  <p>Now, I started testing the project using different browsers and devices (e.g tablets, mobiles, etc.) and... OOPS!!! I am getting crashes all the time.</p>
  
  <p>It would appear that the first issue is coming from the way I implemented and use the routing services (or, at least, this is what is suggested from several posts I found). Two things are happening (depending on the browser and the action triggered):</p>
  
  <ol>
  <li><p>I received many times the error <code>infdig</code>,</p></li>
  <li><p>When the user logs into the the system and a <code>$window.location.href</code> command is used to move to other page, all the user information stored within a <code>$rootScope</code> object disapears (strangely, this s not happening with Chrome, but it is with IE and Edge!).</p></li>
  </ol>
  
  <p>Unfortunately, I was unable to fully understand what is the proper way of using the routing services.</p>
  
  <p>The structure of the project is:</p>
  
  <pre><code> [MyApp]                    -- This is the folder containing the whole project under TOMCAT's "webapps" folder
        index.html
        [pages]               -- Sub-folder hosting all the pages of the project except for the `index.html`
           page1.html
           page2.html
           :
           :
  </code></pre>
  
  <p>Transition to the sub-pages (page1.html, etc.) takes place using the <code>$window.location.href = "#page1.html";</code>, and the routing service is defined:</p>
  
  <pre><code>$routeProvider
      .when('page1.html', {
              templateUrl: '#/pages/page1.html',
              controller: 'Page1Controller'
      }
      .when('page2.html', {
              templateUrl: '#/pages/page2.html',
              controller: 'Page2Controller'
      }
      :
      :
  </code></pre>
  
  <p>From posts on this, I also tried:</p>
  
  <pre><code>    .when('page1.html', {
              templateUrl: 'pages/page1.html',
              controller: 'Page1Controller'
      }
  </code></pre>
  
  <p>and</p>
  
  <pre><code>    .when('page1.html', {
              templateUrl: '/pages/page1.html',
              controller: 'Page1Controller'
      }
  </code></pre>
  
  <p>getting errors in both cases (e.g. page not found).</p>
  
  <p>Additionally, it is not clear to me what is the impact of including the statement <code>$locationProvider.html5Mode(true);</code> (when including this, I got an <code>injection</code> error).</p>
  
  <p>I am seeking a simple and straightforward explanation on how to properly use this service, and if and how to set HTML5 mode.</p>