Für diese Seite gibt es noch keine deutsche Übersetzung. Bitte lesen Sie solange die englische Version. Wir bitten Sie um Verständnis.

Making fields Angular

Making input fields "Angular"

Basically, you can replace JSF EL expressions by AngularJS mustaches almost everywhere in your code. If you do, the JSF bean is read and replicated on the client. It's part of the AngularJS model. So you can use the same value in a JSF bean and as a AngularJS model attribute. Even better, you can use both variables in a very similar way.

Let's have a look at the customer contact form we've been developing in the previous steps:

Contact information
last name
first name
date of birth
email address
i agree to the terms and conditions

This is a traditional JSF page that doesn't make use of the AngularJS model. There's a small main.js file, but it's only needed to provide the client side widgets of AngularFaces and the client side bean validation (see step 5).

Making this form's data available to AngularJS is as simple as can be: just replace the JSF EL terms # {} by AngularJS style mustaches {{}}:

You won't see any difference to the previous example. The only difference is that the JSF bean values can now be used in an AngularJS controller.
Contact information
last name
first name
date of birth
email address
i agree to the terms and conditions

On the JSF side, the mustache expressions are converted to ordinary JSF expressions. It doesn't matter whether you write {{customer.lastName}} or Doe, until you look at the Javascript code.

On the AngularJS side, the bean attributes are added to the AngularJS scope. Hence there's a customer object, consisting of the first and last name, the date of birth and so on. For instance, you could use two AngularJS watches to suggest an email address:

(IMHO the Javascript code looks a bit odd. I'm sure there a better way of concatenating string, I just didn't figure out how to do it when I wrote the demo).

Synchronizing values between AngularJS scope and JSF beans works in both ways. The values of the input fields are transmitted back to the server, no matter whether you do a regular HTML request, a JSF AJAX request or the optimized AngularFaces request.

AngularFaces provides an advanced kind of AJAX requests. Typically, they use a lot less network bandwidth, and they are faster than traditional JSF AJAX request. To activate AngularFaces AJAX, you have to do three simple preparations:

  • Add an JSF AJAX button that includes a special update region: "angular". You've already seen this above:
  • Add the id "angular" to the <h:body>.

Note that the id angular doesn't really mark an ordinary update region. It's a virtual id. If AngularFaces sees the id, it replaces the default update response generated by JSF by a highly-optimized response that updates only the scope values. Since AngularFaces 2.1 <h:messages /> and <prime:messages /> are also updated.

However, <prime:growl> probably isn't updated - but I didn't test this yet.

Making fields Angular

Making input fields "Angular"

Basically, you can replace JSF EL expressions by AngularJS mustaches almost everywhere in your code. If you do, the JSF bean is read and replicated on the client. It's part of the AngularJS model. So you can use the same value in a JSF bean and as a AngularJS model attribute. Even better, you can use both variables in a very similar way.

Let's have a look at the customer contact form we've been developing in the previous steps:

Contact information
last name
first name
date of birth
email address
i agree to the terms and conditions

This is a traditional JSF page that doesn't make use of the AngularJS model. There's a small main.js file, but it's only needed to provide the client side widgets of AngularFaces and the client side bean validation (see step 5).

Making this form's data available to AngularJS is as simple as can be: just replace the JSF EL terms # {} by AngularJS style mustaches {{}}:

You won't see any difference to the previous example. The only difference is that the JSF bean values can now be used in an AngularJS controller.
Contact information
last name
first name
date of birth
email address
i agree to the terms and conditions

On the JSF side, the mustache expressions are converted to ordinary JSF expressions. It doesn't matter whether you write {{customer.lastName}} or Doe, until you look at the Javascript code.

On the AngularJS side, the bean attributes are added to the AngularJS scope. Hence there's a customer object, consisting of the first and last name, the date of birth and so on. For instance, you could use two AngularJS watches to suggest an email address:

(IMHO the Javascript code looks a bit odd. I'm sure there a better way of concatenating string, I just didn't figure out how to do it when I wrote the demo).

Synchronizing values between AngularJS scope and JSF beans works in both ways. The values of the input fields are transmitted back to the server, no matter whether you do a regular HTML request, a JSF AJAX request or the optimized AngularFaces request.

AngularFaces provides an advanced kind of AJAX requests. Typically, they use a lot less network bandwidth, and they are faster than traditional JSF AJAX request. To activate AngularFaces AJAX, you have to do three simple preparations:

  • Add an JSF AJAX button that includes a special update region: "angular". You've already seen this above:
  • Add the id "angular" to the <h:body>.

Note that the id angular doesn't really mark an ordinary update region. It's a virtual id. If AngularFaces sees the id, it replaces the default update response generated by JSF by a highly-optimized response that updates only the scope values. Since AngularFaces 2.1 <h:messages /> and <prime:messages /> are also updated.

However, <prime:growl> probably isn't updated - but I didn't test this yet.

