Menu
I have a problem with angular and calls to an external json, the fact is that local works perfectly, but when I make the call with a full url gives me 404, I leave the code in case you see something missing, thanks:
// JavaScript Document
var angularTodo = angular.module('lostsysApp', []);
function mainController($scope, $http) {
$scope.names = [];
$http.get('http://www.viudadesoubrier.com/angular/model.php')
.success(function(data) {
$scope.names = eval(data);
console.log(data)
})
.error(function(data) {
alert(data);
console.log('Error: ' + data);
});
$scope.addNom = function() {
$http.post('http://www.viudadesoubrier.com/angular/model.php', { op: 'append', nom: $scope.nom, telefon: $scope.telefon } )
.success(function(data) {
$scope.names = eval(data);
console.log(data)
})
.error(function(data) {
console.log('Error: ' + data);
});
$scope.nom="";
$scope.telefon="";
}
$scope.delNom = function( nom ) {
if ( confirm("Seguro?") ) {
$http.post('http://www.viudadesoubrier.com/angular/model.php', { op: 'delete', nom: nom } )
.success(function(data) {
$scope.names = eval(data);
console.log(data)
})
.error(function(data) {
console.log('Error: ' + data);
});
}
}
}
Add the code of index.html
<!doctype html>
<html ng-app="lostsysApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.11/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="mainController">
<div class="jumbotron text-center">
<h1>Angular Test</h1>
</div>
<div class="col-sm-8 col-sm-offset-2 text-center">
<div class="form-group">
<input type="text" ng-model="nom" placeholder="Contact Name" class="form-control input-lg text-center" />
</div>
<div class="form-group">
<input type="text" ng-model="telefon" placeholder="Phone Number" class="form-control input-lg text-center" />
</div>
<div class="form-group">
<button class="btn btn-primary btn-lg" ng-click="addNom()">Añadir</button>
</div>
<div ng-repeat="n in names">
<p>
{{n.nom}} ({{n.phone}})
<a href="#" ng-click="delNom(n.nom)">[X]</a>
</p>
</div>
</div>
</body>
</html>
Thank you.
781
asked Mar 19 '26 01:03
controller :
var angularTodo = angular.module('lostsysApp', []);
angularTodo.controller('mainController', function($scope, $http) {
$scope.names = [];
$http.get('http://www.viudadesoubrier.com/angular/model.php')
.success(function(data) {
$scope.names = eval(data);
console.log(data)
})
.error(function(data) {
alert(data);
console.log('Error: ' + data);
});
$scope.addNom = function() {
$http.post('http://www.viudadesoubrier.com/angular/model.php', { op: 'append', nom: $scope.nom, telefon: $scope.telefon } )
.success(function(data) {
$scope.names = eval(data);
console.log(data)
})
.error(function(data) {
console.log('Error: ' + data);
});
$scope.nom="";
$scope.telefon="";
}
$scope.delNom = function( nom ) {
if ( confirm("Seguro?") ) {
$http.post('http://www.viudadesoubrier.com/angular/model.php', { op: 'delete', nom: nom } )
.success(function(data) {
$scope.names = eval(data);
console.log(data)
})
.error(function(data) {
console.log('Error: ' + data);
});
}
}
});
Enable CORS from server side
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Origin: *
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
