How to create a JS file with a variable name in AngularJS? - angularjs

Question

How can I include a JavaScript file in my Angular project but assign a name to all of its functions? I just included Underscore.Script and Lodash for the first time and noticed they both have actual names ("_" and "s")..
_.mixin(s.exports());
I've watched a few courses on JavaScript and Angular but cannot find anything that actually explains this or how to accomplish it.

Answer 1

In Javascript, the simplest way is when writing your library define all of your functions as properties of an object in the global scope.
var myLibrary = {};
myLibrary.myFunction = function(){
/* Your function code */
};
Then after including your file, you can access your functions like so:
myLibrary.myFunction();
A better way might be to wrap your library in a self executing function, which will help you avoid unintentionally adding properties to the global scope (a good practice)
(function(root){
var myLibrary = {};
myLibrary.myFunction = function(){
/* Your function code */
};
root.myLibrary = myLibrary;
}(window));
Please note that passing window to the self-executing function will work in the browser, but not in a different context (like nodejs).
If you want to create something specifically for Angular, I would suggest looking into angular services which is how you can create libraries that work with the Angular dependency-injection system.

Answer 2

in angular we have controllers, directives, services, factories and providers.
Lets take an example of Factory - "Customer" having function to get and set details.
app.module.js
angular.module("myapp", []);
Customer.js
angular.module("myapp").factory("Customer", function(){
function Customer(name, email){
this.name = name;
this.email = email;
}
Customer.prototype.getName = function(){
return this.name;
};
Customer.prototype.getEmail = function(){
return this.email;
};
Customer.prototype.setName = function(name){
this.name = name;
};
Customer.prototype.setEmail = function(email){
this.email = email;
};
});
CustomerController.js
angular.module("myapp").controller("CustomerController", ['Customer',
function(Customer){
var custObj = new Customer();
custObj.setName("Test");
custObj.setEmail("test#gmail.com");
console.log("Name: " + custObj.getName() + " Email: " + custObj.getEmail());
}
]);
Here app.module.js -- Angular App main module is initialised.
Customer.js is a JS and you can use this file and its functions by giving it a name "Customer" in CustomerController.js file.

Answer 3

Other answers tell you to make your own scripts modular. This is good, but it doesn't solve the problem of disambiguating Underscore and LoDash. So here's how to do that:
I would first recommend that you look into modular systems like RequireJS. Libraries like LoDash and Underscore are built to recognize and integrate with AMD style architectures, allowing them to coexist (however, these two libraries are redundant. LoDash is supposed to be a drop-in replacement for Underscore. But I digress.
If you do not use a module system (not to be confused with angular's module), you'll have to do the shim work yourself. It isn't hard, by any means, but it's a bit manual. Scripts specified in your HTML are executed in-order (caveat: there are asynchronous loaders out there, but they make your problem easier to solve, not harder).
So, for your particular problem, you can do this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.8.0/lodash.js"></script>
<script>
var mylodash = _;
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<script>
var myunderscore = _;
</script>
You will thereafter have access to both (feel free to name or group them however you'd like). Both of these libraries do a good job of not polluting the global namespace (which is attached to window in a browser). But if your library exposes lots of different methods, you'll need to cobble them all together yourself.
Simple? Sure, but in the long run, learn to use something like CommonJS or RequireJS. They not only solve this particular problem, but they also provide so many other benefits -- you'll be glad you did.