AngularBeans : Step By Step Tutorial


STEP4: angularBean and binding


Just add again @NGReturn(model = "message")
to the sayHello method: 
 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
package examples.angularbeans;

import angularBeans.api.http.Get;

import angularBeans.api.AngularBean;
import angularBeans.api.NGModel;
import angularBeans.api.NGReturn;

@AngularBean
public class HelloBean {

	private String name = "insert your name here";

	@Get
	@NGReturn(model = "message")
	public String sayHello(String name, Language language) {
		this.name = name;
		return "Hello " + name + " from angularBeans! , your language is "
				+ language.getValue();
	}

	@NGModel
	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

}

and this is the index.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
<!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("FirstCtrl",
			function($scope, helloBean) {

				$scope.language = {
					value : "French"
				};

				angularBeans.bind($scope, helloBean, [ "message", "name" ]);

			});
</script>

</head>
<body data-ng-controller="FirstCtrl">

	<input type="text" data-ng-model="name">

	<label>Server Response:</label>
	<h2>{{message}}</h2>

	<button data-ng-click="helloBean.sayHello(name,language)">say
		hello</button>
</body>
</html>

we removed the sayHello() function from the $scope and call the one from the bean instead.
Notice the line 18: angularBeans.bind($scope, helloBean, [ "message", "name" ]);
This is a binding that "watch" the bean properties listed at the array (last parameter), if any value change occur for one of those properties, the $scope state will be auto synchronized (and will have his own copy of the bound properties). but this is a one way data binding (bean->$scope)

next step:

<STEP4: Logging>

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.