Awesome Dash - Angular JS: Raj Thilak - Platform en Gineer Megam Systems

s
J
r
a
l
u
g
n
A
h
s
a
D
e
m
o
s
e
w
A
Engineer
rm
o
tf
la
P
k
a
il
h
T
j
a
R
m.com
ga
e
m
o
.g
w
w
/w
:/
tp
Megam Systems ht
rajthilak@megam.co
.in
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.
Well cover
Angular JS
o
Setup in Rails
Basics (directives, controllers)

Our Experience in Building ..
o
o
Dash for Metrics/Monitoring

Stream Realtime Logs
)
s
l
i
a
R
n
i
p
u
t
e
S
Angular JS (
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/vendor/
assets/javascripts
T
O
N
s
i
S
J
r
a
l
Angu
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).
Main Concepts
Model
- application data
View
- what the user sees
Controller
- application behavior
Scope
- glue between application data and behavior
- angular namespace
Module
- congures the injector
Injector - assembles the application
Dashboard Flow
Angularjs
Directives
Rails
Templates
/widgets
Controller
Widgets
Model
Controller
Action to route
View
Router (app.js)
Steps.
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.
Steps...
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.
app.js
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">
Dashboard view
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 %>
s
j
.
p
p
a
n
i
g
n
i
t
u
Setup ro
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.
.
.
.
o
f
n
i
e
r
o
m
r
Fo
http://www.gomegam.com
https://www.megam.co
code : https://github.com/megamsys/nilavu.git
email : rajthilak@megam.co.in
twitter:@megamsystems

Awesome Dash - Angular JS: Raj Thilak - Platform en Gineer Megam Systems

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Awesome Dash - Angular JS: Raj Thilak - Platform en Gineer Megam Systems

Uploaded by

Copyright:

Available Formats

s

Basics (directives, controllers)

Dash for Metrics/Monitoring

If you desire to require (*optional) Angular files, you

Option#2: Explicitly download angular.js

- what the user sees

- glue between application data and behavior

- congures the injector

Injector - assembles the application

Declare Megam - an angular module.

The above sets a route for /dashboards to DashboardShowCtrl controller

Setup angularjs dashboard controller:

Setup Rails Dashboards controller:

Setup dashboard service:

Setup widget service:

Setup dashboard template:

DashController in Rails will render the above template.

Setup widget controller:

Setup widget template:

Setup dashboard directive:

widgetpernode directive, renders using angularjs WidgetCtrl and templateUrl :

You might also like