angularjs call to an external url with $http.get

Question

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.

Have you tried hitting that url in your browser? Do you get a 404 then? I would expect you to get cross origin issues though too. — ste2425
– ste2425, Commented Jan 27, 2016 at 8:49
I'm not sure that it is deal of code. Could you share more info how you published your server? Could you hit the site with any request generator without your angular client? — Vlad Dekhanov
– Vlad Dekhanov, Commented Jan 27, 2016 at 8:51
I put a fake url in the post. The url works fine the response is a normal JSON: viudadesoubrier.com/angular/model.php. — Bibliotec
– Bibliotec, Commented Jan 27, 2016 at 9:30
Can you provide what you see in the dev tools > network in the request and the response? — lisa p.
– lisa p., Commented Jan 27, 2016 at 9:33

Pratap A.K · Accepted Answer · 2016-01-27 10:30:42Z

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: *

Collectives™ on Stack Overflow

angularjs call to an external url with $http.get

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related