Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS routing without a web server

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?

like image 550
dantix Avatar asked Mar 28 '13 09:03

dantix


1 Answers

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>
like image 97
Saidh Avatar answered Oct 10 '22 04:10

Saidh