AngularJS routing without a web server

up vote2down votefavorite

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 ng-app="app">

style="background-color: white;">

Index id="link" href="/login">Go to login

ng-controller="HomeCtrl">

ng-repeat="number in numbers" >
{{number}}

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?

routing angularjs single-page-application

share|edit

edited Mar 28 '13 at 18:31

asked Mar 28 '13 at 9:09 Dantix 437210

add comment

3 Answers

activeoldestvotes

up vote2down voteaccepted

After a while, I made it works. At first, I moved this piece into separate file ng-controller="HomeCtrl"> ng-repeat="number in numbers" > {{number}}

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

 ng-view>

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 

share|edit

answered Mar 28 '13 at 9:48 Dantix 437210

1	this is standard angular approach. Go through tutorial on docs site –  charlietfl Mar 29 '13 at 11:20
	Yeah, thanks. I got it now. –  Dantix Mar 29 '13 at 11:30
	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 8 at 9:23

add comment

up vote2down vote	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. share|edit answered Mar 28 '13 at 9:52 Stewie 12.7k43349
	add comment

up vote0down vote	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. share|edit answered Mar 28 '13 at 9:39 ardentum-c 42828
	Nope, I've tried this. I've got it working actually. I'll post answer in few minutes. –  Dantix Mar 28 '13 at 9:43  add comment