3

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:)?

1 Answer 1

2

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?

Sign up to request clarification or add additional context in comments.

1 Comment

You should use requireJS for lazy loading or async loading files, for example if you app is big. Also you can do optimization over the files like minification or obfuscation.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.