Spring MVC with AngularJS for presentation (is REST necessary ?) - angularjs

I plan to use Spring MVC for a JEE application and i'm still debating whether to use AngularJS or PrimeFaces for presentation. My question is :
I've done some research concerning AngularJS with Spring MVC and i have found pretty much everyone talking about using REST API in Spring to make the connection with AngularJS pages(?). Is that the only way to use these two technologies together ?

In order to make the spring controller/methods to be used as REST API, all you need to do is, annotate the controller with #RestController annotation.
Also in order to make the Java object to JSON and vice versa you can use Jackson API. Adding this snippet in your XML file and relevant dependency/jar in project will help you transfer data back and forth easily.
<mvc:annotation-driven>
<mvc:message-converters>
<bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter" />
</mvc:message-converters>
</mvc:annotation-driven>

No, not necessary. Your angular frontend will be expecting JSON data to render. As far as you can call your service be it any api and it (api) can return JSON it is good.
but rest is a preferred option for using angular as it is simpler to be configured.

Related

Asp.Net MVC and AngularJS in same View

I´d like to know if exists a better way to render a view like this:
For the first load I need bring data from Controller like usual but after apply a filter in same page I need to start use AngularJS and never more uses Razor.
Is there a way to do that ?
Thanks for all.
Yes. you can do that.
Basically, you'd need to add the line below in your view. After you do that, the json is going to be available to the DOM / javascript and angular can take it from there. Hope this help
var json = '#Html.Raw(Model.MyJsonStringForMyCoolAngularJsApp)';
There are multiple ways to implement ASP.Net MVC with AngularJs.
I personally like Mini SPA (Silos). You can watch Miguel A Castro's video here.
You can also download the source at his website.
What it does is when a request comes in, it goes to ASP.Net MVC Route first. Then, Angular Route takes over the rest. It is a very slick design.
FYI: I also use Angular.Net Helpers to generate strongly typed views.
You could use WebAPI project in visual studio to exchange data between frontend and backend. It would go stateless, so to secure the data, you could use a mechanism like JWT.
The frontend would exchange JSONS from/to the backend using REST apis.
Yes. You can make angular views and exchange data using $http.get(/controller/method/). You can also configure routing using ngRoute.

Web project with Angular in frontend and Symfony2 in Backend

I would like to have a web app with Angular in Frontend and Symfony in Backend. I separated this into 2 single projects and now I want to let them communicate via REST.
Now here's the point I'm struggling a little. First of all, is the project separation the right approach? Also, I'm confused with building a REST-Service with the ngResource-factory in Angular. Can someone explain this to me, how to create a simple GET-Request (no params etc and just how to use the factory. Dependencies aren't a problem)? The tutorial on AngularJS doesn't really help. Do I need to create a JSON-File as well?
By the way, I'm new to these 2 frameworks.
Thanks in advance!
Disclaimer: I'm the author of API Platform
Take a look at API Platform. It's a solution to create REST API using Symfony (full stack).
The official tutorial explains how to create a REST API in a first project then an Angular client (using Restangular) in another project.

When to use angular template and when symfony template

I'm newbie web developer and I wonder what better and if it is a good question at all
I can retrieve the information that I need from the server side and make the template with angular, and I can do it with symfony too. whats better? whats the difference? when to use what?
what about forms? should I do it with symfony features or just with angular?
Please look the following points
You should use Angularjs template system. otherwise, the powerful feature of Directives.
Angularjs is decoupled with serverside code.
Angularjs only expects data (as JSON) from service end..not any HTML.
So template should be angularjs way.
So every service response from symfony should be JSON.
Angularjs totally avoiding to add HTML containers (through ajax) into web
pages. So here you can not use symfony template.

I need to implement Asp.net Web API 2 and consume it by Sencha Ext JS

