Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Creating Service in Angular while using Require.js

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

like image 679
EnterpriseXL Avatar asked Mar 25 '26 00:03

EnterpriseXL


1 Answers

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?

like image 177
EnterpriseXL Avatar answered Mar 26 '26 17:03

EnterpriseXL



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!