AngularJS inside JSP page - angularjs

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.

Related

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

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

Full SPA Application with AngularJS

I was thinking in doing a full SPA application with AngularJS that would download all the views code on the initial request and then just communicate with the server through AJAX requests.
The big advantage is that it would look like the application is running locally.
The disadvantage is that maybe on the initial request the application would take maybe 2 minutes to load because it would make about 40 page requests to the server.
Isn't there a way to download all the application views in a single request like using some kind of ASP.Net MVC bundles?
I did something similar. I'm using Asp.net MVC & WebApi with AngularJS.
My first request is to an MVC Action -> It returns a kind of master page(including bundles).
When the page gets down to the client, AngularJS kicks in and gets in charge.
Now my template views are also rendered via the Razor view engine(since I needed a special in house engine to locate my relevat templates) - I can use bundles and other .net stuff inside instead of fetching plain html.
Now using templates this way can be BAD.
I put red lines about what I want the Razor view engine to do in the process. It's easy to misuse AngularJS when you use Razor views\templates in your project.
you could use the $templateCache service to download multiple views at once. In the run phase you define them all (of some of them).
var myApp = angular.module('myApp', []);
myApp.run(function($templateCache) {
$templateCache.put('template1.html', 'This is the content of the template 1');
$templateCache.put('template2.html', 'This is the content of the template 2');
$templateCache.put('template3.html', 'This is the content of the template 3');
});

What is the recommended approach when using AngularJS with SharePoint WebParts

We have started using AngularJS within some SharePoint WebParts. So far, this has been working really well, however, we noticed that when we started placing more than one AngularJS WebPart onto a WebPart page, only the first WebPart on the page was bootstrapped by AngularJS. The second, or third, one simply didn't function. This is because we set up each WebPart as it's own Module/App in AngularJS. We were able to get around this using a technique described here:
Multiple apps and controllers in the same file
Is this a best practice for using AngularJS within SharePoint WebParts, or is there a better approach?
Steps:
1) Upload the angular JS files at top site collection level.
2) Refer angular JS files in master page.
3) Create a module in master page and refer the same in all the pages(Create separate controllers for each page).
4) Create a html page which has all the display which you want for the web part using angular JS.
5) Add a content editor web part on the page and refer that html page.

Angularjs with JSP

I am developing a new webapp in which we are primarily using JSP to generate static UI components. The Angular routing is bound to JSP instead of html templates.
A quick search in Google always discourages using Angular with server side MVCs, but I havent been able to find a convincing reason enough on why we should not do it. Can someone explain , what is the issue with using server side MVC with client side MVC.
Why should you repeat a task in server and client side? like maintaining the state of the application..
I could thing of a case where jsp(any template engine) with angular will be helpful,
where you want to localize your text intensive application.
You can localize angular templates in the server side, let it take a page refresh.

Is there a relationship between the Singel Page Application of asp.net-mvc4, and SPA of AngularJs?

Is one application can use the Singel Page Application method of ASP.NET-MVC4 on server side and SPA of AngularJs on client side?
The ASP.NET MVC4 Single Page Application template in Visual Studio comes with Knockout and not Angular. You could of course rip out Knockout and use Angular instead, but then there's not much value in using the Single Page Application template.
If you want to use Angular, I would use the AngularStart template instead: http://visualstudiogallery.msdn.microsoft.com/cc6c9c5f-2846-4822-899f-a6c295cd4f2b

Resources