Gilgamesh is a collection of useful plugins and extensions of AngularJS( Polymer version is coming soon) to help you build modern web application. This demo page only shows the magic of element extensions. For more information please visit http://github.com/sskyy/Gilgamesh.

1. Original Component

This is the basic component(directive) we will use to explain the features of Gilgamesh. You may notice that a new method named `component` is attached to angular. Consider it a `directive` decorator which is compatible with the origin directive usage, but with more functionality.

angular.module("demo",["Gilgamesh"])
.component("userCardForm", function(){
    return {
      templateUrl : "/Gilgamesh/adapters/angular/components/user-card-form.html",
      link : function( $scope, $el){
      }
    }
  })


    
    





    status:
    
        
            {{name}}:{{status}}

2. Total Overwrite

Using `component` enables you to overwrite template at runtime with simply add write what you want as child element.


    name : 
    gender : 
    
    save : {{user.$$actions.save}}

name : gender :

save : {{user.$$actions.save}}

3. Partial overwrite

Sometime total overwrite is too verbose when you only want to change a small part of the original template. `gm-tpl-partial` and `gm-role` can save you from that. First, add `gm-role` to the part of which may be overwrite just like we did in the example component template above. Then add `gm-tpl-partial` to the element and use `gm-role` to specify which part you want to overwrite in the child element.

4. Partial include

The combination of `gm-tpl-include` and `gm-role` is used to include particular part of template.

5. Partial Exclude

`gm-tpl-exclude` is used to exclude part of the template.

6. Import Elements

This feature brings the reusability of component to the next level by breaking down the boundary of component with `gm-import` and `gm-from-role`. You can now use part of a component anywhere. Take a look the examples below to see how we import part of the basic component.

6.1 Import Scope

Use the basic component to change user name and check out the result here.

user.name:{{user.name}}

user.name:{{user.name}}

6.2 Import Role-Element

Click the save button of the basic component and check out the result here.

6.3 Import Overwrote Role-Element

Imported element can be overwrote as well. Click the save button of the basic component and check out the result here.


    STATUS:
    
        
            {{name}}==={{status}}

STATUS:

{{name}}==={{status}}

7. Event Listener

Dealing with element event has never been easier than using Gilgamesh. Let the code speak for itself, only remember if you want use a scope method on as event listener, use `scope-on-` instead of `on-`.

angular.module("demo")
  .component("modal",function(){
  return {
    link : function( $scope, $el){
      $el[0].open = function(){
        $el[0].style.display = "block"
        $el[0].dispatchEvent(new Event("open"))
        console.log("event fired")
      }

      $el[0].hide = function(){
        $el[0].dispatchEvent(new Event("hide"))
      }

      $el[0].hide()
    }
  }
})



    
        This modal has a listener on open event.

This modal has a listener on open event.

8. Component Inherit

Component's behavior and public method can be inherit easily like code below:

angular.module("demo")
  .component("modalExtra",function(){
  return {
    extend : 'modal',
    link : function( $scope, $el){
      //will automatically inherit modal's open method
    }
  }
})



    
        This modal-extra has a listener on open event.

This modal-extra has a listener on open event.