com.asayama.gwt.angular.site.examples.client.TextInputExampleDocumentation.html Maven / Gradle / Ivy
This example demonstrates the declaration of Angular model and the
communication between the view (HTML) and the controller (Java) using this
model.
To see this example in action, try typing in something into the text field
below. Before you enter any values into the field, the caption above the
field should read "Hello, Stranger!" Once you enter a value in the
field, e.g. "Jack", then you will see that caption updated to
"Hello, Jack!" as you type in the value.
View
The text <INPUT> field is associated with an Angular
model called name using data-ng-model directive.
When the element is first rendered, the controller's getName()
is called and the value from this method is assigned to the model. When the
value of the input box is changed, the change is communicated to the
controller via data-ng-change directive, which calls
setName() method.
Controller
The controller code bound to the view above is shown below. The view
communicates with the controller via the getName() and
setName() methods.
There are two other variables that are defined in this controller that
are bound to the view. They are GREETING and STRANGER
. You may recognize these variables from the HTML code above.
These public final constants are bound to the view, so that they can be
inserted into the view via the use of double mustache notation, {{ }}.
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/TextInput