Do angular views work when a site is served from the local file system?

Question

I'm using angular to develop an application. I'm developing off my local file system, on Windows. However, when I enable angular-route.js, whenever I hit index.html with my browser, it instead goes to index.html#/C:/.

My route definition is:

myApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/', {templateUrl: 'home.html', controller: 'HomeCtrl'});
}

I think this causes the site to break, because /C:/ doesn't match any angular routes. What's going wrong? How do I fix this?

Answer 1

For routing & ajax (& more) to work properly, run a local development server; avoid use of file:// for development, since browsers have different rules for it.

Tools like yeoman + generator-angular will automatically set up a gruntfile with a server task, which will run a node-connect server to locally serve your files.

You can do this with

• python: (3)python -m http.server 8001 (replace http.server with SimpleHttpServer in 2)
• node.js + connect
• ruby + rack
• From the angularjs tutorial (number 5 under "working with the code") - "You need an http server running on your system, but if you don't already have one already installed, you can use node to run scripts\web-server.js, a simple bundled http server."

---

Response from comments: For phonegap, use the phonegap tools. It does exactly what I said, it runs a local server.

Answer 2

This will work.

angular.module('MainModule', []).config(function($locationProvider, $routeProvider) {
    $locationProvider.hashPrefix("!");
    $locationProvider.html5Mode(false);
    $routeProvider.when('/', {template: './js/templates/home.html', controller:HelloWorldCtrl});
    $routeProvider.when('/other', {template: './js/templates/other.html'});
});

In index HTML you need to specify templates:

<script type="text/ng-template" src="./js/templates/home.html"></script>
<script type="text/ng-template" src="./js/templates/other.html"></script>