Here is a link to the complete source code
angular
.module('app')
.factory('Friends', ['$http',function($http){
return {
get: function(){
return $http.get('api/friends.json')
.then(function(response){
alert(JSON.stringify( response.data));
return response.data;
});
}
};
}])
Controller:
angular.module("app")
.controller('homeCtrl',['$scope','Friends',
function($scope, Friends){
$scope.title = "Welcome";
$scope.items=["2016","2015", "2014"];
$scope.friends = Friends.get();
$scope.save = function(){
$http.post('/api/friends', friends);
}
}])
$stateProvider
.state('home',{
url:'/',
templateUrl:'templates/home.html',
controller: 'homeCtrl',
resolve : {
friends:['Friends', function(Friends){
return Friends.get();
}]
}
})
When I try to alert the result:
https://i.stack.imgur.com/qarDV.jpg
The UI appears blank: https://i.stack.imgur.com/RfAhQ.jpg
*My navbar dropdown list is not functioning properly. Any tips on how to fix it?