Thursday, April 3, 2014

ZK, AngularJS and Pure HTML Template


As we already know ZK used to generate all html content within 'redraw' function of a ZK Widget, this is a little bit (?) hard to maintain and customize dom structure and style of component.

This article describe how to create ZK Component with AngularJS Directive so you can use a pure HTML template to generate dom elements of ZK Component and has some advantages:
1. Easier to maintain.
2. Easier to customize.

And also some drawbacks (part of them has workaround):
1. Need to load html template via several ajax call.
  Workaround: You can load all templates at once,
       for more information please refer to
       AngularJS: load all templates in one file or AngularJS Merge Template
2. Will blink while rerender, you can use a fake dom to avoid blinking but this may affect the client side performance.
3. Has issue of dynamically insert and compile complex dom elements so need to rerender if dynamically add children.


1. This is just a POC done in a short time, probably not well organized and has some unknown issues.
2. I am not familiar with AngularJS so this POC may contains bad practice.


AngularJS Create Components

ZK Component Development Tutorial: Getting Started

ZK CDT: Fire Event to Server to Create a SelectableTextNote


Online demo


The concept is simple.

In AngularJS, a directive which support pure html template is a function that returns an Object Literal, and registered with a specific name (see Creating Custom Directives).
Both of them -- the name and the function -- can be declared at any places.
e.g. inside the Javascript of ZK Widget.

So we can specify Angular Tag (ngTag) and Angular Template Url (ngTemplateUrl) to each ZK Component and do below:

In ZK Component:
* Server Side:
** Make sure that each templateUrl maps to different tag.
* Client Side:
** Output ngTag in redraw function.
** Store component to zk.ngcomponents in redraw function.
** Register Angular Directive with ngTag.

In Angular Directive
* Use ngTemplateUrl as templateUrl in directive.
* Store $scope, $compile and controller to $element in controller function of directive.
* Bind ZK Widget with Angular Objects above in link function of directive.

Then we can use AngularJS Directive with pure HTML Template then control ZK Widget from AngularJS Directive and vice versa.


for more information.

Program Introduction

Testing zul page

Testing Composer

AngularJS Library

Bootstrap3 CSS Library

Utils for AngularJS ZK Widget

Basic APIs of AngularJS ZK Widget

The Folder Contains All Default Templates

Basic Java Class for AngularJS ZK Component

Please refer to the full project below


Full project at github

Demo Flash (click View Raw to download)


  1. ZK has released the official support for AngularJS.

  2. Very Nice Post really expalined good information and Please keep updating us..... Thanks

  3. Just wish to say your article is as astounding. The clearness in your
    submit is just excellent and i can suppose you’re knowledgeable in this subject.

  4. Nice post . Thanks for the shearing valuable information. I really fiend this type blog. Special thanks to writer.
    Hire Angularjs Developer
    AngularJS Development Company

  5. Thanks for providing good information,Thanks for your sharing.Angularjs Online Training


  6. Thank you.Well it was nice post and very helpful information on AngularJS5 Online Training Hyderabad

  7. Great post. I found very useful info from this post. Thank you very much.
    Angularjs Developer

  8. The blog was absolutely fantastic! Lot of great information which can be helpful in some or the other way. Keep updating the blog, looking forward for more contents...Great job, keep it up..Website Design Company in Bangalore | Web Design Companies in Bangalore | Website Design Companies in Bangalore

  9. This is an best post. It is Really very informative concept.I like it and help me to development very well.Thanks alot for this brief explanation and very nice information.Angular Js Course HYDERABAD

  10. Excellent ! I am truly impressed that there is so much about this subject that has been revealed and you did it so nicely
    Anika Digital Media
    seo services
    web design development
    graphic design

  11. thank your valuable content.we are very thankful to of the recommended blog.which is very useful to new learners and professionals.content is very useful for hadoop learners

    Best Spring Classroom Training Institute
    Best Devops Classroom Training Institute
    Best Corejava Classroom Training Institute
    Best Advanced Classroom Training Institute
    Best Hadoop Training Institute
    Best PHP Training Institute