How do I load data from a external json api using angularJS?

Question

for example I want to view data from two urls: 1- http://jsonplaceholder.typicode.com/posts/ 2- http://jsonplaceholder.typicode.com/todos/

Can I load data from these two url's in one app with two controllers in one view page?

Answer 1

Use $http.get to issue the query (JSFiddle):

angular.module('Joy', [])
.controller('CtrlOne', ['$http', '$scope', function ($http, $scope) {
    $http.get('http://jsonplaceholder.typicode.com/posts/').then(function (data) {
        $scope.posts = data.data;
    });
}])
.controller('CtrlTwo', ['$http', '$scope', function ($http, $scope) {
    $http.get('http://jsonplaceholder.typicode.com/todos/').then(function (data) {
        $scope.todos = data.data;
    });
}]);

HTML:

<div ng-app="Joy">
    <div ng-controller="CtrlOne">{{ posts[0] | json }}</div>
    <div ng-controller="CtrlTwo">{{ todos[0] | json }}</div>
</div>