I have a web api (writed with mvc pattern)in which i want to generate to each call an html page.
This html page contains a javascript that have various object that i want to populate dynamically based on each call.
It is possible to do that?
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've got a component that downloads data from an API. When the user clicks Search, the content from the API is fetched via AJAX. This content from the API is in JSON and has got an ID of the product inside. I am able to create new HTML elements based on this content and put them inside my site, but I would like every created on the fly element to have routerLink="/detailsPage/itemID" working, so that after clicking it would route to detailsPage with apropriate ID. How to do it in the most simple way? I assume some recompiling of refreshing is needed.
The answer to this question is HTTPClient - Angular offers it as an easier way to use XMLHttpRequest (AJAX) in Angular applications, and using it also makes sure that routerLink or any other Angular directives will work on objects created dynamically with this method.
Angular - HTTPClient
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.
I'm talking about ASP.net 4.0 MVC3 database driven application. I want to know how to store dynamically generated page as static page in html? My purpose is to optimize performance of the application by avoiding database calls on each request, and serving content from static html page when it exists else it will load from db and save html to serve next request.
You are after output caching refer to this http://msdn.microsoft.com/en-us/library/system.web.mvc.outputcacheattribute.aspx
Im unsure of how to approach this, should I have the html to be loaded hidden or load it from somewhere? I want to load a form in one page, and dynamic content on other pages.
The form can be saved to mongo db, and when the page loads should load the data into that form from mongo db.
Where does the html live for all the pages? I want to have a clean html5 document with lets say a content div. all content goes into that block.
Server running Django
Im want to use backbone.js for the app
any help would be appreciated
The initial page should include the basic layout of the application (header, content, sidebar, different placeholder for your views, etc.)
Then you load the application (usually with a controller) and render the different view that will replace the placeholders you had in your layout.
To render the views, I suggest to use a templating engine. With backbone.js there is already underscore.js on the page, so you can use the templating engine included (http://documentcloud.github.com/underscore/#template). You then have to load the template on the page. The easiest way is to create include a script element on the page with your template inside:
<script type="text/template" name="template1">
your template here...
</script>
And you can load it using this:
var template = _.template( jQuery("script[name=template1]").text() )
and execute with your data
var html = template(model)
You build your page with different backbone views using different template.
I hope that help!