2016-06-24 9 views
1

私はangularjsを初めて使用しています。なぜそれが動作しないのか知りたいのですが。角度jsでhttp jsonサービスにアクセスできない

コードに欠陥があり、同じことがわかりません。

Javaの観点から考えると、httpController definedには内部で定義されたネストされた関数があります。

ここで、それは私のコード

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); 

} 
); 
+0

response.dataから引用符を削除してみてください。まだ動作しない場合は、plunkrリンクをご利用ください。 –

+0

http://stackoverflow.com/a/18583329/6011330このリンクをクリックしてください。すでに答えられている。 – Deepanjan

答えて

2

を動作しないでしょう、それを試してみる...正常に動作していますあなたのページのautomatically bootstrappedそのため、最初のngApp指令を削除すると、2番目の指令が機能します。

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>

注:あなたがあなたのコールバックのタイプミスを持って、あなたの周りresponse.data""秒を削除します。また、角度1.5.6を使用しているため、依存関係を指定する必要はありません/コードを動作させるために$httpサービスを注入する必要はありません。

+0

この線量は働きます...ありがとうございます。 – Prash

2

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

<body ng-app="httpService"> 

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

は、このリンクはただ一つだけng-appはなり

あなたのプログラムで複数回NG-アプリを使用しないでください...あなたのコードは

+0

レビューをいただきありがとうございます! – Prash

関連する問題