AngularJS first(landing page) with dynamic content

Question

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:

1. 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?

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?

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?

4. 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.

Answer 1

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.