AngularJS（カスタムサービスを使用したJSONのロード）

Question

jsonファイルをロードするためのサービスを構築しようとしています。私は間違って何をしていますか？

サービス

app.service("jsonService", function ($http, $q) 
{ 
    var deferred = $q.defer(); 

    $http.get('./assets/json/home.json').then(function (data) 
    { 
     deferred.resolve(data); 
    }); 

    this.getHomeItems = function() 
    { 
     return deferred.promise; 
    } 
}) 

マイコントローラー

app.controller('homeController', function ($scope, jsonService) { 

    var promise = jsonService.getHomeItems(); 
    promise.then(function (data) 
    { 
     $scope.home_items = data; 
     console.log($scope.home_items); 
    }); 

}); 

コンソールエラー：あなたがdependency injectionが欠落している

Answer 1

$スコープが定義されていません。

あなたのサービスは次のようになります。

app.service("jsonService", ["$http", "$q", function ($http, $q) 
{ 
    var deferred = $q.defer(); 

    $http.get("./assets/json/home.json").then(function (data) 
    { 
     deferred.resolve(data); 
    }); 

    this.getHomeItems = function() 
    { 
     return deferred.promise; 
    } 
}]); 

そして、あなたのコントローラー：

app.controller("homeController", ["$scope", "jsonService", function ($scope, jsonService) 
{ 
    var promise = jsonService.getHomeItems(); 
    promise.then(function (data) 
    { 
     $scope.home_items = data; 
     console.log($scope.home_items); 
    }); 
}]); 

Answer 2

あなたは$ HTTPで返さ約束してから再ラッピングをアンラップされている一般的なアンチパターンを持っています約束のデータ。これは不必要で、$ httpによって返された約束を返すだけです。

this.getHomeItems = function() { 
    return $http.get("./assets/json/home.json"); 
} 

Answer 3

あなたが提供していませんでしたHTML、見ないで、私はあなたのコントローラのコンストラクタに$の範囲を注入していない可能性があり数える：

app.controller('homeController', ['$scope', function ($scope, jsonService) { 
    ... 
}]); 

理論的には、AngularJSは推測することができるはず変数名からの依存関係ですが、公式文書によると、これがうまくいかず、依存関係を明示的に注入しないという習慣はお勧めできません。 したがって、上記のように明示的な注入を試みることができます。

ここに公式ドキュメントの例を参照してください：

https://docs.angularjs.org/guide/controller

とここに：あなたは〜コンソールエラーを取得している

https://docs.angularjs.org/guide/di