A página ainda não foi traduzido para o Português. Por favor, leia a tradução em Inglês. Pedimos desculpas por qualquer inconveniente.

Making fields Angular

Making input fields "Angular"

Basically, you can replace JSF EL expressions by AngularJS mustaches almost everywhere in your code. If you do, the JSF bean is read and replicated on the client. It's part of the AngularJS model. So you can use the same value in a JSF bean and as a AngularJS model attribute. Even better, you can use both variables in a very similar way.

Let's have a look at the customer contact form we've been developing in the previous steps:

Contact information
last name
first name
date of birth
email address
i agree to the terms and conditions

This is a traditional JSF page that doesn't make use of the AngularJS model. There's a small main.js file, but it's only needed to provide the client side widgets of AngularFaces and the client side bean validation (see step 5).

Making this form's data available to AngularJS is as simple as can be: just replace the JSF EL terms # {} by AngularJS style mustaches {{}}:

You won't see any difference to the previous example. The only difference is that the JSF bean values can now be used in an AngularJS controller.
Contact information
last name
first name
date of birth
email address
i agree to the terms and conditions

On the JSF side, the mustache expressions are converted to ordinary JSF expressions. It doesn't matter whether you write {{customer.lastName}} or Doe, until you look at the Javascript code.

On the AngularJS side, the bean attributes are added to the AngularJS scope. Hence there's a customer object, consisting of the first and last name, the date of birth and so on. For instance, you could use two AngularJS watches to suggest an email address:

(IMHO the Javascript code looks a bit odd. I'm sure there a better way of concatenating string, I just didn't figure out how to do it when I wrote the demo).

Synchronizing values between AngularJS scope and JSF beans works in both ways. The values of the input fields are transmitted back to the server, no matter whether you do a regular HTML request, a JSF AJAX request or the optimized AngularFaces request.

AngularFaces provides an advanced kind of AJAX requests. Typically, they use a lot less network bandwidth, and they are faster than traditional JSF AJAX request. To activate AngularFaces AJAX, you have to do three simple preparations:

  • Add an JSF AJAX button that includes a special update region: "angular". You've already seen this above:
  • Add the id "angular" to the <h:body>.

Note that the id angular doesn't really mark an ordinary update region. It's a virtual id. If AngularFaces sees the id, it replaces the default update response generated by JSF by a highly-optimized response that updates only the scope values. Since AngularFaces 2.1 <h:messages /> and <prime:messages /> are also updated.

However, <prime:growl> probably isn't updated - but I didn't test this yet.

Für diese Seite gibt es noch keine deutsche Übersetzung. Bitte lesen Sie solange die englische Version. Wir bitten Sie um Verständnis.

Making fields Angular

Making input fields "Angular"

Basically, you can replace JSF EL expressions by AngularJS mustaches almost everywhere in your code. If you do, the JSF bean is read and replicated on the client. It's part of the AngularJS model. So you can use the same value in a JSF bean and as a AngularJS model attribute. Even better, you can use both variables in a very similar way.

Let's have a look at the customer contact form we've been developing in the previous steps:

Contact information
last name
first name
date of birth
email address
i agree to the terms and conditions

This is a traditional JSF page that doesn't make use of the AngularJS model. There's a small main.js file, but it's only needed to provide the client side widgets of AngularFaces and the client side bean validation (see step 5).

Making this form's data available to AngularJS is as simple as can be: just replace the JSF EL terms # {} by AngularJS style mustaches {{}}:

You won't see any difference to the previous example. The only difference is that the JSF bean values can now be used in an AngularJS controller.
Contact information
last name
first name
date of birth
email address
i agree to the terms and conditions

On the JSF side, the mustache expressions are converted to ordinary JSF expressions. It doesn't matter whether you write {{customer.lastName}} or Doe, until you look at the Javascript code.

On the AngularJS side, the bean attributes are added to the AngularJS scope. Hence there's a customer object, consisting of the first and last name, the date of birth and so on. For instance, you could use two AngularJS watches to suggest an email address:

(IMHO the Javascript code looks a bit odd. I'm sure there a better way of concatenating string, I just didn't figure out how to do it when I wrote the demo).

Synchronizing values between AngularJS scope and JSF beans works in both ways. The values of the input fields are transmitted back to the server, no matter whether you do a regular HTML request, a JSF AJAX request or the optimized AngularFaces request.

AngularFaces provides an advanced kind of AJAX requests. Typically, they use a lot less network bandwidth, and they are faster than traditional JSF AJAX request. To activate AngularFaces AJAX, you have to do three simple preparations:

  • Add an JSF AJAX button that includes a special update region: "angular". You've already seen this above:
  • Add the id "angular" to the <h:body>.

Note that the id angular doesn't really mark an ordinary update region. It's a virtual id. If AngularFaces sees the id, it replaces the default update response generated by JSF by a highly-optimized response that updates only the scope values. Since AngularFaces 2.1 <h:messages /> and <prime:messages /> are also updated.

However, <prime:growl> probably isn't updated - but I didn't test this yet.