0

我意识到这里有这个问题的一些答案，但我似乎无法让他们与我的设置一起工作。这是我正在努力实现的目标（不是我自己的工作）：http ://plnkr.co/edit/Ofq7Md8udEnIhAPF1NgL?p=preview

目前，我的 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');
});

当我尝试在我的“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 更远的脚本正在阻止它们正确加载。任何帮助都会很棒！

4

2 回答 2

0

This edited plunker http://plnkr.co/edit/33qW5VRnQVrHWFlp16kz?p=preview should get you further along the way.

You need to specify the module (jsonData) that you want in your app as a dependency. There is currently no name displayed since your data does not have a name property.

Your JSON service module definition named as 'jsonData'

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

This module defines a service provider (factory) 'jsonService'

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

You list the 'jsonData' module as a dependency for your module so that you can access anything defined in there

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

You then use Angular's Dependency Injection to request an instance of jsonService

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

Note that if you "production-ise" this and minify your JS, you will need to configure the DI code. I will leave that to you to find in the Angular docs.

Does this explain things a bit more?

And you can get the console in plunker by opening the developer tools in your browser.

于 2013-06-24T13:32:35.280 回答
0

你可以试试这个：

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>
于 2013-06-24T13:19:11.623 回答