title: AngularJS routing without webserver?
body: <p>I'm trying to create a simple website using angular as front-end.</p>
  
  <p>Is there a way to create partial views and routing without having a webserver?</p>
  
  <p>I've been trying to do so, but I keep getting this error:
  <code>Uncaught Error: [$injector:modulerr]</code></p>
  
  <p>Here's my code: <code>index.html</code></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" ng-app="cerrajero"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Cerrajero&lt;/title&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/&gt;
  
  
  &lt;/head&gt;
  &lt;body ng-controller="MainCtrl"&gt;
  
      &lt;div ng-view&gt;&lt;/div&gt;
  
  
      &lt;script type="text/javascript" src="js/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/angular.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/angular-route.min.js"&gt;&lt;/script&gt;
  
  
      &lt;script src="js/app.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/ng-template" id="partials/contact.html" src="partials/contact.html"&gt;&lt;/script&gt;
      &lt;script type="text/ng-template" id="partials/services.html" src="partials/services.html"&gt;&lt;/script&gt;
      &lt;script type="text/ng-template" id="partials/home.html" src="partials/home.html"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and the app.js:</p>
  
  <pre><code>var app = angular.module('cerrajero', []);
  
      app.config([function ($locationProvider, $routeProvider) {
          $locationProvider.html5Mode(true);
          $routeProvider.
              when('/services', {
                  template: 'partials/services.html'
              }).
              when('/contact', {
                  template: 'partials/contact.html'
              }).
              when('/home', {
                  template: 'partials/home.html'
              }).
              otherwise({
                  redirectTo: '/home',
                  template: 'partials/home.html'
              });
      }]);
  
  function MainCtrl ($scope) {
  
  };
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/yZ9g2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yZ9g2.png" alt="enter image description here"></a></p>
  
  <p>What am I doing wrong?</p>
  
  <p><strong>edit</strong></p>
  
  <p>I've added the <code>ngRoute</code> but I still get the same error when I open the <code>index.html</code> file in the browser.</p>
  
  <pre><code>var app = angular.module('cerrajero', ['ngRoute']);
  
      app.config([function ($locationProvider, $routeProvider) {
          $locationProvider.html5Mode(true);
          $routeProvider.
              when('/services', {
                  template: 'partials/services.html'
              }).
              when('/contact', {
                  template: 'partials/contact.html'
              }).
              when('/home', {
                  template: 'partials/home.html'
              }).
              otherwise({
                  redirectTo: '/home',
                  template: 'partials/home.html'
              });
      }]);
  
  function MainCtrl ($scope) {
  
  };
  </code></pre>
  
  <p><strong>edit 2</strong></p>
  
  <p>Here's the files on github:</p>
  
  <p><a href="https://github.com/jsantana90/cerrajero" rel="nofollow noreferrer">https://github.com/jsantana90/cerrajero</a></p>
  
  <p>and here's the website when it loads:</p>
  
  <p><a href="http://jsantana90.github.io/cerrajero/" rel="nofollow noreferrer">http://jsantana90.github.io/cerrajero/</a></p>
  
  <p><strong>edit 3</strong></p>
  
  <p>I've manage to get rid of the error by having the following code:</p>
  
  <pre><code>var app = angular.module('cerrajero', ['ngRoute']);
  
  app.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
      $locationProvider.html5Mode(false);
      $routeProvider.
          when('/services', {
              template: 'partials/services.html'
          }).
          when('/contact', {
              template: 'partials/contact.html'
          }).
          when('/home', {
              template: 'partials/home.html'
          }).
          otherwise({
              redirectTo: '/home',
              template: 'partials/home.html'
          });
  }]);
  
  app.controller('MainCtrl', function ($scope) {
  
  });
  </code></pre>
  
  <p>I added this <code>app.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {</code></p>
  
  <p>But now my page is blank. It doesn't redirects or anything.</p>
  
  <p>Have I placed everything how it's suppose to go?</p>
  
  <p><strong>edit 4</strong></p>
  
  <p>I forgot to change <code>ui-view</code> to <code>ng-view</code>. Now it works but it's showing in the view: <code>partials/home.html</code> instead of the actual view.</p>
  
  <p><strong>edit 5</strong></p>
  
  <p>Ok so, after having this final code:</p>
  
  <pre><code>var app = angular.module('cerrajero', ['ngRoute']);
  
  app.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
      $routeProvider.
          when('/services', {
              templateUrl: './partials/services.html'
          }).
          when('/contact', {
              templateUrl: './partials/contact.html'
          }).
          when('/home', {
              templateUrl: './partials/home.html'
          }).
          otherwise({
              redirectTo: '/home'
          });
  }]);
  
  app.controller('MainCtrl', function ($scope) {
  
  });
  </code></pre>
  
  <p>I get this error:</p>
  
  <p><code>XMLHttpRequest cannot load file:///partials/home.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.</code></p>
  
  <p>Now I'm guessing this is because I don't have a webserver running. How do I get it to work without a webserver?</p>
  
  <p><strong>solution</strong></p>
  
  <p>When I uploaded the files to github it seems to work there, but not locally.</p>