I can't seem to display any JSON data from my factory. I'm pretty sure the contractors.json file is loading correctly because the console complained about its syntax a few times. My grunt watch isn't giving me any errors, nor is the console. I'm new to angular and I'm not sure what is wrong.
'use strict';
angular.module('angularPlainApp', [ 'ngCookies', 'ngResource', 'ngSanitize', 'ngRoute' ])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
})
.controller('MainCtrl', function ($scope, dataList) {
$scope.contractors = dataList.getList();
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
})
.factory('dataList', function($http, $q) {
return {
getList: function() {
var deferred = $q.defer();
$http.get('scripts/contractors.json').success(function(data){
deferred.resolve(data);
}).error(function(){
return deferred.promise;
});
},
};
});
I put my app.js in all different types setups and never displayed any of the data, same with the html snippet.
<aside class= "contractors">
<ul class= "contractors-list" ng-controller="MainCtrl" >
<li ng-repeat = "contractor in contractors">
<div class="headshot-wrapper">
<img src='path/to/img.img'>
</div>
<div class="contractor-summary-info">
<h3>{{ contractors.name }}</h3>
<h4 class="summary-subhead">{{ contractors.position }}</h4>
<p>{{ contractors.number }}</p>
<p>{{ contractors.jobFunction }}</p>
</div>
</li>
</ul><!--.contractor-summary-->
</aside><!--contractor-list-->
No information from my external contractors.json file is showing up.
I'm using bower, yeoman and gruntjs. Any tips, tricks or general input is greatly appreciated.
Thanks in advace!