Using AngularJS Library for Monitoring or Dashboard Pages

Question

I am planning to develop my monitoring/dashboard pages for hardware devices like Cisco router/switch/controller using Angular JS Library.

My page contains graphs(line & area), Google maps, tables and some blocks (div with value)

1. Is it feasible to use Angular for monitoring data?
2. What are the advantages we can get by using Angular? since it is only monitoring we don't have to use 2 way binding.

I am looking for few points to justify why we need angularJS for monitoring/dashboard kind of pages rather than JQuery/Javascript.

Please let me know your thoughts and comments.

Thanks.

Answer 1

Using AngularJS is totally feasible. Main advantages is that charts can be implemented as reusable components (AngularJS directives).

There is a project in development that allows building dashboard from arbitrary directives

Running Demo http://nickholub.github.io/angular-dashboard-app

Demo source code https://github.com/nickholub/angular-dashboard-app

Dashboard directive itself https://github.com/nickholub/angular-ui-dashboard

And here is example of visualizing data coming from WebSocket https://github.com/nickholub/angular-real-time-charts

Answer 2

If your site is 100% static - and by that I mean that you do a request for a status page, and the page you get will never change before you do a new request - then angular might be a little unnecessary.

But if you want your status page to 'live', you could use socket.io to push new events and data to the client and let angular take care of the ui refresh.

There are some angular directives to work with graphs, but I have no experience using them.

Some pointers:

• Node.js + socket.io + angular.js:
  http://www.html5rocks.com/en/tutorials/frameworks/angular-websockets/
• angular.js + charts: http://ngmodules.org/tags/charts