Why doesn't this Plnkr work when I download it?

Question

I'm new to Angular.js and have been playing around with it on Plnkr here http://plnkr.co/edit/jR9VfaEhjUfY0vN7mfWd

The Plnkr Preview shows the Tabs and Partials loading fine but when I download it my computer only the Tabs work, why aren't the Partials displaying? Hope this screenshot explains my predicament:

Thanks

Answer 1

You need to fetch the page using a web server so there is no "Access-Control-Allow-Origin" violation. When a script from example1.com tries to make AJAX request on example2.com, browsers first check if example2.com allows access from other website. This is done by reading Access-Control-Allow-Origin header of example2.com. Most websites normally don't allow AJAX access.

In your case, the origin is file:///... which won't be setting the Access-Control-Allow-Origin header and since the default is to block the request, you get the error.

To get past this, do the following (Make sure you have ruby or python installed) -

1. Open command prompt
2. Use cd command to switch to your project directory (tutorial)

3. Type either of the command

   python -m SimpleHTTPServer for python
   

   or

   ruby -run -e httpd -- -p 8000 . for ruby.
   

This will run a basic HTTP server at port 8000. The HTTP server will allow access to files in the directory you have run the command from. So if you have, for e.g, index.html in the directory, you could do http://localhost:8000/index.html

---

Looking at the screenshot, you can do this -

1. Open command prompt

2. run

   cd C:/Users/Jonny/Desktop/plunker
   

3. start server

   python -m SimpleHTTPServer
   

4. Open http://localhost:8000/index.html#/invoices in your browser.