Building a dashboard using AngularJS

AngularJS is a Javascript MVC framework created by
Google to build properly architectured and maintainable
web applications.
Focus more on HTML side of web apps.

● Angular JS
o Setup in Rails
● Basics (directives, controllers)
● Our Experience in Building ..
o Dash for Metrics/Monitoring
o Stream Realtime Logs

Option #1: Via Gem file
Add the following to your Gemfile:
gem 'angularjs-rails'
Add the following directive to your JavaScript manifest
file (application.js):
//= require angular

If you desire to require (*optional) Angular files, you
may include them as well in your JavaScript manifest
file (application.js). For example:
//= require angular-animate
//= require angular-resource

Option#2: Explicitly download angular.js
Download here
Put angular.js file in your “/vendor/assets/javascripts/”
path.
eg:https://github.com/megamsys/nilavu/tree/master/ve
ndor/assets/javascripts

is NOT a JavaScript library (As they say). There are no
functions which we can be directly called and used.
is NOT a DOM manipulation library like jQuery. But it uses
subset of jQuery for DOM manipulation (called jqLite).

Model - application data
View - what the user sees
Controller - application behavior

Scope - glue between application data and
behavior
$ - angular namespace
Module - configures the injector
Injector - assembles the application

Angularjs
Directives Templates
Controller
Router (app.js)
Rails
Controller
Model
View
Action to route
Widgets
/widgets

1. When an action is performed in rails dashboard view
page that action will be handled by the Angularjs router.
2./dashboards angularjs controllers is called which calls
the rails controller for widgets.

3. When rails controller receives the request from
angularjs controller(/dashboard) via a rest call, it loads
all the widget names stored in a rails model.
4. The templates for each of the widgets in angularjs are
rendered by angularjs dashboard controller and a final
rails view page is shown to the user.

Create app.js in your assets folder.
angular.module('Megam', [ "ngResource", "ngRoute",ngAnimate" ]);
Declare “Megam” - an angular module.
We bootstrap the “Megam” module in our WebApp in
index.html.erb using <html ng-app="Megam">

Create dashboard view page :
An user clicks an action “/dashboards/:id” path from a Rails:Dashboards
Controller.
<%= link_to dashboard_path(one_app_service.id), :class=>"btn
btn-primary btn-lg active", :id =>id="popover_dashboard_monitor",
:target => "_blank" do %> Monitor <% end %>

Route for /dashboards/:id
app.config([ "$routeProvider", "$locationProvider",
function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when("/dashboards/:id", {
templateUrl :
'angular/templates/dashboards/show.html.erb',
controller : "DashboardShowCtrl"
});
} ]);
● The above sets a route for /dashboards to “DashboardShowCtrl” controller

Setup angularjs dashboard controller:
app.controller("DashboardShowCtrl", ["$scope", "$routeParams", "Dashboard", "Widget",
function($scope, $routeParams, Dashboard, Widget) {
$scope.dashboard = Dashboard.get({ id: $routeParams.id });
$scope.widgets = Widget.query({ dashboard_id: $routeParams.id }, function() {
$rootScope.resolved = true;
});
}
● The Dashboard.get loads the current dashboard from Rails
● Using the dashboard_id from above, the Widget.query method sends a rest api call to Rails
controller for get all widgets for the dashboard_id
● The parameters “Dashboard” and “Widget” are Angularjs services.

Setup Rails Dashboards controller:
module Api
class DashboardsController
respond_to :json
def index
@user_id = current_user.id
dashboards = current_user.apps
respond_with dashboards
end
end
end
● The rails dashboards controller loads all stored widgets from the model and sends a response
to angularjs dashboard controller.

Setup dashboard service:
app.factory("Dashboard", ["$resource", function($resource) {
return $resource("/api/dashboards/:id.json", { id: "@id" },
{
'show': { method: 'GET', isArray: false }
});
}]);
● This call the /api/dashboards/ url of the rails controller where the dashboard model (state),
eg: how will my dashboard view look like ? is loaded.

Setup widget service:
app.factory("Widget", ["$resource", function($resource) {
return $resource("/api/dashboards/:dashboard_id/widgets/:id.json", { id: "@id", dashboard_id:
"@dashboard_id" },
{
'index': { method: 'GET', isArray: true },
'show': { method: 'GET', isArray: false },
}
);
}]);
● This calls the /api/dashboards/:dashboard_id/widgets/id url of the rails controller where the
widgets in the dashboard model (state), eg: how will my widgets in dashboard view look like ?
is loaded.

Setup dashboard template:
<div id="content-header" class="mini">
<ul class="mini-stats box-3">
<li class="widget" ng-repeat="widget in widgets" widgetpernode></li>
</ul>
</div>
● DashController in Rails will render the above template.
● All the widgets will be shown in this template. The “widgetpernode” is an angularjs directive of
widget.
● The “ng-repeat="widget in widgets”” is equivalent to for loop, widgets contains list of
widgets.

Setup widget controller:
app.controller("WidgetCtrl", ["$scope", function($scope) {
//graph : draws a running graph
}]);
The widget controller set actions for single widget, For eg: to draw a graph in widget to be put the
following code
var plot1 =
$.plot("#cpu_system_graph",FlotrGraphHelper.transformSeriesOfDatapoints(cpu_system_data,
scope.widget, currentColors), FlotrGraphHelper.defaultOptions(scope.widget, "cpu_system"));
plot1.setData(FlotrGraphHelper.transformSeriesOfDatapoints(cpu_system_data, scope.widget,
currentColors));
plot1.draw();

Setup widget template:
<div class="row">
<div class="col-xs-11 col-sm-11 col-md-11">
<h1><small>CPU Usage </small></h1>
<div id="cpu_system_graph"></div>
</div>
</div>
● The widget controller rendered this widget template and draw the graph into the
“cpu_system_graph” location.

Setup dashboard directive:
app.directive("widgetpernode", ["$compile", function($compile) {
var linkFn = function(scope, element, attrs) {
var elm = element.find(".widget_content");
elm.append('<div '+ scope.widget.name + ' />');
$compile(elm)(scope);
};
return {
controller: "WidgetCtrl",
templateUrl: 'angular/templates/widget/show.html.erb',
link: linkFn
};
}]);
● widgetpernode directive, renders using angularjs WidgetCtrl and templateUrl :
angular/templates/widgets/show.html.erb.

http://www.gomegam.com
https://www.megam.co
code : https://github.com/megamsys/nilavu.git
email : rajthilak@megam.co.in
twitter:@megamsystems

Building a dashboard using AngularJS

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Building a dashboard using AngularJS

Similar to Building a dashboard using AngularJS (20)

Recently uploaded

Recently uploaded (20)

Building a dashboard using AngularJS