json - angularjs call to an external url with $http.get -
i have problem angular , calls external json, fact local works perfectly, when make call full url gives me 404, leave code in case see 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 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.
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 server side
access-control-allow-headers: content-type access-control-allow-methods: get, post, options access-control-allow-origin: *
Comments
Post a Comment