Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I am preparing a boiler Angular Application that will use AMD (require.js). So far I got it working, but I have issues with services. How do I incorporate service?

This is Main.js:

require.config({  

paths: {
// These are the core components - without which our application could not run
angular: '../lib/angular/angular',
angularResource: '../lib/angular/angular-resource',

// These are components that extend our core components
jquery: '../lib/jquery/jquery-1.8.2.min',
bootstrap: '../lib/bootstrap/js/bootstrap',
underscore: '../lib/underscore/underscore',

text: '../lib/require/text'  

},
  shim: {
    'angular' : {'exports' : 'angular'},
    'angular-resource' : {deps:['angular']},
    'bootstrap': {deps:['jquery']},
    'underscore': {exports: '_'}
  },
  priority: [
    "angular"
  ],
  urlArgs: 'v=1.1'
});

require( [
  'angular',
  'app',
  'services/services',
  'services/dateGetter',
  'controllers/controllers',
  'controllers/navbar',
  'controllers/exampleTemplateController',
  'filters/filters',
  'directives/directives',
  'routes'
], function(angular, app) {

  angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
  });
});

This is how I developed controller:

define([
    'app',
    '../helpers/exampleFile'  //example of importing custom file.js in our controller.
],

function(app, exampleFile) {

    'use strict';
    return app.controller('exampleTemplateController', [
        '$scope', 'dateGetter',
        function ($scope ) {
            $scope.sayHello = function(module) {

              alert("Current Date: " + dateGetter.getCustomDate + " " + exampleFile(module.name));

            }
        }
    ]);
});

This is how I tried to develop service (failing miserably here):

 define([
    'app'
],

function(app) {
        'use strict';
                debugger;
        return app.factory('dateGetter', [
            '$scope',
            function ($scope ) {
                $scope.getCustomName = function() {
                    return "THIS IS MY NAME";
                }
            }
        ]);
    });

I think I am close, but something eludes me.

Another question is, if I end up with lots of controllers and services, and we will... do I need to list each and everyone in main.js file (under require:)?

share|improve this question
add comment

1 Answer

I got the service working now. It was my fault. Here it is now, and I can access it and use it.

define([
    'app'
],

function(app) {
    return app.factory('serviceExample', function ( ) {

          return {
              nameOfMethod: function () {
                  return "Is this working";
              }
          }
        }
    );
});

What I wonder now... Do I need to use required with Angular at all?

I have read many posts debating the same question, without concise answer. I was thinking to use require, since we used it before, and this application will grow to be a large bugger anyway.

Opinions?

share|improve this answer
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.