AnjularJS, correct references but "ReferenceError: angular is not defined"

Question

I'm trying to create a simple AngularJS code which takes a JSON object and prints it in a HTML table.

I am using the code in this Fiddle (where is works perfectly): http://jsfiddle.net/mjaric/pJ5BR/

but I am unable to recreate the code in a single HTML file (locally), without running into an error.

Edit:

ReferenceError: angular is not defined

Error is on line (in script):

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

I tried referencing AngularJS and JQuery via Google and also locally. No difference at all.

Here is the head of my html file:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

The script segment:

 <script>

var mockDataForThisTest = "json=" + encodeURI(JSON.stringify([
    {
    id: 1,
    firstName: "Peter",
    lastName: "Jhons"},
{
    id: 2,
    firstName: "David",
    lastName: "Bowie"}
]));


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

function PeopleCtrl($scope, $http) {

    $scope.people = [];

    $scope.loadPeople = function() {
        var httpRequest = $http({
            method: 'POST',
            url: '/echo/json/',
            data: mockDataForThisTest

        }).success(function(data, status) {
            $scope.people = data;
        });

    };

}

</script>

And finally the body:

  <div ng-app="myApp">
        <div ng-controller="PeopleCtrl">
            <p>    Click <a ng-click="loadPeople()">here</a> to load data.</p>
        <table>
            <tr>
                <th>Id</th>
                <th>First Name</th>
                <th>Last Name</th>
            </tr>
            <tr ng-repeat="person in people">
                <td>{{person.id}}</td>
                <td>{{person.firstName}}</td>
                <td>{{person.lastName}}</td>
            </tr>
        </table>
        </div>
   </div>

Thanks!

`'/echo/json/'` is specific to jsfiddle you will need to change that to a url which can return data on your local system. — Rob Schmuecker, Jul 23 '14 at 12:37
What kind of url will work on my system? Can you please give an example? Thanks. — , Jul 23 '14 at 12:39
You could use a text file, containing JSON data with a `.json` extension and then reference it like this `file:///C:/xampp/htdocs/dummy-data.json` or whatever your file location is. However I know Chrome can be funny about this e.g. http://stackoverflow.com/questions/24889326/extjs-ajax-xmlhttprequest-cannot-load — Rob Schmuecker, Jul 23 '14 at 12:55

score 3 · Accepted Answer · answered Jul 23 '14 at 12:54

3

You are using a scheme relative url for your reference to Angular:

src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"

This uses the same scheme as you use to access your HTML document and will work perfectly if you load your HTML document using http:// or https://.

Your local file is, presumably, being loaded from your file system (with a file:// URI) instead of a local website (with http://localhost/) and the resource is not available at file://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js.

You can quickly hack this by using

src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"

But you would be better off using a local webserver for testing as there are plenty of things (especially around Ajax, which you are using) that work differently between file:// and http://.

answered Jul 23 '14 at 12:54

Quentin

914,110
126
1,211
1,335

Thanks! But making that edit brings out the error: [Exception... "Access to restricted URI denied" code: "1012" nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)" location: ""] ...a)}:function(a,b){e(a,null==b?"":b)}}return{log:e("log"),info:e("info"),warn:e("... And this doesn't change even if I use local locations for the JS files referenced. – Jul 23 '14 at 13:00
@oohman — Looks like you've run into your next problem and it is another of the differences between `file` and `http` that I mentioned in the final paragraph of the answer. Use a local webserver for development and testing. – Quentin Jul 23 '14 at 13:01
I tried an online HTML editor to run the code (http://htmledit.squarefree.com/) but still got the following error on the console. ---- POST http://htmledit.squarefree.com/echo/json/ 404 Not Found----- It should work over there if the issue is related to the http scope right? – Jul 23 '14 at 13:11
@oohman — Why would you expect to get something other than a 404 when you requested http://htmledit.squarefree.com/echo/json/ ? That's just another different issue - your code is trying to load data from a URL and that URL doesn't exist. – Quentin Jul 23 '14 at 13:19
I understand the problem now. Thanks for your patience. – Jul 23 '14 at 13:25

AnjularJS, correct references but "ReferenceError: angular is not defined"

1 Answers1