I've just started developing a completely new site using ASP.NET MVC3 framework and #razor.
I would like to use in the client side the angular JS framework, but the use of both is a bit confusing.
How do I loop an array?
In ASP.NET MVC I'll write the following HTML:
<ul>
#foreach (var item in this.Model)
{
<li>
#item.Name
</li>
}
</ul>
In Angular I would write the following HTML:
<ul>
<li ng-repeat="item in list">
{{item.name}}
</li>
</ul>
Which of the two is the most correct way to do that?
There is literally no difference between the two as far as the end result is concerned and you can, if you so desire, use either or both. The difference is in what procedure the code is generated.
In MVC, the final HTML is generated on the server side using data made available on the server side. You create and populate the data in the model on the server, use the MVC to format the data into a structured html code segment, and then the final html is sent back in the response to the client browser.
In AngularJs, an html template is passed back to the client web browser as well as logic for obtaining the data that will be used in partnership with the template. Usually the data is retrieved via AJAX from a web service or api of some sort. Then the JavaScript engine in that browser, using the AngularJs framework, will take that template, retrieve the data and reformat it into a web page on the client end of things.
They literally both provide the same end result. It's generally just a choice between how and where you want the data formatting to occur. With most devs I have talked to who are combining MVC and AngularJs, a list is a good example of something that is usually passed off to AngularJs to handle client-side, reserving MVC only for that functionality that AngularJs isn't as well suited for, like security.
Related
I know that the webpage that is opened by the user is part of the view. This one is easy, but what about js code calling the server to retrieve data via ajax? Is this part of the controller or still the view?
Can the view request data like this?
Thank you very much for any help.
Javascript, including Ajax, is a client-side technology. Therefore, in the context of MVC, any js script must be part of a template file.
Note that a template file is not the view (the V in MVC), but a part of it. The view should incorporate both server-side components (classes, interfaces, etc) and client-side components (html, js, css, images, etc). For example, an instance of a view class could read some data from the domain model and then load and render a certain template file, injecting the fetched data into it (formatted), in order to be printed on the screen.
So, an ajax object should be defined in a template file. Its request to the server is handled either by the controller, or by the server-side components of the view, depending on the MVC approach that you are choosing to implement. Though, the server response should always be created by the server-side components of the view.
I am a complete newbie to AngularJS. I want to check the feasibility of using it in my new Project which is a web application. I already have a few pages created in project using Struts2 Spring and hibernate. To convert these following are points I understand:
Convert server side API to REST style which returns JSON data
Question: Can I use dynamic HTML to load using AngularJS. I guess yes. not sure how?
Currently I use velocity Templates on server side to populate data in HTML templates and send it as response in AJAX? What would change if i try to use AngularJS?
I have a landing page which is used to show some images and data associated with it which is stored in DB. How can I show it using AngularJS?
Question: Shall I load the HTML template which contains only one div tag when I hit website URL(mysite.com) and then fire AJAX requests to load the dynamic HTML?
If I use AndularJS does it invalidate use of Struts2 altogether if I choose to implement my Data API as REST with JSON? I guess not as I will still need to load dynamic HTML views which will be generated on Server correct?
How to maintain HTTP session state on server side if I use REST data API with AngularJS on client?
I know I can search and read about answers to above questions on net somewhere. I just need them at one place so that I can carry discussion and other questions that arise from it.
I may answer some of your questions:
1) Convert server side API to REST style which returns JSON data
Yes
Question : Can I use dynamic HTML to load using AngularJS. I guess
yes. not sure how?
Currently I use velocity Templates on server side to populate data in HTML templates and send it as response in AJAX? What would change
if i try to use AngularJS?
If I understood you right, you want to generate templates on server-side. In this case - you just don't need AngularJs - your views are prepopulated on server and browser recieves static content (from client-side point of view). If you want to use AngularJs, then your templates will become static content (from server-side point of view) and they will be populated by angular via REST services.
2) I have a landing page which is used to show some images and data
associated with it which is stored in DB. How can I show it using
AngularJS?
Question : Shall I load the HTML template which contains
only one div tag when I hit website URL(mysite.com) and then fire AJAX
requests to load the dynamic HTML?
Not exactly. One div would be enough for jQuery-based approuch (you would use something like $.ajax and then appended data in imperative way). In case of Angular you will need to return template. It may look like this:
<ul ng-controller="MyCtrl">
<li ng-repeat="item in data">
<img ng-src="item.image.src">
<span>{{item.data.someTextProperty}}</span>
</li>
</ul>
And some AngularJs controller that will fire request to REST service (via your AngularJs service, probably) and autmatically fill template with results
function MyCtrl($scope, $http) {
$http.get('/rest/data').success(function(result) {
$scope.data = result;
});
}
3) If I use AndularJS does it invalidate use of Struts2 altogether if
I choose to implement my Data API as REST with JSON? I guess not as I
will still need to load dynamic HTML views which will be generated on
Server correct?
I think it will only invalidate use of View of MVC in Struts, since AngularJS will just replace it. Also it will make you to use something like RESTful controllers (not quite familliar with Struts, but I think there is something like this)
4) How to maintain HTTP session state on server side if I use REST
data API with AngularJS on client?
This is not short answer, but basically there is following pattern. AngualrJs provides http interceptors, that may intercept requests and responses. If response with code 401 (which is unauthorized) is intercepted, you may provide your user with a login form to restore session and after this action will be completed, retry last request. Also, here you may find another aspect of this question.
I hope my answer helped you.
Is it possible to render body with ajax in asp .net mvc project with layout?
Yes, it is possible, but it doesn't make any sense as it will result in a completely broken and invalid markup. You will end up with a 2 headed and 2 body beast like Quazimodo. Actions that are requested view AJAX normally should return only partial views, not full views with layout. Or if you if you belong to some bandwidth saving party you could have your actions return JSON and then use a client side templating framework in order to lay out the markup.
RenderBody is used on page postbacks to render a new HTML document with data from the server that has been annotated with the Razor templating engine. AJAX is used to retrieve data from the server asychronously (in a JSON format typically). An AJAX request can be used to retrieve the same data that RenderBody() would, but it wouldn't make much sense and isn't best practice.
I am starting a new web app as a hobby and had a difficulty with the architecture.
The frond end will be HTML and some JavaScript for requests.
And the backend ,will be implemented in Java and using Spring Framework.
Lets say for example a library page where the user can view his books and his personal information.
Personal Info
-------------
Book 1
Book 2
Book 3
I want to implement this features with 2 REST services ,one for the personal information ,and another for the books that the person has.
Ex .
www.mybib.org/users/123/
www.mybib.org/users/123/books/
The thing is ,when a user first request the home page to view his books and his personal information ,how to compose this page.
Use a servlet / controller who replicate the code of the 2 REST
services and then redirect to a JSP to format a HTML and JavaScript.
Once the first load is done, for each update on the page use the Rest
services .I think this is actually very bad design.
From a servler / controller call the REST services and then call JSP
in order to compose a HTML and JavaScript output.Then for each update
call the REST services.
From a servlet / controller return a HTML layout and make the
javascript make 2 Ajax request when loading the page.
...or something else.
As you can see I am pretty new to this and in fact this is actually my first attemp to biuld a very simple web application.
The easiest way is to simply have some kind of IndexController which after, fetching the current users list of books renders the page right away, no extra AJAXy REST calls needed.
If you are new to all of this, that's how I would start out. You may also want to have a look at the code in the Spring 'petclinic' sample application: https://src.springframework.org/svn/spring-samples/petclinic
If you must use Ajax, I'd still have a IndexController and an index.jsp that renders the initial page. After that you javascript code can make the REST calls, for which you implement a different controller.
is it possible to contruct and use a WML page instead of a normal html page to render my views that contain a form?
i could not find any examples on how to achieve this and i could not even find the "form" tag in WML. Instead, from my understanding WML, uses cards with input tags to process a form of some sort but in Spring mvc's SimpleFormController it is used in conjunction to a html form not a WML input card.
Spring MVC's controller infrastructure doesn't care if the page is rendered in HTML or WML. Both HTML forms and WML cards end up generating HTTP requests when submitted, and the controller can't tell the difference.
However, Spring only provides an HTML form tag library, so if you want to generate WML, you'll have to do it all yourself.
Is this really something you want to get into, though? WML is obsolete, and only very old phones need it.