I found a javascript library "https://github.com/jvail/spatiasql.js" that I want to use with angular. I know I could just include it in the name of my scripts in my header, but I want to be able to inject it into my angular modules to access it from the controllers. I believe to do this I will need to have a custom built angular directive from this javascript library, correct? If so how do I accomplish this?
3 Answers
The simplest way would be to create a factory that returns the library's namespace object, e.g.
(function() {
angular
.module("myModule")
.factory("sql", SqlFactory);
SqlFactory.$inject = ['$window'];
function SqlFactory($window) {
return $window.spatiasql;
}
})();
Then you can inject it:
(function() {
angular
.module("myModule")
.service("someService", SomeService);
SomeService.$inject = ["sql"];
function SomeService(sql) {
var db = new sql.DataBase();
}
})();
7 Comments
Maarten
nice one, but why the $? Isn't that limited to AngularJs internals?
R. Salisbury
I typically use it to indicate that it's simply an injectable wrapper around an existing library. You can call it whatever you like.
Maarten
right, I'd stay away from $ but it's a nice solution still
Tricode
Ok. There are just a few things I am uncertain of. When you say "return spatiasql" how does angular know that it's referring to "spatiasql.js"? Also, the syntax for creating a database is "var db = new sql.Database()" (I can see you read some of the API, thank you. Because we're using the injected object named $SQL, do we have to use the object name "$SQL" as a prefix to using any of its code? ex. "var db = new $SQL.sql.Database()" ?
R. Salisbury
Angular doesn't know what you're referring to. The whole point of this is to make it so. You can just use the object without doing this as @Maarten suggested, but if you want to inject it, you'll have to do something like this. The reason I was able to do
new sql.Database() is because Angular's DI assigns the injected members to the function arguments positionally. This means you can rename the argument from $SQL to sql (in the function signature, not in the dependency array) and it'll work just fine. |
No need to inject it in order to access functions from it in your controllers. You can just call it's methods from you controllers.
2 Comments
Tricode
Thanks for replying. Then what is the purpose of injection into modules at all? I looked it up but I don't REALLY understand.
Maarten
injecting is an Angular construct, which is meant to make testing easier because you can swap out the real object for a mock one. With non-Angular code you cannot use injection into Angular objects. The way the other answer does it seems like a good idea though
Injecting is not an angular construct. It is an implementation of the inversion of control design pattern. It is one of the foundations of modern object oriented design. The purpose of it is to make unit tests possible. It leads to code that isn't tightly coupled. DI allows you to code to an interface rather than an implementation.
