FrontController implementation for JSP pages - front-controller

I am developing a simple website with few JSP pages. Each jsp does have a dynamic data that needs be read from XML before they redered on to the browser. Though MVC pattern such as Struts2 is more appropriate here, I don't want to implement it for a simple web application.
For this purpose I just want to implement FrontController Pattern which is sufficient for managing the jsp pages with few Helper Classes.
What I want is to have a Centralized Controller for all JSP pages. if user try to acccess any jsp page, then it should first go to the Controller. So I tried to implement a servlet with URL pattern "/pages/*.jsp" where /pages contains all jsp pages in webcontent.
The problem is, the controller is being invoked each time when there is a call for .jsp file, but when I try to disatch it to the jsp page(ex /pages/homepage.jsp) it goes into indefinite loop. It is obvious that each jsp page call will always comes to controler again.
So is there any other way that we can implement the centralized controller for this situation.
Thanks in advance.

I guess your only problem is that you need to read a XML file before each and request is processed.
If this is only the case than Filters are best suited.
But in case there are more that needs to be done and you really need a centralized control on all request than you can do anyone of the following: -
Struts (it doesn't matter that your
project is small or big, but using a
predefined and proven pattern is
always useful).
In your Controller put a mapping of
logical URL's with Physical URL's
and now put your mapping to Logical
URL's and not the physical URL's.

Related

AngularJS with JSP

