December 21, 2022

Welcome to the IdleWorx blog

This is the official blog of A blog covering Android, JSP, Servlets, Tomcat, JavaScript, Ruby and other web development stuff.

August 19, 2014

Creating a flexible Alerting Service with AngularJS (Part 1)

Using AngularJS 1.2.20, Bootstrap 3, underscore.js

While working on recent AngularJS project I had to come up with an easier way to deal with application messages (error messages, alert messages, debug messages,etc).

If you have a tiny AngularJS app $scope.error = ‘Error Description’; will do it for sending simple error messages to your controllers, but if you’re using this approach for a larger app you’ll quickly find it’s not a good idea.

While I am sure there are other ways to do this, perhaps better ones, this article will show you how to implement a flexible Alerting/Messaging Service for use in an AngularJS app.

Usage inside Controllers

Why do I have to pass in scope every time?

The way this Message Service works is it allows you to set one message of each type (info,warning,error,success,debug) ,so 5 in total, on any $scope you pass in. This allows you to set scope specific error messages. This is good because you can have a controller that has a warning message, and another one that has an error message. The messages won't interfere with each other.

Usage inside Partials

To make this really easy, I've used bootstrap 3 template code to generate several html templates for the messaging.
You can simply include the following files (messages.tpl.html) and (debug-messages.tpl.html) in your AngularJS application (assuming you are using the bootstrap 3 framework).

The above partials can then be embedded anywhere in your app where you want to display an messages. Typical place would be somewhere on top of your main app content. I like to keep the messages and the debug messages separate like this for easier including where needed. Just make sure they are inside the scope for which you are displaying these messages (otherwise the $scope.messages property will be undefined, and no messages will show for this scope).

So for example, if you are using the controller from before

you should be using this code to add the messages to your app.

How the Message Service actually works

The message service adds a $scope.message property to any $scope for which you invoked the MessageService.init($scope) method. It then keeps track and updates $scope.message any time you call one of the message methods such as MessageService.error($scope,'This is an error');

And here is the actual Message Service (MessageService.js)

If you need the angular and underscore.js libraries used in this example, just add the following to your app

Part 2 - Coming soon ... more complex example, custom error objects, global messages and scope specific messages

February 27, 2014

AngularJS - Best resources for learning ui-router

ui-router is an angular module that replaces the default routing mechanism. It is more flexible than the default and recommended by the AngularJS community. However it is still in active development

This is a collection of resources about ui-router, from simple to more complex.

ui-router project on git

Intro video to ui-router (5 mins)

Another intro video to ui-router (first 15 minutes).

A great article about ui-router (more indepth)

In-depth video about ui-router (50 min) + with

Related Resources

One way to setup authentication in AngularJS

Builds on the article above, but using ui-router

Video - Writing a Massive Angular App at Google NG Conf (good tips about authentication in the first part)

If you have additional suggestions, let me know and I will add them here.

March 15, 2013

You should update your TableSorter jQuery plugin

If you're still using the cool jQuery TableSorter plugin by Christian Bach, be advised that the last update to it was back in 2008 (version 2.0.8 as of today).

There is a newer forked version of Table Sorter on github, v2.7.x that seems to be maintained by someone else and up to date. Docs here.