AngularJS routing without a web server

Question

I want to develop html5 SPA application for a thin client. There is no way to launch any web server on it. And I can\'t to make routing works without web server.

My

Answer 1

Angular is a client-side JS framework, so it doesn't need a web-server. Beside adding the ng-view (as you already figured out), you links need to have a hashbang in front (#/login), unless you're using html5mode.

So, having a hashbang in URLs is not a drawback, it's an option.

Answer 2

The solution in this issue [ Cross origin requests are only supported for HTTP ] works for me.
But I really don't get it how could you get it work without web server by using ngView and ngRoute?
You config ngRoute to get login.html outside of index.html, that means you are using AJAX service to load a file, but AJAX service cannot work without a web server. That's why I got my issue.

Answer 3

Here some code from http://docs.angularjs.org/api/ng.$route

// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);

I think that same will work for you.

Answer 4

You need to put your templates in index.html itself 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 content of the template
</script>

Answer 5

After a while, I made it works.

At first, I moved this piece into separate file

<div ng-controller="HomeCtrl">
    <ul ng-repeat="number in numbers" >
        <li>{{number}}</li>
    </ul>
</div>

Secondly, in index.html I've added this div

<div ng-view></div>

It is used as a view placeholder.

Now index.html is used as "master page" or "layout" if you are familiar with asp.net. When you clicking at the link, content of the templateUrl file is inserting into placeholder div.

A drawback of this is that url should looks like this <a href="#/login"></a>