angularJS $http.get communicating with API

Question

I am new to AngularJS and I am trying to understand it by studying sample codes.

Here I have one about $http.get, from the following link:

http://www.w3schools.com/angular/tryit.asp?filename=try_ng_customers_json

I just replaced url with one of my own but it did not work, and I am really confused, please help, thanks!

=========================

second edit: thanks to the answers, double ng-app is a mistake, but it is not the main reason for this problem. I think it has something to do with cross-site blocking, but I have turn it off on my API (I use codeigniter REST API and I set $config['csrf_protection'] = FALSE; ), I am not sure how to configure it.

<!DOCTYPE html>
<html>
    <head>
        <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    </head>
    <body ng-app="myApp">
        <div ng-controller="customersCtrl">
            <ul>
                {{names}}
            </ul>
        </div>
        <div ng-controller="myCtrl">
            <ul>
                {{names}}
            </ul>
        </div>
        <script>
        var app = angular.module('myApp', []);
        app.controller('customersCtrl', function($scope, $http) {
        $http.get("http://www.w3schools.com/website/Customers_JSON.php")
        .success(function (response) {$scope.names = response;});
        });
        app.controller('myCtrl', function($scope, $http) {
        $http.get("https://manage.pineconetassel.com/index.php/api/v1/colors2.php")
        .success(function (response) {$scope.names = response;});
        });
        </script>
    </body>
</html>

first ng-app code should work, other will be ignore, place ng-app in html element would be good — Pankaj Parkar
– Pankaj Parkar, Commented Mar 19, 2015 at 5:37

Marti Laast · Accepted Answer · 2015-03-19 05:27:24Z

2

The problem is that you have two "myApp" declarations. From AngularJS documentation:

Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application.

So, you should move the ng-app="myApp" to the body element. However, once you've done that you probably still won't see any result because you are cross-site scripting and browsers will (by default) block the second request.

answered Mar 19, 2015 at 5:27

Marti Laast

811 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Niebieski Over a year ago

I want to make the second one work, even if I remove the first one, it still does not work. I think it has something to do with cross-site, but I don't know how to allow API from a site, why when I try it one at a time, the first one works and the second one does not?

Marti Laast Over a year ago

This answner gives a pretty good overview of what you could do when you have control over the server. When you don't, then try jsonp instead of get: $http.jsonp("https://manage.pineconetassel.com/index.php/api/v1/colors2.php?callback=JSON_CALLBACK"). Also notice the callback.

Pankaj Parkar · Accepted Answer · 2015-03-19 05:47:27Z

0

Two ng-app directive on single page will execute the first one, 2nd one will get ignored.

Remove ng-app="myApp" from both div of your html and use angular.bootstrap to bootstrap angular app on html page using below code.

Code

angular.element(document).ready(function() {
  angular.bootstrap(document, ['myApp']);
});

answered Mar 19, 2015 at 5:47

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Collectives™ on Stack Overflow

angularJS $http.get communicating with API

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related