com.asayama.gwt.angular.site.examples.client.OnClickEventExampleDocumentation.html Maven / Gradle / Ivy
In this example, we demonstrate how we capture onClick event
using GWT Angular. data-ng-click directive is used to pass
events to the controller. The controller modifies it state, which is
automatically reflected in the view. In this case, getCaption().
Click the label, "Click Me". You will see that the caption below
the label is automatically refreshed.
View
The directive data-ng-click binds the browser's onClick event
to the controller's onClickTitle() method. $event
represents the browser's event object. The value of the TITLE
and the value returned by getCaption() method are inserted into
the <h2> and <h3> mark-ups.
Controller
Even though the view passes the browser's event to the controller, in this
implementation, onClickTitle() method ignores this value. In a
real application, you may choose to do something more interesting with the
event object.
When the browser's event is issued, we capture the current timestamp by
creating a Date object in Java, and then assigning the string
to the caption variable, which acts as the model. Since the
view is bound to getCaption(), as soon as the model's value
is modified, the change is reflected on the screen.
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-ng</artifactId>
<version>{{ GWT_ANGULAR_VERSION }}</version>
</dependency>
You can also browse the full source code on Github.
{{ GITHUB_GWT_ANGULAR_EXAMPLES_URL }}/blob/master/gwt-angular-examples/OnClickEvent