Is it possible to use ng-include without web server?

I'm running an AngularJS app which merely include a file

<div ng-include src="'sample.html'"></div>

That works when run under web server. But if the web app is run from merely double clicking from file explorer (i.e. not from web server), it doesn't include the file

Does ng-include works outside of web server? I checked the Network status on Chrome, it says OPTIONS on Method, and Load cancelled on Status

One workaround is to inline your templates:

<script type="text/ng-template" id="sample.html">
  <div>This is my sample template</div>
</script>

Fiddle.

This puts your template into Angular's template cache. When an ng-include directive is processed, Angular checks the cache first.

The problem is because of file:// protocol. Mostly all browsers disallow XHR requests when file is been served from file://. That is why AJAX requests are failing. And ng-include use them to download files.

You can launch Chrome with --allow-file-access-from-files parameter to disable checks for file://.

FireFox should load files if they are in same folder (check this for more info).

But personally prefer to start simplest NodeJS script to serve files, that could be found at angular-seed project. It require just node binary and gives a feeling of a normal web server.

I had a similar problem and I solved it by running a simple nodejs server to serve static files - http-server. Make sure you have nodejs installed, then:

Install:

$ sudo npm install http-server -g

Then from your project directory:

$ http-server

Now you can access your files from:

localhost:8080/whatever-file-you-have-in-your-directory.html

You can use Grunt along with the grunt-html plug to precompile your templates along with your Angular code.