load an angular app into a webpage and pass in server variables - angularjs

I have a standalone Angular JS Application that displays a table of data. I want to load thisapp on request in multiple places in my existing non AngularJS web site. All the angular app needs to initialise is a userguid that I have in the page when I need to load the app, my problem is how to pass this into the angular app at load.
I have tried using "bootstrap(document, ['myApp'])" but cannot se a way to pass the variable in, ideally I could do this bootstrap(document, ['myApp'], variablehere);
I can make the app load by adding the userguid variable to window and receiving it from there but this seems horrible and tied to the app.
Any help appreciated
Thanks

Related

Passing data between two Angular apps

What I'm currently trying to do is to have an Angular 7 application nested inside an Angular 1.x one. I've created it inside my main AngularJs app, served it using express and opened it via a link in my main application.
Unfortunately, I don't get session data in this nested app, so every call to my API fails, do you know any way I can pass this kind of information between two Angular apps? Is this a viable solution?

Rendering Just one module/state of Angular app

I've angular app with lots of states and modules etc. Now, I want to send a link to the user. When user'll hit this url, I want to redirect him to a new tab rendering only that particular state (specified in URL) i-e I don't want anything else to be visible to the user. Or you can say, I want to open a popup window rendering that particular state's html in popup window . This is the approach that comes to my mind to sort it out.
Ps. There are Rest APIs at the backend which I am calling through angular resource service to bind data with the model of the views
Option
I've rest APIs on backend, So, I was thinking to developing s separate Nodejs application, And I will send nodejs application url to the user and in the default/home route I'll call backend API and, the returned resultset will be rendered in html file within nodeJs application and this way, I'll render the corresponding data to user's browser window.
This is the flow for that
I don't know if that is right or clever approach. Please suggest me what will be the best approach to sort it out.
Thanks in advance.
This is what my app looks like
Everything in the left side-nav is a module and clicking on this I am routing to a different state. I am using angular-material and lots of other dependencies in this project.
And this is what I want.
I'll refer a link to the user for example www.myapp.com/specificpage.html. And hitting this url, a new tab/popup will be opened rendering state defined in the same app but with some non-editable url. And it should like.
There are multiple ways to achieve this and each approach has advantage and disadvantage. You have to choose depending on requirement and architecture. Details are below-
Create a separate app - You can do it through separate code base or use the module based build process and include this module only for new app.
Divide application is two part, public pages and private pages - Include this page and required APIs for this page in the public modules for your app.
Send token in the link - If you want to make secure page, send short lived token in the eMail and validate token on the server before displaying page to the user.

AngularJS inside JSP page

I'm working on a project where all may work is jsp pages can i add AngularJS inside these pages , i'm also new to Angular
I work on a web project, which renders a lot of graphs and animation charts to end users. We have been using the AngularJS in the jsp for some time and this works fine for us. With jsp, one can easily determine the request context (for e.g the request context URI for another link) on the webpage. With AngularJS, we develop the json returning services on server side and process the data via angularJS directives.

How can i add multi web part which used angularjs module?

How can i add multi web part sharepoint which used angularjs module?
I have web part in which i have used angular the problem is when i want to add this web part for several times in a page i don't know how to separate angular modules name? when there is only one web part added in the page it works properly but when there are more than one problem start
i guess i should create dynamic names for modules in server side am i right? is there any other way?
I used angular.bootstrap.
This resource helped me to figure out how to load different angularjs html+js files in 2 different content editor webparts. I also made sure to load angularjs only once on the page.

AngularJS + RequireJS + Auth without relying on the routing

Is there a blog, project, gists or seed out there using angularjs and requirejs that provides authentication not based on routes? I'm working on building a site that will show the user the same rendered view, but different data fed from the server based upon their authentication. I have session handling already written into it, but I need angular to check the server for the session on the initial render for changing login buttons to logout and getting only the data the user wants to see that they've selected.
I attempted to use the angular run method to initially grab the session from the server, but when using requirejs, my app module doesn't exist at the time of calling the run method.
From my understanding, please correct me if I'm wrong, I should be creating an injector or using the $rootScope to carry the user information to routed controller and show the user what they is related to them. If so, then I need to have a service that is initially fired during the project instantiation to retrieve the user's session data. I'd prefer to not use the servers template rendering to put the users session data into javascript if possible.

Resources