Using Angular with ZK"
From Documentation
| Line 7: | Line 7: | ||
= Overview = | = Overview = | ||
[https://angular.io/ Angular] | [https://angular.io/ Angular] | ||
| − | <ref>According to [http://angularjs.blogspot.tw/2016/12/ok-let-me-explain-its-going-to-be.html Angular naming guideline, we should use "Angular" for versions 2.0.0 and later.</ref> is a well-known client-side MVW framework. In the previous article,[https://www.zkoss.org/wiki/Small_Talks/2016/May/Integrating_ZK_with_AngularJS Integrating ZK with AngularJS | + | <ref>According to [http://angularjs.blogspot.tw/2016/12/ok-let-me-explain-its-going-to-be.html Angular naming guideline, we should use "Angular" for versions 2.0.0 and later.</ref> is a well-known client-side MVW framework. In the previous article,[https://www.zkoss.org/wiki/Small_Talks/2016/May/Integrating_ZK_with_AngularJS Integrating ZK with AngularJS], we have introduced how to integrate with AngularJS (1.x), but Angular changes a lot since '''2.0'''. So we think that we also need to introduce more about the integration with Angular again. |
In this article, I use the example in [https://angular.io/docs/ts/latest/tutorial/ Angular tutorial], hero editor, as the base and modify it to communicate with a Java ViewModel at the server-side with ZK [http://books.zkoss.org/zk-mvvm-book/8.0/data_binding/client_binding_api.html client command binding]. | In this article, I use the example in [https://angular.io/docs/ts/latest/tutorial/ Angular tutorial], hero editor, as the base and modify it to communicate with a Java ViewModel at the server-side with ZK [http://books.zkoss.org/zk-mvvm-book/8.0/data_binding/client_binding_api.html client command binding]. | ||
| + | = Load Heroes from the Server = | ||
| + | First, we need to rename <tt>index.html</tt> to <tt>index.'''zhtml'''</tt> to be processed by ZK and keep all existing tag elements unchanged in the file. Then add an | ||
| + | <source lang='xml'> | ||
| + | <html xmlns:z="zul" xmlns="native"> | ||
| + | ... | ||
| + | <z:div id="heroes" | ||
| + | viewModel="@id('vm')@init('org.zkoss.zkangular.HeroEditorVM')"> | ||
| + | <my-app>Loading...</my-app> | ||
| + | <br/><br/> | ||
| + | <z:button label="list all at the server" onClick="@command('show')"/> | ||
| + | </z:div> | ||
| + | |||
| + | </source> | ||
= Download = | = Download = | ||
Revision as of 09:51, 19 May 2017
Author
Hawk Chen, Engineer, Potix Corporation
Hawk Chen, Engineer, Potix Corporation
Date
Version
ZK 8.0
ZK 8.0
Overview
Angular [1] is a well-known client-side MVW framework. In the previous article,Integrating ZK with AngularJS, we have introduced how to integrate with AngularJS (1.x), but Angular changes a lot since 2.0. So we think that we also need to introduce more about the integration with Angular again.
In this article, I use the example in Angular tutorial, hero editor, as the base and modify it to communicate with a Java ViewModel at the server-side with ZK client command binding.
Load Heroes from the Server
First, we need to rename index.html to index.zhtml to be processed by ZK and keep all existing tag elements unchanged in the file. Then add an
<html xmlns:z="zul" xmlns="native">
...
<z:div id="heroes"
viewModel="@id('vm')@init('org.zkoss.zkangular.HeroEditorVM')">
<my-app>Loading...</my-app>
<br/><br/>
<z:button label="list all at the server" onClick="@command('show')"/>
</z:div>
Download
- ↑ According to [http://angularjs.blogspot.tw/2016/12/ok-let-me-explain-its-going-to-be.html Angular naming guideline, we should use "Angular" for versions 2.0.0 and later.
Comments
| Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License. |