newbie running angular works in fiddle but not locally

Question

newbie here,

(this is important to me as i often don't have access to the internet.)

i have this strange problem where this code works fine on jsfiddle:

fiddle here ->https://jsfiddle.net/w4g71ea8/2/

but not when i try it on my own computer breaking it into seperate files (in same directory) and view with chrome.

Also I had to set no wrap-in on js fiddle for that to work.

test3.html :

<!doctype html>
<html>
Angular JS Tutorial
<head>
<script src= "file:///home/chronos/user/Downloads/angular/angular.js"  >      </script>
</head>
<body ng-app="myapp">
<script>
src= "script3.js"
</script>

<div ng-controller="HelloController" >
<h2>Welcome {{speak}} to the world!</h2>
</div>

</body>
</html>

script3.js : 

var app = angular.module('myapp', []);

app.controller("HelloController", function($scope) {
$scope.speak = "Joe";
});

Did you try putting angular.js also in same directory (with path updated appropriately?) — Ashutosh Upadhyay, Sep 20 '15 at 23:26
You are going to run into issues trying to get an Angular app to run locally from your hard drive without a local web server. See http://stackoverflow.com/questions/24124509/why-does-angularjs-ng-view-not-work-locally for more information on this. Best is to just setup a local web server on your PC. — Beyers, Sep 20 '15 at 23:54
angular isn't designed to run using the `file://` protocol. *some* features of it may function, but it is designed to be run from a web server. — Claies, Sep 21 '15 at 00:45
thats apparently the problem the script tag, but also thanks for alerting me to the ajax/server issue — Brian Wolf, Sep 21 '15 at 02:48

score 1 · Answer 1 · answered Sep 21 '15 at 02:31

I'm not sure where did you copy this html, but it's wrong. Try like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Angular JS Tutorial</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="script3.js"></script>
  </head>
  <body ng-app="myapp">
    <div ng-controller="HelloController">
      <h2>Welcome {{speak}} to the world!</h2>
    </div>
  </body>
</html>

And, since you said you're a newbie, it'd be a good habit to start using your code ready for future minifications:

// script3.js
var app = angular.module('myapp', []);

app.controller('HelloController', ['$scope', function($scope) {
  $scope.speak = 'Joe';
}]);

On the other hand, I don't agree with some comments above; you don't have to install any webserver or something to see it's working. Just create your html and js files, drop it to the browser. Only thing you need to keep in your mind is file:// usage is not valid here. Either use full url from any CDN, or download the file and enter local path like /js/angular.js. I'm not talking about ng-view and ng-include of course, since they are making AJAX calls, you'll need some sort of webserver. But in this example, you don't need at all.

newbie running angular works in fiddle but not locally

1 Answers1