AngularBeans : Step By Step Tutorial


STEP6: ModelQuery


Consider the following class: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
package examples.angularbeans;

import java.text.SimpleDateFormat;
import java.util.Date;

import javax.inject.Inject;
import javax.inject.Named;
import angularBeans.api.http.Post;
import angularBeans.api.http.Put;

import angularBeans.api.AngularBean;
import angularBeans.util.ModelQuery;

@AngularBean
@Named("superBean")
public class MySecondBean {

	@Inject
	ModelQuery model;

	public void updateTime() {
		model.setProperty("date",
				new SimpleDateFormat("dd/MM/yyyy").format(new Date()))
				.setProperty("time",
						new SimpleDateFormat("hh:mm:ss").format(new Date()));
	}

	@Put
	public void addTask(Task task) {
		// business logic here
		model.pushTo("tasks", task).setProperty("taskToAdd", "");

	}

	@Post
	public void deleteTask(String name) {
		// Retrieved from data base by name (for example).
		Task task = new Task();
		task.setName(name);

		model.removeFrom("tasks", task, "name");
	}

}


And the HTML: 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html data-ng-app="myModule">
<head>
<meta charset="ISO-8859-1">
<title>example1</title>
<script type="text/javascript"
	src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="angular-beans.js"></script>

<script type="text/javascript">
	angular.module("myModule", [ "angularBeans" ]).controller(
			"SecondCtrl",

			function($scope, superBean) {

				angularBeans.bind($scope, superBean, [ "date", "time", "tasks",
						"taskToAdd" ]);
			});
</script>

</head>
<body ng-controller="SecondCtrl">

	<button ng-click="superBean.updateTime()">update time</button>
	<h2>{{date}}</h2>
	<br />
	<h2>{{time}}</h2>

	<label>new Task: </label>
	<input type="text" data-ng-model="taskToAdd">
	<button ng-click="superBean.addTask({name:taskToAdd})">add</button>


	<ul>
		<li ng-repeat="task in tasks">{{task.name}} {{task.completed}}
			<button ng-click="superBean.deleteTask(task.name)">delete</button>
		</li>

	</ul>



</body>
</html>

Now if you look at the MySecondBean you will see another annotation used on top of it: @Named this CDI annotaion will allow us to give a name to ower Angular Bean, and this will be the name of the angularJS injected service (instead of the className with a first lowerCase character). But also this class include a new injected bean : ModelQuery: this bean is used to create a kind of a query but from the server to the clients, to update javascript side beans,that is very convenient if we are looking to change state of properties that only exist on the client side (we dont have the @NGModel match on the CDI bean). In ower example, line 22 and 24 change 2 properties "date" and "time", of course, i mean the js proxy properties (the generated service "superBean"). And with "angularBreans.bind(...)" on the client side we assure the synchronization with the bounded scope. In other worlds, the changes will be applied directly to the view.
At line 31,the model.pushTo(..) method will simply add a value to an existing array "tasks". And set the value of the property "taskToAdd" to an empty String, as a result, you will see the new task in the task list,and the text field will be cleared.

When removing or adding a new element on an array with the model query, we can provide an "equality key" as third parameter, that mean the removeFrom(...) at line 41 will remove the item who has an equal "name" with the task passed as parameter otherwise the equality will be based on a perfect match. (all the properties of the array item and the object passed to the method are equals).

next step:

<STEP7: Working with events>

Support or Contact

Having trouble with Pages? Check out the documentation at https://help.github.com/pages or contact support@github.com and we’ll help you sort it out.