Working with Angular Services and JavaScript Classes (accessing services within Class, or reworking class to be within Angular framework)

Question

I guess this is a 2 part question; but I'll start by explaining the problem I'm having.

I have an Angular project, and 3 classes, which are not 'part' of the Angular framework. The first question - is whether it's recommended to pull an instance of Angular within one of those classes, just to grab certain data from a singleton service.

And second - is there a way to 'incorporate' these classes more deeply into the Angular framework. I don't want to create them as services, because they are not meant to be singletons.

It's just frustrating, because it's so easy to grab a service within Angular - ie. just passing it's reference to a controller. With the external (external to the Angular framework) class/object, there is no reference I can pass. And the class/object in question, is not being called/initialized from within Angular, so I can't just pass the service reference directly.

Ideas?

mitch · Accepted Answer · 2013-06-14 20:36:06Z

1

You have a good amount of options (a reason why I like Angular). You can create them outside of your module and then assign them in the configuration blocks or use angular.element() to get its scope like the following:

HTML

<div ng-controller="MyCtrl" id='hi'>{{name | show}}! {{name2}}</div>

JS

 //object 'something' with  some method show that returns a formatted message
 var something = (function () {
     return {
         show: function (s) {
             return 'show ' + s;
         }
     }
 })();
 ///controller
 function MyCtrl($scope) {
     $scope.name = 'Mitch';
     $scope.name2 = '';
 }
 //module
 angular.module('myApp', []).
 value('a', something). //assignment of object to be used within module scope
 filter('show', function (a) { //object something being used in this filter
     return function (val) {
         return a.show(val);
     };
 });
 ///Using the scope from a known element that uses a controller
 $(function () {
     var scope = angular.element('#hi').scope();
     scope.$apply(function () {
         //using the object again to change a value with the something object formatting the value.
         scope.name2 = something.show('Mitch2');

     });
 });

The fiddle for the above code.

Personally, I would go for the configuration block if the object or function was already created elsewhere for use among other parts of the app non-angular related. The shared instance is then passed around like you would a service, to any of your directives, filters (like in this exapmple), etc.

answered Jun 14, 2013 at 20:36

mitch

1,83115 silver badges14 bronze badges

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

1 Comment

xil3 Over a year ago

+1 and thanks for the answer! It gave me a lot of insight on some neat alternatives. I ended up just using the injector to pull the service directly, which worked wonderfully. Check my answer below.

xil3 · Accepted Answer · 2013-06-14 21:13:43Z

0

I just ended up using the following, which gave me the active instance of the Angular app, and let me grab the service singleton that I needed.

var injector = angular.element('html').injector(),
               dataService = injector.get('data');

Thanks again to @mitch for alternate options.

answered Jun 14, 2013 at 21:13

xil3

16.5k8 gold badges68 silver badges103 bronze badges

Collectives™ on Stack Overflow

Working with Angular Services and JavaScript Classes (accessing services within Class, or reworking class to be within Angular framework)

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related