Directive UI for Angular
Last updated 6 years ago by beeman .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install angular-dui 
SYNC missed versions from official npm registry.


Declarative UI for Angular


The goal is to have a specification that can be used to define common layouts in applications. It's currently implemented using AngularJS and Bootstrap but it should be quite straightforward to implement it using other technologies.

Getting started

$ git clone
$ cd angular-dui
$ npm install
$ gulp serve


At this moment there is one example that serves as a demo on how to use dui.

The application layout is specified in templates/app.html, the configuration object is defined in js/app.js.

The following structure renders a layout with a header, footer, sidebar and a main screen with one content item.


    <dui-header> [ Branding and navigation ] </dui-header>


        <dui-sidebar> [ Sidebar navigation ] </dui-sidebar>



                <dui-screen-header> [ Item list ] </dui-screen-header>


                        <dui-box-header> [ Item title ] </dui-box-header>

                        <dui-box-content> [ Item content ] </dui-box-content>

                        <dui-box-footer> [ Item date ] </dui-box-footer>


                <dui-screen-footer> [ Item paging ] </dui-screen-footer>




    <dui-footer> [ Copyright and branding] </dui-footer>


Customizing templates

There are multiple ways to override templates.

One of the options is to define a template in your HTML:

<script type="text/ng-template" id="/templates/dui-footer.html">
    <footer class='dui-footer'>
       <h6 ng-bind-html='dui.footer.text'> </h6>
       <div ng-transclude></div>
       <h6>template defined in app.html</h6>

Another option is to update the $templateCache in a controller:

app.controller('MyCtrl', function ($templateCache) {

    "<footer class='dui-footer'> " +
    "   <h6 ng-bind-html='dui.footer.text'> </h6>" +
    "   <div ng-transclude></div>" +
    "   <h6>template defined in MyCtrl</h6>" +
    "</footer> ");


A template added to $templateCache takes precedence over the other templates.

Current Tags

  • 1.1.1                                ...           latest (6 years ago)

2 Versions

  • 1.1.1                                ...           6 years ago
  • 1.0.0                                ...           6 years ago
Maintainers (1)
Today 0
This Week 0
This Month 2
Last Day 0
Last Week 1
Last Month 1
Dependencies (0)
Dev Dependencies (6)
Dependents (0)

Copyright 2014 - 2017 © |