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?

Saidh · Accepted Answer · 2014-12-02 05:35:12Z

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 2, 2014 at 5:35

Saidh

1,1411 gold badge12 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dantix · Accepted Answer · 2013-03-28 09:48:07Z

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, 2013 at 9:48

dantix

7451 gold badge5 silver badges14 bronze badges

3 Comments

charlietfl Over a year ago

this is standard angular approach. Go through tutorial on docs site

Andy Dufresne Over a year ago

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.

dantix Over a year ago

@NidhinDavid Did you mean CORS error? No, I haven't.

Stewie · Accepted Answer · 2013-03-28 09:52:29Z

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, 2013 at 9:52

Stewie

60.4k20 gold badges148 silver badges113 bronze badges

1 Comment

Jay Over a year ago

Very helpful, but how can different client access the app.... should we send them the application client code like thick client to every client ?

ardentum-c · Accepted Answer · 2013-03-28 09:39:14Z

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, 2013 at 9:39

ardentum-c

1,41013 silver badges11 bronze badges

1 Comment

dantix Over a year ago

Nope, I've tried this. I've got it working actually. I'll post answer in few minutes.

Community · Accepted Answer · 2017-05-23 12:34:33Z

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, 2017 at 12:34

CommunityBot

11 silver badge

answered Sep 26, 2014 at 6:39

Jennie Ji

8197 silver badges13 bronze badges

3 Comments

dantix Over a year ago

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.

Jennie Ji Over a year ago

Thank you, Dantix. What about IE?

Sahil Babbar Over a year ago

same way for IE, you can disable web security

Collectives™ on Stack Overflow

AngularJS routing without a web server

5 Answers 5

Comments

3 Comments

1 Comment

1 Comment

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

1 Comment

1 Comment

3 Comments

Linked

Related