I am new to AngularJS.I have two questions.
Is it possible to use JSP pages instead of HTML in AngularJS.
Is it possible to create a web application using AngularJS without webservices (for fetching data from DB) and use HTTP servlet for that purpose
Is it possible to use JSP pages instead of HTML in AngularJS.
Even if you use JSP the final output will be HTML so you can use JSP in AngularJS but JSP files are mainly used to render the frontend with data that you can do using HTML only in AngularJS.
Is it possible to create a web application using AngularJS without web services (for fetching data from DB) and use HTTP servlet for that purpose
Whether you use plain Servlet or any framework that creates REST APIs, it will be HTTP calls only.
(This is a newbie question which applies equally to all front-end MVVM frameworks. I'll answer it for the general good.)
AngularJS is a front-end framework which runs in the browser. It relies on a server delivering the content (HTML templates, CSS and JS sources) to the browser.
What you use as a server, is entirely up to you. It depends on whether you need server-side dynamic content.
If none is required in that area, you can use a static HTTP server like LightHTTP, or plain old apache, or nginx, or anything else to deliver the AngularJS site to the browser.
But in most you will have some server interaction (i.e. storing / querying stuff in a database, or communication / synchronization with other users, etc). The common approach for that is to deliver HTML/CSS/JS statically and add a bunch of REST interfaces. Flask and Tornado are popular server choices for that, or stuff like spray.IO / akka.http for higher traffic volumes.
In specific cases, you may want to work with pre-rendered HTML templates (usually because you want to dynamically exclude parts of pages for security/user role reasons). Then you need a server-side framework with template rendering. Django, JSP, ASP, pick your favourite.
It seems like you are asking how to use AngularJs in a JavaEE application. And yes it is possible. Only your index.jsp will be in jsp, and all you other views will be in html.
You can then use http requests to fetch data through your servlets.
it can be useful. here are scenarios:
you want to save ram, cpu for mobile phones or machines that doesn't have lots of power. you can partially render page in jsp and keep only minimal in angular.
your team is traditionally jsp heavy and you want to use them and gradually transfer to angular. eg... for i18n rendering jsp seems far better. note that i18n may not add lots of values in angular and you may not want to throw up existing code in jsp.
I have been noticing strong views in stackoverflow and they seem to dismiss everything that doesn't fit in their utopian all new cutting edge. all the angular projects I worked had heavy dose of legacy pages using jsp and it doesn't make sense to rewrite everything from scratch or lay off whole team and start hiring from scratch. and thus, yes, jsp makes sense with angular.

Recommended nginx setup for AngularJS as front end and Symfony2 as back end

I want to use Symfony2 as back end to create a REST API and use AngularJS as front end. The 2 are completely separated ie Symfony 2 will not render anything, it'll just send json data to AngularJS.
I'm not sure on how to configure my web server (nginx).
The Symfony documentation gives the configuration but it's intended for a site that only uses Symfony, and so everything outside of the /web/ folder is not accessible.
I can see several possibilities:
Create 2 different directories (eg /path/frontend and /path/backend) and a corresponding website for both. I would then have 2 different addresses to access the front end and the back end (eg http://myfrontend.com and http://mybackend.com). The problem I see is that I probably won't be able to directly use AJAX calls in AngularJS.
Create 2 different directories (eg /website/frontend and /website/backend) and only one website. I would then probably need to access the front end and back end with something like http://example.com/frontend and http://example.com/backend. I'm not sure how to configure the web server though (issue with root /website/backend/web).
Put the AngularJS directory inside the web folder of Symfony, but then I'd need to also change the configuration so that nginx doesn't only server app.php, app_dev.php and config.php.
Put the AngularJS directory in the src folder of Symfony, and have Symfony handle the routing. I don't know if it will mess with AngularJS' one routing. Also I will probably have a few other php that should be accessible, so I'd need to route them through Symfony also.
What would you suggest and why? Maybe I'm missing something obivous?
I guess you could accomplish your task using any of those methods. It would come down to how you want to structure you application and what it's objectives are. For large scale projects the first method (having the API separate from the AngularJS) would serve you well. Twitter really made that software model big.
So I would suggest going with method one. All you would have to do is specify an Nginx header in your server block that allows cross domain access to another domain. So you would specify the following directive in your frontendangular.com site:
add_header Access-Control-Allow-Origin backendsymfony.com;
This way every time a page request comes in on your front end app Nginx tells the browser that it is safe to access another domain (your symfony setup).
These are 2 frameworks that both have powerful routing capabilities, and it looks like you are going for a best of both worlds. There are many pros and cons to any setup, so I'll list a few that come to mind:
Angular routing / templating is great but it will leave you with SEO and meta issues to solve . It's probably better to manage your major pages with symfony2 and any routing within each page with angular. This would allow you to still make dynamic pages w/out compromising your meta and SEO control. Access Control seems flexible but probably not necessary, I would just put all calls to REST API under http://www.thesite.com/api and if I need another setup something like https://api.thesite.com, nginx can route or proxypass this without leaving the domain.
Locating partials gets a little wonky but that's probably fine for a large application. Just note that you will probably need to search the js location object for [host] / [path] /web/bundles/someBundle/public/blah.... Or you can setup a '/partials' path in nginx.
Twig and Angular tpl may end up a confusing mix as they both use {{foo}}. This alone would make me reconsider mixing the 2, and I might look to go with a frontend server, like node with ejs where I could also benefit from the streaming transfer of the data sent from the API.
You can get around it easy enough with but it's still concerning:
angular.module('myApp', []).config(function($interpolateProvider){
$interpolateProvider.startSymbol('[[').endSymbol(']]');
}
);
You do get the benefit of angular partials as symfony twig, which can be good or bad depending on how you see the flexibility being used. I have seen guys making examples of forms that fill out values with symfony data, but they are just undermining the power of angulars binding.
Don't get me wrong, I actually do really like the idea of the two harmonizing.
Just food for thought - cheers

ANGULAR JS - Share data between pages - undefined

I'm currently trying to build an analytics application using Javascript and angularJs.
However I'm having a few problems.
I just have two simple pages and one controller in each one. I tried to share data between these pages using a simple service. The first page is in charge of analyzing multiple csv files and building javascript objects, and the second to iterate through this data to display charts and tables.
However when I'm moving from the "anaylzer" page to the "displayer" page and since the JS files are refresehed, everything is flushed adn I loose the data I recorded inside my service...
I already have a look to a few storing modules like http://www.jstorage.info/, but the data objects I'm building are big (csv files are about 100 000 lines each...)
Do you have any idea ? Maybe I'm not using the right angular JS philosophy ?
Do not hesitate to tell me to put the piece of code I've written.
Thank you a lot in advance,
Angular is primarily tailored for producing single-page applications, but you could look into following alternatives for sharing data among few tabs (pages):
Local Storage - http://diveintohtml5.info/storage.html
File System API - http://www.html5rocks.com/en/tutorials/file/filesystem/
I have been using 1) with great success, but it's designed for storing small amounts of data.
angular is for single page application.
you should use ajax to pull your data from server.
Don't refresh your page.
there is a example how angular change view.
checkout https://docs.angularjs.org/api/ngRoute/service/$route

Using Angular with Play: Role for Scala Templates?

When I first looked at Play and went through all the samples, I was pretty excited by the zentasks sample and the fluid, clean, effortless Javascript routing that left the work of rendering things to Play. But we decided instead to go with Angular.
Upon going down that road, I thought that Angular would control all aspects of rendering.
However, we have a page that has to get a socket. We were having the socket made on the server, so for now, we still have a Play (Scala) template doing that. We have pared it down to pretty much nothing: create the socket and then inject it into the Angular context.
But we are also trying to do Protractor tests and that is made uglier by having to figure out how to accommodate the Scala template.
Question: should we just ditch the scala template and have the Angular controller call the server and get the socket? That was my favored approach to begin with.
I'm currently working on two Play apps with Angular and in both we decided to have one single main.scala.html file that load all the necessary controllers,services,directives, etc from angular using of require.js.
The goal with Angular is to create a single page app and therefore you should avoid to mix it with server side templates.
You must see your main.scala.html template as the entry point of your single page application. There you generate and load all the pieces you need and give the hand to angular to manage the rest.
I agree with Renato. It's probably better to have a single controller and template that sets up the single page app with angular. Then use AJAX to send requests from the browser to other controllers (see http://www.playframework.com/documentation/2.2.x/JavaJsonRequests).
If want to to avoid Scala templates completely, you can put your web pages and javascript in the public directory and only use AJAX.

How to do good custom routing with CakePHP?

I am planning to rewrite my site into CakePHP and after having spent a full week on learning it, I am still not sure how to do good custom routing in CakePHP.
This is what I want:
Keep the current url structure in www.domain.tld/en/dragons.html, or use a www.domain.tld/en/dragons, but not www.domain.tld/en/nodes/dragons.html. And also be able to use controllers on a similar path structure.
There are about 100 static pages on the entire site. I have read into multi-language routing and I think I can do it. I can also make /en/* or /en/:slug route via a PagesControler or a self-written NodesController.
My problem is that I would like to be able to mix and match url's with and without controllers, so actually what I want is that it checks if a :slug is part of the slug-list, there should still be the option to use that url with a controller.
I have created routes for both /en/contact and /en/:slugid, but it seems all queries were routed to my NodesController, even while I explicitly said that /en/contact should be routed to the ContactsController.
How can I instruct Cakephp to keep my current dictorary structure? I read the routes part of the Cakephp book, but it was extremely short and made me a little unsure about the possibility of such routing. If necessary, I'll just write a php-code that prints all routes for all slugs, so I can still write controller-routes with a similar path structure.
If a file exists in webroot (ie. app/webroot/static.html), the .htaccess file will tell Apache to serve that file before loading the CakePHP framework for requests to www.example.com/static.html.
Cake loads routes in a top-down order and will use the first matching route to handle a request. In your case, /en/contact should be above /en/:slugid, else the slugid rule will always win.
If CakePHP's routing does not accomplish what you are after, you can always implement a custom route class (book / example).

Resources