I want to implement a web-based API (using ASP.NET Web API 2) and consume it by the client Side library (Sencha Ext JS).
My application should include
A simple user registration form.
A login page for admin.
CRUD operations for users' submissions.
Notes:
I do not want to include any backend code (i.e C#) in the we application, I want to implement it using the HTML/Javascript only, that is Ext JS.
I want the Web API to be RESTful.
I want to protect admin pages.
I want to use the SQL Server to store users' submissions.
All of that requirements should be implemented using the ASP.net Web API 2 and Ext JS only.
So far, I did initial search and I got a lot of learning for either the ASP.net API 2 or the Ext JS. But I couldn't have a guide that help me to fulfill the above requirements or help me to have both technologies work together.
Pleas help me on either way.
Or generally, can you help me get started work in combining both: Asp.net Web API 2 and any client side that consumes it, such as Sencha Ext JS or any other client side. It is not necessarily to be Ext JS.
Thank you so much.
Thanks to StackOverflow.com
If it were me, I'd use the DirectAPI for asp.net https://github.com/elishnevsky/ext-direct-mvc
You create webapi controllers, just like you normally would. The only difference is the the controllers that need to be used by EXT should inherit from DirectController.
If you follow the directions on that page, you'll end up with a globally available proxy object that matches the name of the controller and the public methods hanging off of the controller become methods of that object.
That is, server side controller MyAwesomeController with method DoSomething() becomes MyAwesome.DoSomething.
If you attribute the method as [NamedArguements] you can create methods such as
DoSomething(int id, int foo)
and pass from javascript as DoSomething({id: 20, foo: 30});
Since it is still just a controller, you can attribute permissions and return json as you would in any other situation.
If you get stuck, use the debugger and spend the time to figure out what's really going on. This all works in 4.x and I've tried it in 5.x and it still works there as well. But I wouldn't jump into 5.x just yet as there are still several bugs that need to be worked out by the sencha team before it is ready for prime time.
ExtJs has a REST proxy for the data. So what you try to do should be possible. The proxy can be configured and be finetuned.
I used the JSON proxy. ExtJs has very powerful filter and sort capabilities, both server and client side. In my experience difficulties arose when filtering and sorting server side. There is only sparse documentation on how the parameters are passed and which configurations have what effects.
Since you also develop the REST api, you can adapt to those details. You just have to do some research.
Here is not the place to ask about guides. For Asp I cannot help you, I never touched it. If you use ExtJs, you are free to choose you backend. For ExtJs, the start is pretty straight forward :
get Sencha cmd and generate a skeleton app.
follow the tutorial
create one file per class definition.
the API docs are great. If you still lack something SO is great too.
what you have to find out by yourself is the exact way parameters are passed to the backend and how to format the response.

Can AngularJS work in Java EE MVC Architecture : JSP->Servlet->EJB3.1->Business Object->DAO

I have a quick question on considering AngularJS (current stable version - 1.3.9) for an upcoming application that we are building on an existing framework. The current framework has a Java EE MVC architecture and here are the current components mentioned in sequential order in which they get invoked:
View - JSPs: This layer gets as response Java Objects and we use jsp:useBean to access its properties and display on screen.
If any modifications are done on the page, it goes through a ControllerServlet i.e a Java file which has code to access the HttpRequest and HttpSession related information. The controller also does a lookup in JNDI to find the name of the bean to invoke based on the HttpRequest parameter name, e.g. PageId
Once the EJBBean lookup is returned, the controller invokes an EJB 3.1 "no-interview" view - These are Stateless Beans annotated with #Stateless
EJBBean classes then invoke BusinessObject classes, we call them "BO" which internally gets referenced by the DAO interface
A DAO implementation class is the one which is responsible for CRUD operations
Our Problems as of now:
The view is tightly coupled to Java Objects that are returned from DAOs and since the response is not converted to JSON, a lot of scriptlet code is used to display their value (I know scriplets are oldskool, but being a legacy solution there is no choice)
jQuery is used to manipulate the DOM before sending it to the controller layer
View is not the official record of whats happening on the screen, unlike AngularJS where I could easily understand
Developers write custom CSS for different browsers manually
Proposed Solution
View shall be designed for the new application using AngularJS
Take advantage of Bootstrap css classes which has readily available CSS which can be combined with AngularJS
Each request goes to ControllerServlet using $http service to ensure we use existing MVC architecture i.e routing every request through Controller
EJB Layer to be RESTFul to return data in JSON Format
Viewport specific css code for responsive web design - i.e same screen should render on multiple devices and platforms
Questions:
Is the proposed solution feasible? What are the downsides?
Is it a good practice to reference EJB Bean classes as RESTFul services?
Do we get access to all the Java EE objects / interfaces using AngularJS? For e.g. HttpRequest, HttpSession, etc.
Will it help in performing better by switching to this architecture?
Question from Management - Why not stick with jQuery! - Probably the hardest of all the questions to convince the management of Angular's benefits
Hope you guys can help throw some suggestions
i'm using spring 4.0.1 , hibernate 4.3.5 ,jackson 1.9.2 , I'm creating a RESTful webservice that returns a data in JSON format and angularjs in front-end which is loosely coupled with back-end.
concerning your questions;
the solution is feasible of course , until now there no downsides
except session management is tricky because Restful ws is stateless
.
it's provide a very elegant feature that you can access all your
functionality via any application web-client-side, desktop or
mobile.
angular app is fully isolated from back-end app you can maintain
requests and session in the server and respond with what you like in
json format to angular
same as 2
i hope it's helpful

Resources