CODEWITHSUNDEEP
javascriptangularjs
Cristian Echeverria
Cristian Echeverria

Reputation: 155

How inject external javascript file in angularjs controller

I need to use this NoSleep.js inside my AngularJs controller. I installed NoSleep using bower but I need to inject it to my angularjs controller, but I have no idea on how do it, NoSleep isn't an angular service and I need to use this declaration var noSleep = new NoSleep(); in order to use it.

I'm using babel, webpack, gulp, karma

Any advise?

Upvotes: 1

Views: 2769

Answers (3)

Mike Feltman
Mike Feltman

Reputation: 5176

Typically when using non-angularjs libraries in an Angularjs application they are wrapped in a module. Then you inject the module into your app and then inject the service/factory you've wrapped with this into your controllers as needed, so you'd create a module that looks something like this:

(() => {
  "use strict"
  angular.module('nosleep.module', []).factory('nosleep', ['', function () {
    return new NoSleep()
  }])
})()

Then you'd inject the module into your main application module with something like:

angular.module('myApp', '[nosleep-module')

Then in your controllers that require access to nosleep you'd inject nosleep.

class myController {
    constructor(nosleep) {
       this.nosleep = nosleep
    }
}

Then from within your control your can address it with this.nosleep.

Upvotes: 2

Dabbas
Dabbas

Reputation: 3238

If you have any JS lib and it's not an Angularjs lib, just add it using script tag in the html file and call it like you used to before they create AngularJs.
Have you tried it ?

Or go to the other way and wrap the lib with AgnularJs service (write an AngularJs service and call the lib method inside it), then inject this new service anywhere you want.

Update:
What @Mike Feltman and @richbai90 said in their answers was good and maybe enough for you, but I think it's better to build your service and call a methods you created, but inside these method use what ever library you want (it'll be like using interfaces in C#): 

(function() {
    'use strict';

    angular.module('nosleep.module', []).service('nosleep', ['', nosleepFunc]);

    function nosleepFunc() {
         var nosleepObj = new NoSleep();

         var service = {
              method1: method1,
              method2: method2
              //... etc
         };

         function method1() {
             return nosleepObj.method1();
         }

         // ..... other methods

         return service;
    }

})();

This way if you wanted to change nosleep lib to another one, and that new one lib has another method names, you need only to change in your service code.

Upvotes: 1

richbai90
richbai90

Reputation: 5204

It looks like NoSleep just declares a function in the global scope, so you could do something like this:

NoSleepService.js

(function () {
    // place noSleep minified code here
    angular.module('myApp').service('noSleep', NoSleep);
})()

That will create a NoSleep object within the enclosing function so that it doesn't pollute the global scope and register a new instance of it to your angular app.

Upvotes: 1

Related Questions