Home > Software Development > GUI Libraries for Angular Javascript Framework

GUI Libraries for Angular Javascript Framework

September 16th, 2013 Leave a comment Go to comments

Angular is a fantastic JavaScript framework that simplifies the MVC for Web applications. Like jQuery, it does not come with a library of GUI widgets and CSS themes – it just does what it’s supposed to do and does it well. If you are a developer, you would most likely need a GUI library to build a modern and interactive Web GUI. That is why I spent a bit time to research on this.

In general, you can continue to use whatever Javascript GUI libraries you’ve been using except jQuery based ones. I heard Angular and jQuery do not work well together because both use the $ namespace which may cause conflicts. This may not be a good news for you as I know there are quite some GUI libraries depending on jQuery.

Lost VMs or Containers? Too Many Consoles? Too Slow GUI? Time to learn how to "Google" and manage your VMware and clouds in a fast and secure HTML5 App.

To avoid the potential issues, you can try Angular-ui which supports Twitter Bootstrap. This page lists all the GUI widgets by the Angular UI together with Bootstrap, including Accordion, Alert, Buttons, Carousel, Collapse, Datepicker, Dropdown Toggle, Modal, Pagination, Popover, Progressbar, Rating, Tabs, Timepicker, Tooltip, Typeahead. To build a rich Web application, there are still some important widgets missing, for example, Grid, Menu, Tree, etc. I hope they’ll add more widgets in the future.

GUI widgets is only one part for building rich Web applications. Another important part is the CSS which defines the look and feel of Web GUI. For developers, it’s not really a fun to play with these CSS themes. Luckily there are CSS libraries to help. Twitter Bootstrap is one of these libraries that can make your life easy as a developer. If you don’t know Bootstrap yet, you may want to read this great tutorial. After that, you would appreciate how easy Bootstrap can help you.

There are a few more similar CSS projects like HTML5Boilerplate, Foundation, etc. I have not yet tried any of these as Bootstrap + AngularUI has offered me enough for me to get my current work done. Honestly there’s hardly a best framework. Just pick one (it happens to be Bootstrap for me) and be good at it. After all, GUI is not my specialty and focus.

Besides the Bootstrap tutorial above, there are a few nice tutorials on different aspects of Bootstrap from w3resources.com. This tutorial for example focus on the HTML form which which you would need to send data back to the server. You can find other tutorials on the left side navigation pane of the form page.

  1. johans
    September 16th, 2013 at 03:28 | #1

    Angular use of $ prefix does not impact on your options to use jQuery. The biggest factor is making Angular aware of your jQuery/other code so that UI updates are handled correctly. Secondly in many cases you can code more efficient components using Angular directives that leverage Angular scopes and data binding. In fact in many projects there is no need for jQuery – Angular includes jQLite which is a small footprint jQuery compatible library b

  2. September 18th, 2013 at 10:40 | #2

    Thanks a lot Johans, very useful information.

    Steve

  1. No trackbacks yet.