{"id":2413,"date":"2015-12-15T06:41:05","date_gmt":"2015-12-15T06:41:05","guid":{"rendered":"http:\/\/www.nikola-breznjak.com\/blog\/?p=2413"},"modified":"2015-12-15T06:47:51","modified_gmt":"2015-12-15T06:47:51","slug":"include-object-defined-outside-angular-ecosystem","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/stack-overflow\/include-object-defined-outside-angular-ecosystem\/","title":{"rendered":"Include an object defined outside Angular ecosystem into a factory"},"content":{"rendered":"

\"profile<\/a>
\nI’m a big fan of Stack Overflow<\/a> and I tend to contribute regularly (am currently in the top 0.X%<\/a>).\u00a0In this category (stackoverflow<\/a>)\u00a0of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here<\/a>.<\/p>\n

I asked\u00a0this question<\/a>\u00a0myself:<\/p>\n

We’re having an argument, which I hope you guys will help resolve.<\/p>\n

Say I have a simple factory defined like this:<\/p>\n

angular.module('myModule', [])\r\n\r\n.factory('Fact', function() {\r\n    var Fact = function() {\r\n        var that = {};\r\n\r\n        that.var1 = [];\r\n        that.var2 = [];\r\n\r\n        return that;\r\n    };\r\n\r\n    var fact = {\r\n        get: function() {\r\n            return Fact();\r\n        }\r\n    };\r\n\r\n    return fact;\r\n});<\/pre>\n
I found out that this code will be working if I write it like this:<\/p>\n
angular.module('myModule', [])\r\n\r\n.factory('Fact', function() {\r\n    var fact = {\r\n        get: function() {\r\n            return Fact();\r\n        }\r\n    };\r\n\r\n    return fact;\r\n});\r\n\r\n\r\nvar Fact = function() {\r\n    var that = {};\r\n\r\n    that.var1 = [];\r\n    that.var2 = [];\r\n\r\n    return that;\r\n};<\/pre>\n
Namely, I can take this code of the object Fact<\/code> and put it in some other plain .js<\/code> file, include it before the Angular one (in index.html<\/code> file) and this “would work”.<\/p>\n
However, I’m trying to resolve an argument that this approach is not good (well, not an Angular approach at that) because then this Fact<\/code> is “laying around on the global scope”, which is not good.<\/p>\n
In which circumstances would you say that this is\/isn’t a good solution?<\/p>\n
Is there a way to include a “nonAngular” code (simple JavaScript code written in some .js<\/code> file) into the Angular factory?<\/p>\n
I accepted the answer from user Dan Prince<\/a>:<\/p>\n
Between factories, services, providers, constants and values, there’s not really a good reason to have any code outside of Angular’s constructs unless<\/strong> it’s third party code.<\/p>\n
If it is, you won’t have control over the way that the library, framework, etc registers itself. It might use the global scope, alternatively, it might provide a module export.<\/p>\n
Where possible, the cleanest and safest way to include third party code inside Angular is with a build-step using a module bundler.<\/p>\n
For instance, I want to use the hypothetical package foojs<\/code> from inside Angular using browserify<\/a>:<\/p>\n
Install the package with npm<\/p>\n
npm install --save foojs<\/pre>\n
Then use it like this.<\/p>\n
var foojs = require('foojs');\r\n\r\nvar app = angular.app('myapp')\r\n\r\napp.service('myservice', function() {\r\n  \/\/ here we can use foojs safely\r\n});<\/pre>\n
You can also achieve similar things with WebPack<\/a>.<\/p>\n
The reason this is safer is because after the build step, all the modules will be wrapped inside a function that protects the global scope.<\/p>\n
If you aren’t able to use a module bundler, then the only option is to use the global scope and allow the third party code to bind onto the window object.<\/p>\n
https:\/\/twitter.com\/HitmanHR\/status\/676654486115454976<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"
I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%).\u00a0In this category (stackoverflow)\u00a0of posts, I will be posting my…<\/p>\n","protected":false},"author":1,"featured_media":609,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":[],"class_list":["post-2413","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-stack-overflow"],"_links":{"self":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/2413","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/comments?post=2413"}],"version-history":[{"count":2,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/2413\/revisions"}],"predecessor-version":[{"id":2415,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/2413\/revisions\/2415"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media\/609"}],"wp:attachment":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media?parent=2413"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/categories?post=2413"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/tags?post=2413"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}