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 index.html

<!doctype html>
   <html ng-app="app">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
    <script src="app.js"></script>
    <title></title>
</head>
<body style="background-color: white;">
    <h1>Index</h1>
    <a id="link" href="/login">Go to login</a>
    <div ng-controller="HomeCtrl">
        <ul ng-repeat="number in numbers" >
            <li>{{number}}</li>
        </ul>
    </div>
</body>
</html>

My app.js

angular.module('app', []).
  config(function($routeProvider) {
    $routeProvider.
      when('/', {controller: HomeCtrl, templateUrl: 'index.html'}).
      when('/login', {controller: LoginCtrl, templateUrl: 'login.html', resolve: function() {}}).
      otherwise({redirectTo:'/'});
  });

function HomeCtrl($scope) {
    $scope.numbers = [1,2,3,4,5];
}

function LoginCtrl($scope) {

}

I'm testing this code locally on my computer in Chrome. Data binding is working like a charm, but link to the login page isn't. It's leading to the {X}:\login. So my questions are: is it possible to make it works with out web server? And secondly what I'm missing to get it done?

score 5 · Answer 1 · answered Dec 02 '14 at 05:35

5

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>

answered Dec 02 '14 at 05:35

Saidh

1,131
1
12
21

score 4 · Accepted Answer · answered Mar 28 '13 at 09:48

4

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>

answered Mar 28 '13 at 09:48

dantix

745
1
5
14

1

this is standard angular approach. Go through tutorial on docs site – charlietfl Mar 29 '13 at 11:20
1

This didn't work out for me. Out of the above modifications you mentioned in your answer, what prevented the request to the server? For me the app didn't work without a web server. – Andy Dufresne Jan 08 '14 at 09:23
@NidhinDavid Did you mean CORS error? No, I haven't. – dantix Nov 09 '16 at 11:41

score 2 · Answer 3 · answered Mar 28 '13 at 09:52

2

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.

answered Mar 28 '13 at 09:52

Stewie

60,366
20
146
113

Very helpful, but how can different client access the app.... should we send them the application client code like thick client to every client ? – Jay Sep 07 '15 at 17:21

score 1 · Answer 4 · answered Mar 28 '13 at 09:39

1

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.

answered Mar 28 '13 at 09:39

ardentum-c

1,410
13
11

Nope, I've tried this. I've got it working actually. I'll post answer in few minutes. – dantix Mar 28 '13 at 09:43

score 1 · Answer 5 · edited May 23 '17 at 12:34

1

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.

edited May 23 '17 at 12:34

Community

1
1

answered Sep 26 '14 at 06:39

Jennie Ji

769
5
13

you can run chrome with -disable-web-security flag to make it ignore CORS and same origin policy, but do it with care. When I was asking this question I was developing application for embed browser on device that doesn't have such strict security limitations as desktop/mobile browsers have, so it was not an issue for me. – dantix Sep 27 '14 at 19:33
Thank you, Dantix. What about IE? – Jennie Ji Sep 30 '14 at 03:11
same way for IE, you can disable web security – Sahil Babbar Sep 23 '16 at 15:20

AngularJS routing without a web server

5 Answers5

Linked