Cannot access http json service in angular js

Question

I am new to angularjs and I want to know why it isn't working.

The code has a flaw and am not sure about the same.

Thinking from java perspective,httpController defined has nested function defined inside.

Here it is my code

index.html

<!DOCTYPE html>
<html  >

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
    <div ng-app="myapp" ng-controller="HelloController">
        <h2>{{message}}</h2>
    </div>
    <div ng-app="httpService" ng-controller="httpController">
        <div>FirstName:{{user.name}}</div>
    </div>
</body>

</html>

Script.js

var app = angular.module("myapp", []);
app.controller("HelloController", function($scope) {
    $scope.message = "Hello, AngularJS";    
});

var httpApp=angular.module("httpService",[]);

httpApp.controller("httpController",function($scope,$http){

    var onUserComplete=function(response){
        $scope.user=""response.data"";
    }

    $http.get("https://api.github.com/users/rob").then(onUserComplete);

}
);

try removing quotes from response.data...if still does not work provide a plunkr link — Pankaj Kumar
– Pankaj Kumar, Commented Jun 24, 2016 at 10:36
stackoverflow.com/a/18583329/6011330 check this link. Its already answered. — Deepanjan
– Deepanjan, Commented Jun 24, 2016 at 10:50

Uzbekjon · Accepted Answer · 2016-06-24 10:42:06Z

2

Only one ng-app will be automatically bootstrapped on your page. That's why if you remove the first ngApp directive, the second one will work.

var httpApp = angular.module("httpService", []);

httpApp.controller("httpController", function($scope, $http) {

  var onUserComplete = function(response) {
    $scope.user = response.data;
  }

  $http.get("https://api.github.com/users/rob").then(onUserComplete);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

<div ng-app="httpService" ng-controller="httpController">
  <div>FirstName: {{user.name}}</div>
</div>

NOTE: You have a typo in your callback, remove ""s around your response.data. Also, since you are using Angular 1.5.6, you don't need to specify dependencies/inject your $http service to make your code work.

answered Jun 24, 2016 at 10:42

Uzbekjon

11.8k5 gold badges40 silver badges55 bronze badges

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

Comments

Pankaj Kumar · Accepted Answer · 2016-06-24 10:40:59Z

2

https://plnkr.co/edit/LyWCLeBeyHPzjys3LOcr?p=preview

<body ng-app="httpService">

    <div  ng-controller="httpController">
        <div>FirstName: {{user.key}}</div>
    </div>
</body>

This link is working fine...just try it out

Do not use ng-app more than once in your program...Your code would not work

answered Jun 24, 2016 at 10:40

Pankaj Kumar

8815 silver badges12 bronze badges

1 Comment

Prash Over a year ago

Thanks for the review!

Collectives™ on Stack Overflow

Cannot access http json service in angular js

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related