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.
Related
I am learning MEAN Stack. I started from learning Angular(from angular.io) now I am learning node.js and express.js
My question is, if there is angular for front end in MEAN Stack then why there are views and template engines in express.js at back-end? Are they alternative for each other or complements each other? what is the boundary for the role and responsibility of these two?
I am looking forward for someone's help in clarifying of my concept for role these two technologies(express' views and angular) used in mean stack.
In order to answer your question, let me explain what is angular and what are template engines in express?
What is Angular?
Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop.
what is template engine?
A template engine enables you to use static template files in your application. At runtime, the template engine replaces variables in a template file with actual values and transforms the template into an HTML file sent to the client. This approach makes it easier to design an HTML page.
Some popular template engines that work with Express are Pug, Mustache, and EJS. The Express application generator uses Jade as its default, but it also supports several others.
So,
Angular is a framework with a templating component baked in. You use it to create Single page Web Applications which means that DOM modification is happening on the client side and the app exchange with server only data. If your concern is template it is plain HTML.
Whereas, template engines' rendered views are sent to client each time by server whenever request is made each time a new page is rendered on server and sent to the client which is Great for static sites but not for rich site interactions.
If there is angular for front-end in MEAN Stack then why there are views and template engines in express.js at back-end?
This is because not every time generating views from angular is recommended sometimes it is better to use Template Engines to generate views and send the rendered page to a client, generating views at client side has its own pros and cons and generating views at server side has its own.
Generating views using template engines (i.e. at server-side):
pros:
Search engines can crawl the site for better SEO.
The initial page load is faster.
Great for static sites.
cons:
Frequent server requests.
An overall slow page rendering.
Full page reloads.
Non-rich site interactions.
Generating views using angular engines (i.e. at client-side):
pros:
Rich site interactions
Fast website rendering after the initial load.
Great for web applications.
Robust selection of JavaScript libraries.
cons:
Low SEO if not implemented correctly.
The initial load might require more time.
In most cases, requires an external library.
So, after knowing the pros and cons, you yourself can better decide that in particular case which one is better for you. Mean Stack has provided options for developers.
As far as your question regarding the role of these two technologies is concerned, Angular is a lot more view generator only, It has features like routing, it as services two-way data binding etc while the template engines are meant to render HTML so that it can be sent to the client.
I hope you will find this answer useful.
References:
what is the template engine?
what is angular?
pros/cons
Angular is a full-fledged front-end framework that comes with its own way of doing templating, using angular-specific markup in your HTML. If you use Angular as your framework, you're more or less stuck with their way of templating within the Angular portion of your application.
Angular Features
It is a framework written in Javascript language
Manages state of models
Integrates with other UI tools
Manipulates DOM
Allows writing custom HTML codes
It is meant for javascript developers to create dynamic web pages in a quick time
NodeJS
It serves the web
It is runtime built on javascript engine in google chrome
It can be considered as a lightweight server which can serve client requests in a more
simpler way than java does
It performs communication operation with databases, web-sockets,
middleware etc.
Why we use angular for Tempting not Express/Node tempting Engine
Server-side rendering is the most common method for displaying information onto the screen. It works by converting HTML files in the server into usable information for the browser.
Whenever you visit a website, your browser makes a request to the server that contains the contents of the website. The request usually only takes a few milliseconds, but that ultimately depends on a multitude of factors:
Your internet speed
how many users are trying to access the site and
how optimized the website is, to name a few
Once the request is done processing, your browser gets back the fully rendered HTML and displays it on the screen. If you then decide to visit a different page on the website, your browser will once again make another request for the new information. This will occur each and every time you visit a page that your browser does not have a cached version of.
It doesn’t matter if the new page only has a few items that are different than the current page, the browser will ask for the entire new page and will re-render everything from the ground up.
How client-side rendering works
When developers talk about client-side rendering, they’re talking about rendering content in the browser using JavaScript. So instead of getting all of the content from the HTML document itself, you are getting a bare-bones HTML document with a JavaScript file that will render the rest of the site using the browser.
This is a relatively new approach to rendering websites, and it didn't really become popular until JavaScript libraries started incorporating it into their style of development.
See Examples HerePratical Example
Basically template engines in Express are mostly used for displaying 404 and other server error messages. I find them ideal for such use cases. Using template engines for complex front end rendering is bad and not a good practice.
Express JS is a web framework on top of nodejs http module. Whereas Angular JS is a front end framework which doesnot depend on NodeJs server to run. Conceptually both are similar in few features like routing whereas implementation is different
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.
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.
may be it is not a worthy question but i am new at angular js that is why going to ask this !
I have a small portal which has forms develop in jsp. Now my requirement is to display data from db on page by not moving to next page using Angular JS. Can i do this easily using jsp? or I should use c#? But transferring from jsp to c# will be quite daunting task! I shall be very great full if someone suggest a way using jsp.
Kind Regards.
If you can return/echo json files from JSP and you can consume requests (get,post,update delete) coming to it and redirect it to whatever handles the business logic (e.g controllers) then you are set to go. I believe with JSP you mean JSP + Java Servlets + Java Beans. Or in other words controllers better be Java classes. If that is your case, then you definitely can do that without converting to C# + ASP.NET ;)
Update:
The fact that you are only using JSP is good for starters but as you get better and want the application to scale more you need to move talking with the database in a Java class/servlet. JSP should be used only for presentation/templating and no business logic (if/else this that). Now you are consuming your request names from the form like username password etc.. With angularJS will be the same. The main difference is that angular will submit the form with ajax so no page redirection will happen (there are many questions in stackoverflow how to stop a form from submitting). Then the JSP will have to return/print some json and this will be returned to angularjs for rendering that in your page.In other words there will be no html in your JSP. All the templating will happen in the client side (Javascript/AngularJS)
Links:
Introduction to Angular.js in 50 Examples (part 1) https://www.youtube.com/watch?v=TRrL5j3MIvo
Introduction to Angular.js in 50 Examples (part 2) https://www.youtube.com/watch?v=6J08m1H2BME
Free Interactive AngularJS learning for Beginners https://www.codeschool.com/courses/shaping-up-with-angular-js
Head First Java Servlets and JSP Book ( http://www.headfirstlabs.com/books/hfsvlt/ )
Introduction to MVC with Java Servlets and JSP (http://blog.oscarscode.com/java/introduction-to-mvc-with-servlets-and-jsp/)
How to send JSON from JSP to Javascript: https://code.google.com/p/json-simple/wiki/JSPAndAJAXExamples
How to submit JSON form data to Server-side using AngularJS/ajax:
http://scotch.io/tutorials/javascript/submitting-ajax-forms-the-angularjs-way#submit-the-form-with-angular
Angular+ Java Restful services (http://draptik.github.io/blog/2013/07/13/angularjs-example-using-a-java-restful-web-service/)
Java + AngularJS Tutorial Part 1 (http://www.radcortez.com/java-ee-7-with-angular-js-part-1/)
Java + AngularJS Tutorial Part 2 (http://www.radcortez.com/java-ee-7-with-angular-js-crud-rest-validations-part-2/)
For Jquery Thinkers - Thinking in AngularJS If I have a Jquery Bcakground
"Thinking in AngularJS" if I have a jQuery background?
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