I'm trying to use a JavaScript variable created globally (inside index.html file head section) inside my angularJS controller. Unfortunately, I also have to use grunt to create a minified version of every file in my project, and so variable assignments get altered.
What should be along the lines of this:
$scope.adminName = adminName (global variable set in head)
ends up becoming something like:
var a = e;
Or some BS like that. I cannot post the example due to restrictions placed on us. But basically, how do you pass a global JavaScript variable into an AngularJS controller while also ensuring that during the minification process (when variable names get altered), it's still valid.
Related
I have an electron project that is split into multiple windows, with several javascript files for each window. My problem is that there is no recognition that these files are linked by VS Code. For Example:
A variable declared in "mainwindow/constants.js" and then used in "mainwindow/socketFunction.js", will show up as greyed out and is declared but the value is never read. Likewise, if a function is declared in a certain file and used in another, ctrl-clicking the function name to go to function declaration does not work.
Is there any way to get VS code to recognize the structure of the files, ie: that variables declared in one file are the same that are being used in another.
EDIT: my file structure looks like this if it helps
My TypeScript and plain JavaScript code need to share a namespace and some data. TypeScript should "prepare" a namespace, external JS provides data, TypeScript processes it.
The context is an Angular 2 application. The loading order is:
Angular 2 app with its JavaScript starts
a custom external JavaScript file is dynamically loaded from an external source (JSONP style)
Angular 2 app does further processing on the data generated by the loaded JS file
Currently in the external JavaScript file I'm doing something like this:
if (typeof Blog === 'undefined')
{
Blog = {
Posts: []
}
}
// ...
Blog.Posts.push(post);
In my Angular 2 app this JavaScript file is being dynamically loaded and the value then accessed like this:
declare var Blog: any;
...
let firstPost = Blog.Posts[0];
This works, I can access data placed by the external JS.
Now I want to keep the JavaScript part as minimal as possible. So I want to move the declaration of Blog and Posts to TypeScript, preferably so that it can be used there in a strongly typed fashion.
So I wish my JavaScript looked like this:
// ...
Blog.Posts.push(post);
Note the missing declaration of Blog. I tried something like this in TypeScript:
declare var Blog: BlogClass; // <- this is probably wrong, can be changed to anything necessary to make it work...
// ...
Blog = new BlogClass();
But apparently its not that easy. My Angular 2 app dies on me with a generic error message. The error is caused by Blog = new BlogClass().
Any hints on how to solve this?
declare means that the thing being declared must be defined somewhere else.
declare var Blog: BlogClass;
does not produce any code in the resulting javascript, so this assignment
Blog = new BlogClass();
fails at runtime because Blog does not exist.
When you remove declare, this line appears in the generated code:
var Blog;
However, it does not necessarily create var Blog in global scope - when you compile typescript code as modules, it will be created inside a module and will be inaccessible to external javascript code, unless you go through the route of exporting it from typescript module and importing that module in your javacsript code.
The simplest (but a bit dirty) way to make sure that an object is created in global scope is to do that explicitly:
(window as any).Blog = new BlogClass();
I'm creating a program in Meteor JS. All the JS files are loaded at once, in a certain order.
A lot of variables need to be global, in order to work, but at the same time, I want my JS to be modular.
For FILE 3 to use the functions in FILE 1 and FILE 2, the functions have to be declared as variable assignments like in FILE 2 or else, they are not accessible outside of the file. I don't believe this is an issue of hoisting, because main.js is loaded last, those are the functions that use the functions in FILE 1 and 2. Either way, I theoretically should be able to see the function in the console if it is on a global level.
FILE 1
function foo() { } // This is not global outside of the file. Why?
FILE 2
bar = function() { } // This is considered global.
Functions in FILE 1 can access the function just fine, but if placed outside the file, the function or console cannot access them.
Is this a Meteor JS thing? A JavaScript thing? Someone help me understand and learn. :)
Your code is being wrapped in a function, so variables and function literals create local variables.
However, if you assign to a name that has not been declared, that will create a global variable.
You should add 'use strict'; to turn that into an error instead.
I'm trying to experiment with [this library](https://code.google.com/p/autotags/ in meteor).
First, when I tried to install all the individual javascript files to client/compatibility folder, I get an error message when calling AUTOTAGS from the constants js file:
AUTOTAGS = { ... } // autotags-js-core.js
AUTOTAGS.TAG_CONSTANTS = [ 'news','research','favourite' ]; // autotags-js-constants.js
It kept saying that AUTOTAGS was undefined. I deduced from reading about global scope that any external library with VAR that you want to have global scope, put it under compatibility.
If that's correct, then why isnt the scope global when putting all individual files under lib/external? AUTOTAGS = {..} without var means its available to entire application right?
Instead, I got the scope to work by combining all the javascript files in one single js file under lib/external. I thought I understood, but it gets worse.
Within a single js file - any function that begins with a closure is local to that FILE, and not global scope, whilst any function assigned to variable name makes it a global variable?
function(something() { ... } ) // closure, local
generateTags = function() { ... } // global scope?
var generateTags = function() { .... } // is this local or global?
If the var generateTags function is local, then putting it under client/compatibility will make it global? Lastly! - I get the vague notion that I should define global variables under lib/environment.js from here - https://github.com/oortcloud/unofficial-meteor-faq#where-should-i-put-my-files, is that true?
There are actually two questions here. One is about how the scope works in javascript, the other about integrating the autotags library into a meteor project. Since the answer for the first one should be relatively easy to find somewhere else, I'll only try to answer the second question.
The reason you are getting this "undefined" error is not a scope problem but it is somehow related to the order in which the files are loaded into your meteor app. Namely, autotags-js-constants.js comes before autotag-js-core.js because constants precedes core in the alphabetic ordering. In consequence, the AUTOTAGS variable is not defined at the point when the autotags-js-constants.js file is being parsed.
One simple way to overcome this issue is to rename your files, so as to enforce the right loading order. Another way is to use a tool that will enable you to define dependencies between files. If you are interested please take a look at require project, which is basically a lightweight and meteor friendly implementation of the core requirejs features.
However, probably the best solution is to create a custom smart package. It would allow you to explicitly define the order in which the files should be loaded. Just take a look on some existing smart packages to get the idea on how this should be implemented. I would also recommend using meteorite to manage your custom smart packages.
I have an HTML file which imports two files:
graph.js and main.js
The main file contains logic which accesses a phone's accelerometer/records acceleration and it is a purely javascript file. The Graph.js file contains a single JQuery function $(.....)
Is it possible to access a variable in main.js from graph.js?
Yes jQuery is written in JavaScript and it can access any variable declared in that page via import of other JavaScript files. As you are trying to access variable in onload of document, I don't see any problem, because other scripts should already have been loaded before that.
Yes.
if it is in global scope, yes.
It should be, so long as the main.js loads first and if you set it as a global variable.
You make a global variable by creating it outside of a function. If needed, you can create it outside a function, then set it inside a function in the main.js file.
You can freely share variables between different JS files (a jQuery file is just a JS file) in several different ways:
Define the variables in the global scope, then they can be accessed anywhere.
Define variables on the window object. This makes them globally accessible even if your code defining the variables isn't in the global scope.
Define variables as properties on any object that you can get to from your code. So, if you have a global config object called myConfig, you could define properties on it like myConfig.count = 0; and you can then access myConfig.count from anywhere. This is often referred to as namespacing and creates only a single global object which you then add multiple properties to.
Define a globally accessible function that returns your data that you can call from anywhere.
When designing how this works, remember that it's generally better to introduce as few globally accessible symbols as possible because each one is an opportunity for a conflict with some other code in the page.