Why does AngularJS ng-view not work locally?

html angularjs angularjs-directive angularjs-ng-include
user2494584 picture user2494584 · Jun 9, 2014 · Viewed 19.6k times · Source

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

Vadim picture Vadim · Jun 9, 2014

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.

Related questions

How to set an iframe src attribute from a variable in AngularJS

I'm trying to set the src attribute of an iframe from a variable and I can't get it to work... The markup: <div class="col-xs-12" ng-controller="AppCtrl"> <ul class=""> <li ng-repeat="project in projects"> &…

Read More
AngularJS: Call the ng-submit event outside the form

I'm a fish in AngularJS and I have this scenario. <form> <input type="text"> </form> <button type="submit">submit</button> In normal ways AngularJS provides the ng-submit directive to work …

Read More
AngularJS number input formatted view

I want to use a formatted number input to show thousand seperator dots to user when he types big numbers. Here is the directive code that I used: http://jsfiddle.net/LCZfd/3/ When I use input type="text" it works, …

Read More