Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS writing an app with no server

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:

  1. 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
  2. Run Firefox which does not have this restriction (Like @GeekBoy mentioned)
like image 505
chenop Avatar asked Jun 10 '14 17:06

chenop


2 Answers

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

like image 175
Kaarthik Avatar answered Nov 03 '22 21:11

Kaarthik


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.

like image 3
rchawdry Avatar answered Nov 03 '22 21:11

rchawdry