Why does AngularJS ng-view not work locally?

Question

I have been working for a few hours on getting my links to click through to different views with my AngularJS app.

However, I can only seem to get the functionality to work online on Plunker.

I've been trying to test the click-through functionality on my machine locally and ng-view does not seem to load. When I download my Plunker code that I know is correct because it is working on Plunker, ng-view seems to quit working once it's hosted locally.

I've also had similar issues with ng-include and directives I've defined as their own HTML tags.

Is there a reason these don't work locally on my computer? (And a way I can fix it for testing purposes?)

You can view some of the code I'm talking about on Plunker here, if you'd like.

Answer 1

Both ng-view and ng-include use AJAX to load templates. The problem is that browser by default does not allow AJAX requests to files located on your local file system (for security reasons). Therefore you have two options:

1. Run local web server that will serve your files
2. Tell your browser to allow local files access

If you are on Mac, the fist option is rather easy since you have several built-in web servers (Apache httpd and Python module called SimpleHTTPServer). To run Python SimpleHTTPServer module just open console in the folder your files located at and run

python -m SimpleHTTPServer 3000

then open your browser and type http://localhost:3000. That's it.

If you are on Windows, it's also possible. You can install for example Wamp and serve files from it.

Second option is possible with Chrome, just run it with --allow-file-access-from-files option from command line or add this flag to shortcut after path to Chrome executable.

This resource may also be useful to understand how to run things locally in different browsers and using different web servers.

Answer 2

ng-view and ng-include make ajax requests to serve the template file. Because you're running it locally, it can't make that request. An easy fix around this is to use http-server to serve your contents over a local server.

Answer 3

ng-view will work locally if you put your templates inside index.html itself instead of putting in separate files using script tags, so that angular will no longer need to make AJAX requests to fetch them.

<script type="text/ng-template" id="home.html">
  This is the Home template
</script>