AngularJS routing without a web server

routing angularjs single-page-application

31,607

Solution 1

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>

Solution 2

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>

Solution 3

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.

Solution 4

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.

Solution 5

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.

View more solutions

31,607

Author by

dantix

Updated on May 11, 2020

Comments

dantix about 4 years

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?

dantix about 11 years

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

this is standard angular approach. Go through tutorial on docs site
Andy Dufresne over 10 years

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 9 years

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 9 years

Thank you, Dantix. What about IE?
Jay over 8 years

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

same way for IE, you can disable web security
dantix over 7 years

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