Everything you need to know to build Web Components with AngularJS

Leblanc Meneses
Robust Haven Inc.

AngularJS won

  • Client Side A-Z Framework:
    • 100% testable
    • routing
    • animation
    • modules to partition your application
    • filters
    • event bus
    • dependency injection
    • directives for custom controls
    • directives to extend functionality

KISS – keep it simple

  • UI Smells: page refreshing, non responsive, slow, your application has a bunch of grids
  • Copy UI of Apps everyone uses on a day to day basis. Copying is the fastest way to catch up.
Build simple working software



My Dashboard copied from Azure Dashboard / Ducksboard

Web Components, Polymer, AngularJS

Web components https://www.w3.org/wiki/WebComponents AngularJS takes you from A-Z. Angular is developed in modules. Polymer takes care of packaging a web component – one piece of AngularJS. AngularJS templating could eventually be replaced with a polymer type implementation. As a developer you can use what works today with AngularJS and let the AngularJS team handle plumbing. Not recommended: glue both frameworks today with your own directive.

Busy Indicator

  • Building and packaging a Web Component with AngularJS.
2 large improvements can be made to this directive. Can you find them?
Demo: Code Time

restrict:’E’ = WebComponent

Web Component Responsibilities

Web Component Responsibilities

restrict:’A’= Behavior Extending

  • Behavior – decoration by attribute
    • k-mask=“’(999) 000-0000’”
    • Ng-required, ng-minlength, ng-maxlength, ng-pattern, ng-change

Identify Application UI Patterns and put it in a directive

ng-controller - copy paste of similar code

Metadata AOP = Don’t Repeat Yourself

  • T4Scaffolding is used to create DisplayTemplates, EditorTemplates from model using custom HTML helpers that will emit bootstrap+AngularJS code based on metadata
    • Extensions hooks are implemented with directives
  • T4Scaffolding creates convention based REST endpoint for model (resource).

Result is a SPA AngularJS/Bootstrap app. Client side and server side code intention is 100% in sync, DRY, and reduces the time to build a quality application.

Metadata AOP Driven Apps


Leblanc Meneses
Robust Haven Inc.