- Notifications
You must be signed in to change notification settings - Fork433
Getting started
The adf consists of 3 parts:
- The framework itself
- Structures
- and widgets
To get started you need the framework, at least one structure and at least one widget.
The framework contains the services and directives to render the dashboard. The dashboard can be installed with bower, just execute the following command:
bower install angular-dashboard-framework --save
Include the framework and its dependencies in your index.html:
<!-- styles --><linkhref="bower_components/bootstrap/dist/css/bootstrap.min.css"rel="stylesheet"><linkhref="bower_components/angular-dashboard-framework/dist/angular-dashboard-framework.min.css"rel="stylesheet"><!-- scripts --><scripttype="text/javascript"src="bower_components/angular/angular.js"></script><scripttype="text/javascript"src="bower_components/Sortable/Sortable.js"></script><scripttype="text/javascript"src="bower_components/angular-bootstrap/ui-bootstrap.js"></script><scripttype="text/javascript"src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script><scripttype="text/javascript"src="bower_components/angular-dashboard-framework/dist/angular-dashboard-framework.js"></script><scripttype="text/javascript"src="bower_components/angular-dashboard-framework/dist/angular-dashboard-framework-tpls.js"></script>
Add the adf module to the list of your required angular modules:
angular.module('sample',['adf']);
Structures are sets of rows and columns, they describe how the widgets are placed on the dashboard. You could write your own structures or you can use the existingstructure base package.
Install the base package with bower:
bower install adf-structures-base --save
Include it in your index.html:
<scripttype="text/javascript"src="bower_components/adf-structures-base/dist/adf-structures-base.min.js"></script>
Add the dependency to your module:
angular.module('sample',['adf','adf.structures.base']);
The other option is to define your own structures. The following example defines a structure with one row and two columns with the same size:
angular.module('sample',['adf']).config(function(dashboardProvider){dashboardProvider.structure('6-6',{rows:[{columns:[{styleClass:'col-md-6'},{styleClass:'col-md-6'}]}]});});
The widgets are the content of the dashboard, they can render any type of content. You can choose your widgets from theset of existing widgets or you can write your own.
Install widget with bower:
bower install adf-widget-clock --save
Include it and its dependencies in your index.html:
<linkhref="bower_components/adf-widget-clock/dist/adf-widget-clock.min.css"rel="stylesheet"><scripttype="text/javascript"src="bower_components/moment/moment.js"></script><scripttype="text/javascript"src="bower_components/adf-widget-clock/dist/adf-widget-clock.min.js"></script>
Add the dependency to your angular module:
angular.module('sample',['adf','adf.structures.base','adf.widget.clock']);
The simplest way to build your own widget is the use of theadf-widget yeoman generator.
<adf-dashboardname="mydashboard"collapsible="true"structure="6-6"adf-model="model"/>