AngularJS - 未捕獲錯誤：[$ injector：modulerr]

Question

只是試圖讀取一個URL，我得到以下錯誤。

「未捕獲的錯誤：[$注射器：modulerr]」

任何想法？

<div ng-app="app" ng-controller="ctrl"> 
    {{catalog}} 
</div> 

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


var app = angular.module('app', ['jsonService']); 

angular.module('jsonService', ['ngResource']) 
.factory('JsonService', function($resource) { 
    return $resource('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93930/catalog.json'); 
}); 

app.controller('ctrl', function($scope, JsonService){ 
    JsonService.get(function(data){ 
    $scope.catalog = data; 
    }); 
}); 

Answer 1

1. 添加ngResource腳本到您的網頁

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

創建jsonService前app模塊

糾正您catalog.json文件 - 角無法解析它。使用http://jsonlint.com/用於驗證您的json

Error: Parse error on line 2: [ { title: "Selmer S2000 ----------^ Expecting 'STRING', '}'

代碼是在這裏JSBin

Answer 2

將您的代碼更改爲以下內容。在您的應用程序中使用它之前，您需要創建模塊「jsonService」。

<div ng-app="app" ng-controller="ctrl"> 
     {{catalog}} 
    </div> 

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

    angular.module('jsonService', ['ngResource']) 
    .factory('JsonService', function($resource) { 
     return $resource('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93930/catalog.json'); 
    }); 

    var app = angular.module('app', ['jsonService']); 

    app.controller('ctrl', function($scope, JsonService){ 
     JsonService.get(function(data){ 
     $scope.catalog = data; 
     }); 
    });