angularjs with <portlet:renderURL/> and spring mvc portlet - angularjs

I have this code for my table :
##
<tr ng-repeat="elt in tabDemandes">
<td>{{elt.id}}</td>
<td>{{elt.name}}</td>
<portlet:renderURL var="maj">
<portlet:param name="action" value="maj"/>
<portlet:param name="idD" value="elt.id"/>
</portlet:renderURL>
</tr>
##
I want recover a value of my param "idD" in my controller but it take elt.id as a value of a param and he give me error
can someone help me ?

To have access to the idD in your controller just set a $scope that can hold it. Angularjs is built with 2-way data-binding in mind so really what this lets you do is make changes in the view that will go to the controller as well as changes in the controller being pushed out to the view.
In your case just make sure you are storing the idD as an ng-modle that links back to a scope you declared in the controller. Once you have that linked correctly you can get the idD in your controller no problem.

Obviously, the difference is that the JSTL taglib (<portlet:renderUR>L) runs on the server, while AngularJS and the ng-repeat runs on the client. At the moment AngularJS is looping over your content, the URL has already been rendered.
For more information about the differences of server- and clientside, look at this answer: What is the difference between client-side and server-side programming?
What we did was quite simple, we attached the URLs to our model (in your case tabDemandes). This is an example we used for creating an action URL with the ID as a parameter:
PortletURL detailURL = response.createActionURL();
detailURL.setParameter(ActionRequest.ACTION_NAME, "detailTask");
detailURL.setParameter("id", Long.toString(task.getId());
task.setDetailURL(detailURL.toString());
In this case we were using a list of tasks, and we used this action URL to open a detailed page of the task, so we had to pass the ID to the action URL. In stead of using the JSTL taglib we used the Java API.
In your case you'll probably need to use response.createRenderURL().

Related

ionic1 wait http response of next view before load it

i'm using ionic to create an application who retrieve data from api through http request when I change view I see the view before the data of the controller totally loaded :
How can I load data of the next controller to only see the final result :
here the button who start the change of view :
<ion-item class="item-thumbnail-left item-icon-right" ng-repeat="inscription in inscriptions" ng-click="loadActiProfil({{inscription}})" href="#/app/activite">
thank you in advance
You shouldn't wait for your HTTP response to start the navigation transition, on a UX perspective. ionic provides a service called $ionicLoading which allows displaying and hiding a spinner (with a black&transparent backdrop). You may use it to make your user understand that he/she's supposed to wait. But enough with my personal opinion.
Regarding your need:
Do not use href to change the current state, you'd rather use ui-sref, as it's supposed to be done using angular-ui router (which is, of course, ionic's router too). NB: ui-sref expects a state name and not an URI (for instance, "app.home").
Use your method loadActiProfil to programmatically switch from the previous state to the new one only once your data is available, thanks to the service $state and its method go (ie: $state.go('app.home') will take you to the state app.home)
TL;DR: if you need to switch the current state programmatically, then use $state.go(stateName), not ui-sref (nor href).

How to paint the response of an ajax in a new window by angular?

I am pretty new with angular js. My use case is We have a parent page say parentPage.html where we have a link. On click of this link in parentPage I want to send a server hit to a spring controller, which should return us a json response. I want to paste this response in the new window against the childpage.html. How can we achieve this by angular js?
parentPage.html:
Show New Customer
ajax response on click of above link:
{
customerName:'Adam',
address:'XYZ',
}
childPage.html(we have to iterate over the above key value pairs such that our result should be painted in the following way:-)
<table>
<tr>
<td>customerName:</td>
<td>Adam:</td>
</tr>
<tr>
<td>address:</td>
<td>XYZ:</td>
</tr>
</table>
On google I found enough stuff about the means by which we have to bring things within the scope. My only confusion in this usecase is, since we have to open a new window after sending the http get request(which is being sent from the parentPage.html), the response of which is to be painted in an absolutely new window(which is childPage.html), so isn't this scope going to get lost somewhere since we are not dealing with SPA thing here? Can we achieve this by angular in any possible way?
Since angular is meant to work off a one page application and retain the state of most javascript throughout the duration of the application being ran, you really have two option.
The first is to take that JSON response and store it in local storage.
window.localStorage.setItem('key', value);
By doing this, you will be able to pull the value back out at any point by use of the following
value = window.localStorage.getItem('key');
In most cases, you would want to stringify() the JSON before parsing it all out again.
This is one implementation which would definitely work out for you.
Another option would be to make use of ng-model, models are used to store and manipulate data in angularjs, By passing around these values back to your controllers you will be able to easily hold and interact with the state of these variables.

How does AngularJS handle Memory

I am wondering how AngularJS 'saves' its data/model. Does it actually save it or.. how does it work?
We are using different methods to retrieve JSON data. In other frameworks like jQuery we had to think about how to store data locally, i.e. when we want to provide a sorting possibility. In Angular this seems different, it seems to do all that for us out of the box.
Is it that Angular displays everything how it is supposed to be and looks at changes, reads in the displayed data in and then displays it differently or does it use a local storage to save the raw json.. and work from there? (This would limit the amount of data we can feed)
Here is a simple code-example:
$http.get("url-to-json")
.success(function(returnedData) {
$scope.search_result = returnedData['search_result'];
})
From there I can just use:
<div ng-repeat='result in search_results | sortResult:"price":sorted' id="res_<% result.id %>" class="result">
Product: <% result.name %>
</div>
I am riddled how Angular still knows the data and doesn't have to load it again from the external source.
Do you know?
There is a lot more that goes into it, but essentially its all stored in local memory. Angular creates an object of all your scope properties. When you do data binding in angular you are registering an event listener and when that event is called angular loops through this object detecting if something has changed, and if so updates the object accordingly. Each time an update occurs it returns to the loop to check if anything else has been updated. This is what is referred to as the $digestLoop.
SOURCE
The ng-book

not able to dynamically update the view when data is changing

I have a set of files in a server which I am looping though and constructing a JSOn and saving it as a separate file. I am using python for this. Works quite well. Now the scope is the number of files in the directory will increase/ change throughout the day..and I am running the script every 10 min to rewrite the json...the file name stays same and i am calling it in a single page html document using angular.js..Again fairly simple...But now I am having problem when the JSON is changing I am not seeing any change on the page unless I reload the page. Could I do something about this?
With angular I am using
$http('something.json').success(callback function with some argument data)
and in the markup something like
<ul>
<li ng-repeat="x in data">{{x.id}}</li>
</ul>
Your call to $http is one-time operation which happens after page load like this:
$http('something.json').success(function(data){
$scope.data = data;
});
angular is kickstarted
ng-controller containing $http request is evaluated and request for 'something.json' is sent
...
when your json arrives, your success function is called with data from json
view (html template) is updated with new data
Angular keeps your model (eg $scope.data) and UI (expressions in template) up to date, but it doesn't update external resources.
If you want to periodically poll for changes in 'something.json'
you can use $timeout service as suggested in JaKXz's comment.

Do we need multiple controllers to implement routes in angularjs?

There is chance that I might not be able to explain my problem properly. Let me try.
I am developing a single page application using angular. This app basically displays the episodes of an online novel series. There is a navigation bar, which has query menus (Like, latest episode, episode of a particular date, episodes with a particular tag, etc). For each of these queries, i want a separate url.
/latest - should display the latest episode
/tag/:tagname - should return all episodes with that tag.
For all these queries, the resultant view is the same (list of episodes). So I will be using the same partial for all routes.
My question is, Should I actually create a new controller for each query? like, LatestEpisodeController, TagController?
Is there anyway I can use the url to determine what the user wants and run that query from within the same controller?
Ofcourse you can use same controller in routing definition, the question is what is the purpose of that? It will be worse to debug it later, if you have a shared functionality it's better to turn it into a factory or service and then use in controllers.
But the answer is YES, you can use same controllers and implement different behaviour basing on i.e. $location.path()
yes you can use single controller for multiple routing..
you can create different functions in controller and in each function do the according job.
In my case I have created different html page for different url and registered same controller for the html pages and in the html page I have called controller method using ng-init in div portion.
You can use same controller and same views as you wish...
$location can help you to get current path or full url if you want and you can call your service depends on your path...
here I write a little example for you to get the idea
PLUNKER

Resources