I'm still getting the hang of using angularjs. I've been working with some JSON data and running into an issue with my post command. The get request is functioning perfectly, but any other type of request results in a 404 url error even though I've double-checked that everything matches up.
Below is my app.js code that includes the working get command:
angular
.module('app', [
'ui.router'
])
.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'templates/home.html',
controller: 'homeCtrl',
resolve: {
friends: ['$http', function($http){
return $http.get('./api/friends.json').then(function(response ){
return response.data;
})
}]
}
})
.state('about', {
url: '/about',
templateUrl: 'templates/about.html',
controller: 'aboutCtrl'
})
.state('contact', {
url: '/contact',
templateUrl: 'templates/contact.html'
})
}])
I also have the homeCtrl.js file which handles content loading for the home page, where my goal is to edit the page contents and save them back to the JSON file.
However, when attempting to use the post command, it leads to a 404 error.
angular
.module('app')
.controller('homeCtrl', ['$scope', 'friends', '$http', function($scope, friends, $http){
$scope.title = "Home";
$scope.friends = friends;
$scope.items =['item1', 'item2','item3'];
$scope.selectedValue = 'item1';
$scope.save = function() {
$http.post('./api/friends.json', friends);
};
}]);
The following is the HTML content for home.html:
<h1>{{title}}</h1>
<ul>
<li ng-repeat = "friend in friends">
<input type="text" ng-model="friend.name">
<input type="text" ng-model="friend.age">
</li>
</ul>
<button ng-click="save()" class="btn btn-primary">Save</button>
Lastly, here is the content of the friends.json file:
[
{"name": "Will", "age": 30},
{"name": "Laura", "age": 25}
]