As I delve into the world of AngularJS, I find myself caught up in a puzzle that has consumed my entire evening. My goal is to fetch JSON data from a random generator and display it in the view using a service. While {{ main.title }} seems to be working just fine, the issue arises with ng-repeat="user in main.users" as {{ user.name }} fails to show anything. Where did I make a misstep?
Index.html
<html>
<head lang="en">
<meta charset="UTF-8>
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="app.js"></script>
<script src="main.ctrl.js"></script>
<script src="users.serv.js"></script>
</head>
<body ng-app="app" ng-controller="MainController as main">
<div class = "container">
<h1>{{ main.title }}</h1>
<div ng-repeat="user in main.users">
<h2>{{ user.name }}</h2>
</div>
</div>
</body>
</html>
app.js
angular.module('app', []);
main.ctrl.js
angular.module('app').controller('MainController', ['users', function(users) {
var vm = this;
users.get(function(data) {
vm.users = data;
});
vm.title = 'Hello World';
}]);
users.serv.js
angular.module('app').factory('users', ['$http', function($http) {
return {
get: function (callback) {
$http.get('http://www.json-generator.com/api/json/get/bJHFVOzrzC?indent=2').success(function(data) {
return data;
})
}
}
}]);