AngularUI

UI Bootstrap








What is AngularUI?


http://angular-ui.github.io/

Suite of components complementing
AngularJS framework

No external dependencies *

Very modular

UI.Utils


AngularJS tools
as single components in one module

  • event binder
  • format
  • highlight
  • include fragment
  • indeterminate checkbox
  • inflector
  • jQuery passthrough
  • keypress
  • mask
  • reset
  • route checking
  • scroll
  • scroll fix
  • show/hide/toggle 
  • unique
  • validate

UI-Modules


modules with external dependencies

  • ui.codemirror
  • ui.ace
  • ui.calendar
  • ui.map
  • ui.date
  • ui.select2
  • ui.tinymce
  • ui.sortable

UI-Alias


rename third-party directives
generate simple template directives


    // Example:
    date: '<input data-ui-date data-ui-date-format="mm/dd/yyyy" />'
    // Becomes: <date>

NG-Grid


powerful data grid using jQuery

  • pure HTML5 or jQuery-UI
  • grouping
  • template
  • themes
  • client/server paging
  • master/details
  • excel-like editing
  • pinning

UI-Router


flexible routing with nested views

  • nested states and views
  • state manager
  • multiple & named views
  • directives
  • templates/controllers
  • resolve
  • custom data objects
  • callbacks & state events

IDE Plugins


support for text editors


  • Textmate
  • Atom
  • Sublime Text
  • Brackets

UI-Bootstrap


native AngularJS directives based on Bootstrap 3.x

  • accordion
  • alert
  • buttons
  • carousel
  • collapse
  • datepicker
  • dropdown toggle
  • modal
  • pagination
  • popover
  • progressbar
  • rating
  • tabs
  • timepicker
  • tooltip
  • typeahead

Alternatives & Refs


  • AngularStrap - native directives
  • Ionic - advanced HTML5 Mobile App Framework
  • AngularSemantic - directives for Semantic-UI modules
  • Angular Kendo UI
  • Wijmo - AngularJS Components
  • Google Summer of Code 2014 Ideas List
  • http://ngmodules.org/

  • @CraftTek
  • @AngularJSTampa

AngularUI - UI Bootstrap

By Kris Ivanov

AngularUI - UI Bootstrap

  • 3,061