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.json
extension and then reference it like thisfile:///C:/xampp/htdocs/dummy-data.json
or whatever your file location is. However I know Chrome can be funny about this e.g. stackoverflow.com/questions/24889326/… – Rob Schmuecker