com.asayama.gwt.angular.site.examples.client.view.HttpClientExampleDocumentation.html Maven / Gradle / Ivy
One of the core concepts of AJAX is asynchronous loading of data from the
server, such that the loading of the dynamic contents do not block the user
interaction with the screen. In this example, we demonstrate the use of
HttpClient to obtain JSON data from a server (instead of a more traditional
XML data, but the concept remains the same).
Note that the HttpClient used in this example is based on GWT's
RequestBuilder which is adapted to AngularJS framework, opposed
to AngularJS's $http service object.
The HTTP GET request is sent asynchronously without blocking the user
interaction. The response is a JSON object, (to be more precise, in this
example, an array of JSON objects), which is parsed and loaded into an
overlay type called JSArray<Mayor>. In the HTML view,
we use data-ng-repeat directive to iterate over the JSON
objects in this array, and print the attributes of the objects to the screen
as a list.
Controller
The HTTP call is made upon controller's onControllerLoad()
method. In order not to block the UI, the returned value is trapped by a
callback object, HttpClientCallback. If the response is
successful, the response text is parsed into an array of JSON objects, and
assigned to the mayors variable, which acts as a model in
this example.
View
The model object, mayors is wired to the HTML view via the
method getMayors(). The directive, data-ng-repeat
iterates through the array returned by this method, and for each item in the
array, we print a list item <li> showing the attributes
of the object. The items are printing in the order they were returned.
Configuration
The following modules are required in the gwt.xml.
The following Maven dependencies are required in the pom.xml.
<dependency>
<groupId>com.asayama.gwt</groupId>
<artifactId>gwt-angular-http</artifactId>
<version>{{ PROJECT_VERSION }}</version>
</dependency>
You can also browse the full source code on Github.
{{ GITHUB_SOURCE_URL }}/gwt-angular-site/gwt-angular-examples/HttpClient