在AngularJS中使用JSON作爲服務

我意識到這裏有幾個關於這個問題的答案，但我似乎無法讓他們與我的設置一起工作。這是我試圖實現（不是我自己的工作）一Plunker：http://plnkr.co/edit/Ofq7Md8udEnIhAPF1NgL?p=preview 在AngularJS中使用JSON作爲服務

目前，我已經爲我的index.html文件：

<body ng-app="HomeCourtArenaApp"> 

    <div class="container" ng-view></div> 

    <script src="components/angular/angular.js"></script> 
    <script src="components/require/require.js"></script> 
    <script src="components/angular/angular-resource.js"></script> 

    <script src="scripts/services/data.js"></script> 
    <script src="scripts/app.js"></script> 

</body>

要註冊組件，我已經定義了他們在karma.conf.js文件：

files = [ 
    JASMINE, 
    JASMINE_ADAPTER, 
    'app/components/angular/angular.js', 
    'app/components/angular/angular-resource.js', 
    'app/components/angular-mocks/angular-mocks.js', 
    'app/scripts/*.js', 
    'app/scripts/**/*.js', 
    'test/mock/**/*.js', 
    'test/spec/**/*.js' 
];

然後，爲了創建服務，我用這似乎是大多數在線的例子證明了同樣的技術：

'use strict'; 

angular.module('jsonData', ['ngResource']) 
.factory('jsonData', function($resource) { 
    return $resource('data/shoe3Dconfig.js'); 
});

如果一個錯誤似乎是被觸發是，當我嘗試在我的「應用」變量定義服務，其中添加服務名稱停止內容加載[「jsonData」]：

「使用嚴格的」;

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

app.config(function ($routeProvider) { 
    $routeProvider 
    .when('/', { 
     templateUrl: 'views/main.html', 
     controller: 'MainCtrl' 
    }) 
    .otherwise({ 
     redirectTo: '/' 
    }); 
});

我會分享我的看法和控制器也，但在此之前我甚至可以在我的模板中使用JSON數據，有錯誤的處理與超凡脫俗的量：

Uncaught Error: Module name "path" has not been loaded yet for context: _. Use require([]) 

Uncaught Error: Mismatched anonymous define() module: function() { 
    return getStyleProperty; 
    } 

Uncaught Error: No module: ngResource

有一些其他錯誤也是如此，但這些似乎主要是因爲DOM後面的腳本正在阻止它們正確加載。任何幫助將是偉大的！

來源

2013-06-24 JohnRobertPett

您已將您的模塊和工廠命名爲'jsonData'。你發佈的例子有一個你也需要的套管差異。或者給服務/模塊一個不同的名字，以免混淆兩者。對你的（非工作）代碼進行調查也是一件好事。 – codemonkey

我已經做了一個基本的Plunker，但是因爲我在Plunker中看不到控制檯，所以很難判斷它是否確切：http://plnkr.co/edit/uPE78I0m90jjmpBL50LK?p=preview – JohnRobertPett

你可以試試這個：

的app.js：

angular.module('HomeCourtArenaApp', ['HomeCourtArenaApp.services', 'HomeCourtArenaApp.controllers']). 
    config(['$routeProvider', ($routeProvider) { 
     $routeProvider.when('/', { templateUrl: 'views/main.html', controller: 'MainCtrl' }); 
     $routeProvider.otherwise({ redirectTo: '/'}); 
}]); 

angular.module('HomeCourtArenaApp.services', ['ngResource']). 
    factory('JsonData', function($resource){ 
    return $resource('data/shoe3Dconfig.js'); 
}); 

angular.module('HomeCourtArenaApp.controllers', []). 
controller('MainCtrl', ['$scope', 'JsonData', function($scope, JsonData) { 
    $scope.objs = JsonData.query(); 
     console.log(objs); 
    } 
}]);

，這是沒有必要的加載DATAS在html

<script src="scripts/services/data.js"></script>

來源

2013-06-24 13:19:11

我有試過這個，但仍然拋出同樣的錯誤。 require.js需要成爲服務器和客戶端模塊才能工作嗎？ – JohnRobertPett

此編輯plunker http://plnkr.co/edit/33qW5VRnQVrHWFlp16kz?p=preview應該得到你繼續前進。

您需要在應用程序中指定您需要的模塊（jsonData）作爲依賴項。目前沒有顯示名稱，因爲您的數據沒有名稱屬性。

你命名爲JSON服務模塊定義 'jsonData'

angular.module('jsonData', ['ngResource'])

該模塊定義一個服務供應商（廠） 'jsonService'

.factory('jsonService', function($resource) {

您列出 'jsonData' 模塊作爲一個依賴爲您的模塊，以便您可以訪問任何東西在那裏定義

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

然後你用角的依賴注入要求jsonService

注

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

一個實例，如果你的「生產-ISE」這個，然後再縮小你的JS，你將需要配置DI代碼。我會把它留給你在Angular文檔中找到。

這是否解釋了一些事情？

您可以通過在瀏覽器中打開開發人員工具來獲取控制檯。

來源

2013-06-24 13:32:35 codemonkey

你能解釋爲什麼你調用模塊和服務兩個jsonData，然後用控制器中的jsonService實例化這個？ data.js文件中有一個'名字'，它怎麼會不能通過這個名字？ – JohnRobertPett

回答更新超過 – codemonkey

好的，謝謝你的幫助。仍然有太多的控制檯錯誤甚至無法運行。想想我會更簡單一些，然後回到這裏！ – JohnRobertPett

在AngularJS中使用JSON作爲服務

回答

相關問題