AngularJS writing an app with no server

Question

I'm trying to write an AngularJS client side only app.
I thought I might be able to load it from chrome by typing in the address bar: file:///C:/path/to/project//index.html I also tried to invoke chrome with the flag --allow-file-access-from-files

Unfortunatly nothing happened - just the busy sign on the tab name is working.
Why does is not loading my app?

I'm using the following code:

index.html:

<!doctype html>
<html ng-app="app">
<head>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-route.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>
<ng-view></ng-view>
</body>
</html>

app.js:

angular.module('app', ['ngRoute']).
   config(function($routeProvider) {
        $routeProvider.
            when('/', {controller: HomeCtrl, templateUrl: 'app.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) {

}

app.html:

<div ng-controller="HomeCtrl">
    <ul ng-repeat="number in numbers" >
        <li>{{number}}</li>
    </ul>
</div>

Edit:

2 possible solutions:

Close all chrome instances and run from command line:
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --allow-file-access
Run Firefox which does not have this restriction (Like @GeekBoy mentioned)

what does the console say? or the network tab? any errors? – Alp Jun 10 '14 at 17:11 — Alp, Jun 10 '14 at 17:11
The chrome tab just freezed, cant open the console. – chenop Jun 10 '14 at 17:50 — chenop, Jun 10 '14 at 17:50

score 6 · Accepted Answer · answered Jun 10 '14 at 17:14

6

As far as I know google chrome does not allow javascripts to be run from file system. But I did a quick google search and found this. Might be useful Link

On the flipside you can use firefox. Firefox doesn't have such restrictions as far as I know

answered Jun 10 '14 at 17:14

Kaarthik

627
2
12
32

score 3 · Answer 2 · answered Jun 10 '14 at 17:19

Try changing the following lines:

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-route.js"></script>

to

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-route.js"></script>

I think since you're using a file-based way to get at index.html, it's assuming the // also points to a local system resource. By specifically indicating http://, it will look at the actual locations.

score 0 · Answer 3 · answered Apr 08 '17 at 15:00

I know that this is an old question but for anyone that might still be interested, here is a small project that demonstrates how to write an angularjs client-side app. It is a complete AngularJS 1.63 single page application with routing that does not need a web server: https://github.com/jlinoff/aspa-nows.

There were two key challenges to getting it working: getting the the page href references right because of the newly introduced default hash prefix: ! (see aa077e8 for details), and embedding the template HTML code into index.html as ng-template scripts to avoid CORS errors. Once those fixes were made, it worked as expected.

The project README.md explains what needed to be done in detail and the full source code is available.

AngularJS writing an app with no server

3 Answers3

Linked