Complete Introduction to Angular UI for beginners

Angular UI is a bunch of mini projects that helps you be more productive with your Angular app development.

Downloading AngularUI

AngularUI is a companion suite for angularjs that is used to solve common problems related to UI development. The common problems include handling Keypress events, passing through jQuery components, validating and masking inputs, converting string representations, including fragments, formatting strings, and handling checkboxes.

Note

You can find more information about the project at http://angular-ui.github.io/ui-utils/.

On the project’s website, you can also find a download link for the current version of the JavaScript files. However, since we just discussed building angularjs applications using Grunt, let’s build this project from the project’s source on GitHub instead.

UI-Utils

UI-Utils is a utility package that allows you to add a wide variety of utilities into your application. The utilities are explained as follows:

  • IE Shiv: This is used to allow support for custom tags in IE8 and below.
  • jQuery Passthrough: The uiJq directive allows us to use jQuery plugins directly instead of having to create new directives to use them.
  • Event Binder: This allows you to bind callbacks to events that are not natively supported in angularjs.
  • Keypress: This allows you to bind events to a keypress.
  • Mask: This allows you to mask data based on certain conditions set.
  • Validate: This allows you to create custom validators and expressions
  • Reset: This allows you to display an icon or link; if you click on it, the model will become empty.
  • Scrollfix: This adds a ui-scrollfix class to the element.
  • Show / Hide / Toggle: This allows you to use a single directive of ui-toggle instead of using ng-show and ng-hide.
  • Route Matching: This is a nifty little directive that can be used to match the route of the current page.
  • Highlight: This is used to highlight a string of characters within a scope model.
  • Inflector: This will help you convert a string into alternative formats such as replace spaces with underscores or convert the string into a camelCase syntax.
  • Unique: This can be used to remove all duplicate items from within an array.
  • Format: This filter can be used to do any kind of string replacement.

Chapter 1 of 3 Prev Next

About the author

Deven Rathore

I'm Deven Rathore, a multidisciplinary & self-taught designer with 3 years of experience. I'm passionate about technology, music, coffee, traveling and everything visually stimulating. Constantly learning and experiencing new things.

View all posts
1 Comment
by Deven Rathore
2 min read

Pin It on Pinterest

Shares