在AngularJS中将JSON用作服务_Angularjs

在AngularJS中将JSON用作服务

angularjs

在AngularJS中将JSON用作服务,angularjs,Angularjs,我意识到这里有一些关于这个问题的答案，但我似乎无法让它们与我的设置一起工作。这是我努力实现的目标（不是我自己的工作）：目前，我的index.html文件中有以下内容： <body ng-app="HomeCourtArenaApp"> <div class="container" ng-view></div> <script src="components/angular/angular.js"></script>

我意识到这里有一些关于这个问题的答案，但我似乎无法让它们与我的设置一起工作。这是我努力实现的目标（不是我自己的工作）：

目前，我的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>

然后，为了创建服务，我使用了在大多数示例中在线记录的相同技术：

'use strict';

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

当我尝试在我的'app'变量中定义服务时，似乎触发了一个错误，添加服务名称会停止内容加载['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上的脚本正在阻止它们正确加载。任何帮助都会很好

您可以尝试以下方法：

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

这对于在html中加载数据是不必要的

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

这个经过编辑的plunker应该会让你走得更远

您需要指定希望在应用程序中作为依赖项的模块（jsonData）。当前没有显示名称，因为您的数据没有名称属性

名为“jsonData”的JSON服务模块定义

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

此模块定义服务提供商（工厂）“jsonService”

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

您可以将“jsonData”模块列为模块的依赖项，以便可以访问其中定义的任何内容

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

然后使用Angular的依赖项注入请求jsonService实例

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

请注意，如果您“生产ise”这一点并缩小您的JS，您将需要配置DI代码。我将把它留给你在文档中查找

这能解释更多吗

通过在浏览器中打开开发者工具，您可以在plunker中获得控制台。

您已经将模块和工厂命名为“jsonData”。您发布的示例有一个您也需要的大小写差异。或者为服务/模块指定一个不同的名称，以免混淆两者。有一个你的（非工作）代码的plunker也很好。我已经做了一个基本的plunker，虽然我在plunker中看不到控制台，但很难说这是否准确：我已经尝试过了，但仍然抛出了相同的错误。require.js是否需要是一个服务器和客户端模块才能工作？您能否解释一下为什么同时调用模块和服务jsonData，然后在控制器中用jsonService实例化它？data.js文件中有一个“name”，为什么它不能通过呢？好的，谢谢你的帮助。仍然有太多的控制台错误，甚至无法运行此操作。我想我要做一些简单一点的事情，然后再回到这里！案例中的“name”属性位于每个元素上，而不是整个数据上。这就是与正在工作的plunker相比的区别。

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