How to transfer a object from JS to AngularJS? - javascript

I got an JS-object in my index.html namend user. In this object are some user with mail, name etc.
So now I want to use this object in my app.js (AngularJS). I need it there.
I tried to tranfer it like this in my app.js:
var tempArr = $scope.user;
But it does not work.
Is there a possibility to transfer it from JS in my index.html to app.js?

As You asked From JS to angularjs so anything that is in js is in global window scope of browser and accessible inside angularjs scope so no problem to use a variable from js to angularjs context.

In your, app.js you probably have something like
var app = angular.module(/*blah blah*/);
That same app variable should be (made) accessible from the outside i.e. in the global scope. That way you can just write
app.tempArr = $scope.user;
But, of course, this is just quick and dirty solution. What I usually do is to create one global object, like
var GLOBAL = {};
and attach everything of mine on it, like
GLOBAL.app = angular.module(/*blah blah*/);
GLOBAL.someHelperFunction = function someHelperFunction(){};
and even, if needed
GLOBAL.tempArr = $scope.user;
// even better if you just clone the user values
// not just attach it to GLOBAL

Related

Is it possible to modify a function after passing it through another function?

For example, I am inside a development environment where I cannot access the global function directly. (I am developing a WeChat's weixin mini program plugin.)
Let's say the global variable App and Page are two functions respectively, and then I can pass them via a function let's call it rprm(App, Page)...
Then if I do
...
var owxapp = App
App = function(){
...
return owxapp.apply(this, arguments)
}
...
this won't work on the global App (frankly I think it is a sibling App, the plugin and the mini programs are probably really siblings instead of parent&child) because when I pass it via a function a new scope was generated.

function is not getting called from a click function in angular 5

Hi Guys i'm stuck with a small issue in angular 5, I'm trying to call a common session check method which is imported from a common ts file, i'm using the session check method on load of the page and on click of logout button to redirect the user to login page. but on load of the page it works fine, but on click of a button it gives an error of undefined, Please help thanks in advance.
Dashboard
Imported
this inside function() { ... } definition does not refer to your component, but to that function context. Use arrow function so this context will remain bound to your component:
logout() {
session.signOut().then(() => {
this.s.checkIfSignedIn();
});
}
Also you should remove the var keyword when declaring class variable u.
Bonus advices:
care about your editor/linter warnings (to suppress errors when accessing global objects like gapi, declare that first like this: declare const gapi: any;)
care about code indenting
try to make your variable names descriptive, do not use names like a or u, again so you do not get lost in the code so easily (btw you have utils variable there too, maybe you should use that instead of defining new one called u...)
You are declaring it with var and calling it with this. It's not a property of the component, that's why it's not working.
You have a different scope inside the promise.
logout() {
let self = this;
var session = gapi.auth2.getAuthInstance();
session.signOut().then( function() {
localStorage.clear();
self.s.checkIfSignedIn();
});
}

Access javascript variable in component in Angular 5

I have a js file in my Angular application, data.js . This js file has some variables declared in it, something like below.
var data = 'test'
Now I have to access these variables and their values in my component (app.component.ts).
I read some where that declaring them as exports make them into modules and those can be accessed anywhere, But I'm not sure how this can be done.
This is the structure of my application. I have data.js in assets->js folder.I need to modify the variable value in app.component.ts.
I'm very new to Angular. Is this even possible?
With the file in your assets, I am guessing you are declaring it on the window. You will need the include the script in your index.html, and then access it on the window within your component via window.data. This is not really the recommended way of doing this unless your use case dictates it. The module approach you mentioned is preferred.
Next to your app.component.ts, create a file called data.ts, with:
export let data: string = 'data';
In your app.component.ts, import it using:
import { data } from './data.ts';
If you plan to not mutate that data, consider using the const keyword instead (in data.ts).
Directory structure
/app.component.ts
/data.ts
/...
Edit: Show Global Approach
You will need to include your script outside of the context of the Angular application. If you bootstrapped your application using the Angular CLI, you can add a reference to it in the cli configuration file. See this documentation on the topic.
That file will be included and will be available for access within your component on the window. The tricky part comes with typing and the Window. And example may look like this.
class AppComponent extends Component {
private data: string;
constructor() {
// Explicitly cast window as an any type. Would be better to type this, but this should work for you.
this.data = (<any>window).data;
}
}
(referrring to https://stackoverflow.com/a/42682160)
first you have to include the script into your src/index.html like
< script src="/assets/js/data.js">< /script>
important is that the above statement is placed before your angular root component tags
(< root-component>< /root-component> or < ion-app>< /ion-app> or something like that)
then you can simply write (for example inside app.component.ts ngOnInit function)
let varFromJsFile = window["data"] // varFromJsFile = 'test'
You want the variable to be a member of a Component class, not just a variable declared anywhere within a module.
If this doesn't make sense right away, you need to look more carefully at some basic Angular code samples.
Also, as long as you're using Angular and therefore TypeScript, it's better the declare variables using let or const.

In a Node app with express JS, how can I include and run a separate JS file?

I have a javascript file that contains some functions that grab an RSS feed and save the contents in a database. I originally had it being called by the HTML page, but I want this file to instead be running in the back-end all the time (grabbing updates from the RSS feed and saving it to a database).
My question is, how can I attach and run this separate javascript within my app? I assume it will look like this:
In app.js:
var RSSReader = require('./public/javascripts/RSSReader.js');
RSSReader.SomeFunction();
This isn't working though. Also, would variables declared in my app.js be available in RSSReader.js?
Thanks.
how can I attach and run this separate javascript within my app?
The app.js code you show should work just fine. The key is that you have to make your RSSReader.js file into a module that exports the functions it wants to be public:
So, inside of RSSReader.js, you would have something like this:
module.exports = {
someFunction: function() {
// code here
},
someOtherFunction: function() {
// code here
}
};
Then, in your other file, you can load that module and use it like you had:
var RSSReader = require('./public/javascripts/RSSReader.js');
RSSReader.someFunction();
RssReader.someOtherFunction();
node.js documentation for modules is here.
Also, would variables declared in my app.js be available in
RSSReader.js?
No, they would not unless you explicitly declared the app.js variables as properties on the global object. The usual node.js convention for sharing from app.js to another module is that you create an initializer method for the RSSReader.js module (you can call it init) and you pass it any context it needs (usually an object with some properties on it) from app.js and the RSSReader.js module can then store that context for its use.
So, if you want to share some variables from app.js to RSSReader.js, you could share them via a .init() method like this:
RSSReader.js
var data;
module.exports = {
init: function(options) {
data = options;
},
someFunction: function() {
// code here can access the data variable
},
someOtherFunction: function() {
// code here can access the data variable
}
};
app.js
var RSSReader = require('./public/javascripts/RSSReader.js');
RSSReader.init({express: express, db: db});
RSSReader.someFunction();
RssReader.someOtherFunction();

variables with requieJS

My call to requireJS in on my index page, what I want to know is it possible for me to get a variable out of a function that is on my index page and use it as a condition in my main.js file? I am trying to have a script be used based on a variable on my index page.
If you want your wariable to be accesible on both index and main pages, then create separate requireJS module, put yuor variable in there and reference this module wherever you need it.
So, assuming that you already have two modules: index.js and main.js, you can create third module, let's call it "myVariables.js". Create that file and inside put something like this:
define(function() {
var vm = {
myGlobalVariable = "Hello"
};
return vm;
});
Then in your other modules you can reference to this module, for example like this:
var myVariabledModule = require('myVariables');
alert(myVariablesModule.myGlobalVariable);
This should give you and allert with the "Hello" string and this code should work in any module of your application.

Categories