current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I realise there are a few answers to this question on here, but I just can't seem to get them working with my set up. This is a Plunker of what I am trying achieve (not my own work): http://plnkr.co/edit/Ofq7Md8udEnIhAPF1NgL?p=preview

Currently, I have this for my index.html file:

<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>

To register the components, I have defined them in the karma.conf.js file:

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'
];

To then create the service, I use the same technique that seems to be documented online in most examples:

'use strict';

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

Where an error seems to be triggered is when I try to define the service in my 'app' variable, where adding the service name stops the content loading ['jsonData']:

'use strict';

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

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

I would share my views and controllers also, but before I can even use the JSON data in my template, there are an unearthly amount of errors to deal with:

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

There are some other errors also, but these seem to be mainly because the scripts further up the DOM are stopping them loading correctly. Any help would be great!

share|improve this question
    
You've named your module and factory the same, 'jsonData'. The example you have posted has a casing difference which you would also need. Or give the service/module a different name so you don't confuse the two. It would also be good to have a plunker of your (non-working) code. –  codemonkey Jun 24 '13 at 12:52
    
I have made a basic Plunker, though as I can't see the console in Plunker, it is a bit hard to tell if this is exact: plnkr.co/edit/uPE78I0m90jjmpBL50LK?p=preview –  JohnRobertPett Jun 24 '13 at 13:20
add comment

2 Answers

up vote 0 down vote

you could try this :

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

and this is not necessary to load the datas in the html

<script src="scripts/services/data.js"></script>
share|improve this answer
    
I have tried this, but still throws up the same errors. Does require.js need to be a server and clientside module to work? –  JohnRobertPett Jun 24 '13 at 13:31
add comment
up vote 0 down vote

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.

share|improve this answer
    
Can you explain why you call the module and service both jsonData, then instantiate this with jsonService in the controller? There is a 'name' in the data.js file, how come it won't pull that one through? –  JohnRobertPett Jun 24 '13 at 13:43
    
Answer updated above –  codemonkey Jun 24 '13 at 13:50
    
ok, thanks for your help. Still too many console errors to even get this running. Think I am going to something a little simpler and return to this! –  JohnRobertPett Jun 24 '13 at 14:20
    
The "name" property in your case is on each element, not the whole data. That is the difference compared to the working plunker. –  codemonkey Jun 24 '13 at 14:51
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.