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, Mar 19 '15 at 05:37

score 2 · Answer 1 · answered Mar 19 '15 at 05:27

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 '15 at 05:27

Marti Laast

81
1
4

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? – Niebieski Mar 19 '15 at 05:50
1

[This answner](http://stackoverflow.com/questions/667519/firefox-setting-to-enable-cross-domain-ajax-request) 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. – Marti Laast Mar 19 '15 at 06:26

score 0 · Answer 2 · answered Mar 19 '15 at 05:47

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']);
});

angularJS $http.get communicating with API

2 Answers2