Admin.io

Angular js material admin theme

Thank you for buying the theme

Installation

Installing

To deloy the theme simply put the files into your webserver (ex : www.example.com) and navigate to it through the browser

Changing and deploying

The theme comes with grunt.js integration and bower so in order to have an optimised installation the recommended way is buy performing the grunt and bower tasks described bellow.

Development

For development purposed javascript files and css files will not be compressed in order to be able to debug and find easily where any issue is.

Testing

The theme contains a test grunt task using jshint to go trough the code and find possible issues with the code.

Production / Minified 

Minified task compresses css files, js files, compiles html templates in to javascript all in order to fully optimize the final application and make it as fast and reliable as possible.

 

Compiling the theme

To perform the grunt tasks you will need the following things installed in either your local maching (recommended) or on the webserver, depending where you are performing the tasks. For more information on grunt follow this link : http://gruntjs.com/

1 ) Install node.js on your maching. It provides also installations for all other platforms : http://nodejs.org/download/

On Ubuntu running the sudo apt-get install nodejs might run into problems as the version available in the package manager is not supported. For more info check : http://stackoverflow.com/questions/12913141/installing-from-npm-fails

2 ) Before setting up Grunt ensure that your npm is installed and up-to-date by running npm update -g npm (this might require sudo on certain systems). To install on linux you can run : sudo apt-get install npm

2 ) Install grunt Command line interface (CLI) by following : http://gruntjs.com/getting-started

3 ) make sure all packages are installed by running in your application root folder the following : sudo npm install

4 ) Enable all dependencies by running : bower install

5 ) Run the task you want :

This will compile  the scripts in the application (app, controllers, directives, services, all extra scripts like all the charting libraries etc) and put them into one single js file and one single css file inside the destination folder in this case "dist".

After that simply push your root files and the dist folder into the webserver and you are done! You have a full compressed and optimized site running.

Files contained in the compressed application : 

Problem while copying files

When copying the icons you might run into an issue where grunt is trying to open too many files (its a lot of images). You can run the command to Increase file limit size : ulimit -n 10240. Alternatively you can also copy the icons folder manually from the folder bower_components/material-design-icons. Make sure to copy all svg files into the same folder dist/img/icons

 

package.json - Development dependencies

In the file package.json are included the development dependencies, namely all the grunt modules to be able to run grunt to compile the theme. To instal the dependencies run npm install and this will install all the dependencies. 

To install a new dependency and save the dependency run the following command :

 

Bower.json - External dependencies

All dependenies are listed in the bower.json file. When running bower install all dependencies like jquery, angular, chartjs etc will be installed in the folder bower_components.

The following dependencies are included in the bower.json :

"dependencies": {
    "angular": "~1.3.13",
    "angular-animate": "~1.3.13",
    "angular-route": "~1.3.13",
    "underscore": "~1.8.1",
    "angular-wizard": "~0.4.2",
    "angular-ui-tree": "~2.2.0",
    "jquery": "~2.1.3",
    "bootstrap": "~3.2.0",
    "fontawesome": "~4.3.0",
    "jqvmap": "*",
    "weather-icons": "~1.3.2",
    "textAngular": "~1.3.7",
    "angular-sanitize": "~1.3.13",
    "angular-bootstrap": "~0.12.0",
    "chartjs": "~1.0.1",
    "morrisjs": "~0.5.1",
    "flot": "~0.8.3",
    "jquery.sparkline.build": "~2.1.3",
    "easypie": "~2.1.6",
    "slimScroll": "~1.3.3",
    "dripicons": "~1.0.0",
    "angular-material": "~0.8.3",
    "material-design-icons": "~1.0.1",
    "flot.curvedlines": "~1.1.1",
    "angular-messages": "~1.3.14"
  }

To include new dependencies run the following command to both install and save the dependency : 

Notes : 

Application Structure

The application is organized in a way that is easy to fnd and change any script, separating the logic on controllers, directives, services and external libraries as well as scss files.

The HTML templates are also separate using angular-route to map between templates for a more performant and clean structure. Next are described all parts of the application and what to find in each of these parts : 

 

index.html

Contians all  the main includes, the overall sctructure of the page. Here is where lies the main imports for javscript and css, font, and HTML dom representation. Templates of specific pages are not present here but imported using ng-include

Styles 

In this folder are included the stylesheets for the application. whenever you want to make changes to the style of the application you can make them here. These files are included to be compressed in the Gruntfile.js where they will be minified and compressed and imported into the "dist" folder.

Stylesheets are organized following the SMACSS structure to make it easier to find and manage a large CSS structure. CSS files are organizes in the following folders :

Scripts

In this folder are included all external libraries to be used by the theme.This folder does not contain app specific files but only external libraries. These files are included because they are either not available via bower or are being used in a very specific version.

Images

This is the folder where all images are stored. They are copied to the final dist folder by grunt tasks

Fonts

The fonts directory contains fonts for the application. The fonts included in this folder are the weather icons.

App

The app directory is where the Angular app resides. here are all the templates, directives, controllers,main app file and services. The app directory contains 4 javascript files : 

It also contains a "views" folder. This folder contains the templates for each view in the app. You can check which view corresponds to each path by  looking at the app .config method in the app.js file.

 

 

 

Material Angular JS Directives

Material Design for angular JS comes with a lot of very usefull directives. For a more detailed information check out the project page in https://material.angularjs.org/#/

Here I will give a little detail about the ones used in the template and how they are combined with the template files.

 

md-autocomplete

<md-autocomplete></md-autocomplete>

This is a special input component with a drop-down of all possible matches to a custom query. This component allows you to provide real-time suggestions as the user types in the input area.

Usage : 

<md-autocomplete md-selected-item="selectedItem" md-search-text="searchText" md-items="item in getMatches(searchText)" md-item-text="item.display">
  <span md-highlight-text="searchText">{{item.display}}</span>
</md-autocomplete>

An example of this element is presente in the Forms menu and you can find the code inside views/forms/elements.html

 

md-button

<md-button></md-button>

is a button directive with optional ink ripples (default enabled). If you supply a href or ng-href attribute, it will become an <a> element. Otherwise, it will become a <button> element.

Usage : 

<md-button>
  Button
</md-button>
<md-button href="http://google.com" class="md-button-colored">
  I'm a link
</md-button>
<md-button ng-disabled="true" class="md-colored">
  I'm a disabled button
</md-button>

Several example of buttons are present in the Ui elements -> buttons menu and you can find the code inside views/ui_elements/buttons.html

 

md-card

<md-card></md-card>

The md-card directive is a container element used within md-content containers. Cards have constant width and variable heights; where the maximum height is limited to what can fit within a single view on a platform, but it can temporarily expand as needed

Usage : 

<md-card>
 <img src="dist/images/bg_weather1.png" class="md-card-image">
 <h2>Paracosm</h2>
 <p>
   The titles of Washed Out's breakthrough song and the first single from Paracosm share the * two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
 </p>
</md-card>

Several example of cards are present in the Ui elements -> cards menu and you can find the code inside views/ui_elements/cards.html

 

md-checkbox

<md-checkbox></md-checkbox>

The checkbox directive is used like the normal angular checkbox. As per the material design spec the checkbox is in the accent color by default. The primary color palette may be used with the md-primary class.

Usage : 

<md-checkbox ng-model="isChecked" aria-label="Finished?">
  Finished ?
</md-checkbox>
<md-checkbox md-no-ink ng-model="hasInk" aria-label="No Ink Effects">
  No Ink Effects
</md-checkbox>
<md-checkbox ng-disabled="true" ng-model="isDisabled" aria-label="Disabled">
  Disabled
</md-checkbox>

Several example of checkboxes are present in the Forms elements-> Forms elements menu and you can find the code inside views/forms/elements.html

 

md-content

<md-content></md-content>

The directive is a container element useful for scrollable content

Restrictions : Add the md-padding class to make the content padded.

Usage : 

<md-content class="md-padding">
    Lorem ipsum dolor sit amet, ne quod novum mei.
</md-content>

Several example of md-content are present all across the site from the main page to each page on Ui elements and Forms. They serve as a wrapper for content.

 

md-icon

<md-icon></md-icon>

The md-icon directive is an markup element useful for showing an icon based on a font-face or a SVG. Both external SVGs (via URLs) or cached SVG from icon sets can be easily loaded and used.

Usage : 

<md-icon md-font-icon="android" alt="android "></md-icon>
<md-icon md-svg-icon="action:android" alt="android "></md-icon>
<md-icon md-svg-src="/android.svg" alt="android "></md-icon>
<md-icon md-svg-src="{{ getAndroid() }}" alt="android "></md-icon>

You can find examples of md-icon being used as well as docmentation from icon names in the menu item Ui elements -> Icons

 

md-input

<md-input></md-input>

Use the input or the textarea as a child of an md-input-container.

Usage : 

<md-input-container>
  <label>Color</label>
  <input type="text" ng-model="color" required md-maxlength="10">
</md-input-container>

You can find examples of md-input being used and also being used with error (using ngMessages module) in the menu item Form elements -> Form elements and you can find the code inside views/forms/elements.html

 

md-progress-circular

<md-progress-circular></md-progress-circular>

The circular progress directive is used to make loading content in your app as delightful and painless as possible by minimizing the amount of visual change a user sees before they can view and interact with content.

For operations where the percentage of the operation completed can be determined, use a determinate indicator. They give users a quick sense of how long an operation will take.

For operations where the user is asked to wait a moment while something finishes up, and it’s not necessary to expose what's happening behind the scenes and how long it will take, use an indeterminate indicator.

Usage : 

<md-progress-circular md-mode="determinate" value="..."></md-progress-circular>
<md-progress-circular md-mode="determinate" ng-value="..."></md-progress-circular>
<md-progress-circular md-mode="determinate" value="..." md-diameter="100"></md-progress-circular>
<md-progress-circular md-mode="indeterminate"></md-progress-circular>

You can find examples of md-progress-circular being used in the menu item Ui Elements -> Material Uiand you can find the code inside views/ui_elements/material.html

 

md-progress-linear

<md-progress-linear></md-progress-linear>

The linear progress directive is used to make loading content in your app as delightful and painless as possible by minimizing the amount of visual change a user sees before they can view and interact with content.

Each operation should only be represented by one activity indicator—for example, one refresh operation should not display both a refresh bar and an activity circle.

For operations where the percentage of the operation completed can be determined, use a determinate indicator. They give users a quick sense of how long an operation will take.

For operations where the user is asked to wait a moment while something finishes up, and it’s not necessary to expose what's happening behind the scenes and how long it will take, use an indeterminate indicator.

Usage : 

<md-progress-linear md-mode="determinate" value="..."></md-progress-linear>
<md-progress-linear md-mode="determinate" ng-value="..."></md-progress-linear>
<md-progress-linear md-mode="indeterminate"></md-progress-linear>
<md-progress-linear md-mode="buffer" value="..." md-buffer-value="..."></md-progress-linear>
<md-progress-linear md-mode="query"></md-progress-linear>

You can find examples of md-progress-linear being used in the menu item Ui Elements -> Material Uiand you can find the code inside views/ui_elements/material.html

 

md-radio-button

<md-radio-button></md-radio-button>

The md-radio-button directive is the child directive required to be used within elements. While similar to the input type="radio" ng-model="" value="" directive, the md-radio-button directive provides ink effects, ARIA support, and supports use within named radio groups.

<md-radio-button value="1" aria-label="Label 1">
  Label 1
</md-radio-button>
<md-radio-button ng-model="color" ng-value="specialValue" aria-label="Green">
  Green
</md-radio-button>

You can find examples of md-radio-button being used in the menu item  Form elements -> Form elements and you can find the code inside views/forms/elements.html

 

md-select

<md-select></md-select>

Displays a select box, bound to an ng-model.

<md-select ng-model="someModel" placeholder="Select a state">
  <md-option ng-value="opt" ng-repeat="opt in neighborhoods2">{{ opt }}</md-option>
</md-select>

You can find examples of md-select being used in the menu item  Form elements -> Form elements and you can find the code inside views/forms/elements.html

 

md-sidenav

<md-sidenav></md-sidenav>

A Sidenav component that can be opened and closed programatically. By default, upon opening it will slide out on top of the main content area.

Usage : 

<div layout="row" ng-controller="MyController">
  <md-sidenav md-component-id="left" class="md-sidenav-left">
    Left Nav!
  </md-sidenav>
  <md-content>
    Center Content
    <md-button ng-click="openLeftMenu()">
      Open Left Menu
    </md-button>
  </md-content>
  <md-sidenav md-component-id="right" md-is-locked-open="$mdMedia('min-width: 333px')" class="md-sidenav-right">
    Right Nav!
  </md-sidenav>
</div>
var app = angular.module('myApp', ['ngMaterial']);
app.controller('MyController', function($scope, $mdSidenav) {
  $scope.openLeftMenu = function() {
    $mdSidenav('left').toggle();
  };
});

You can find examples of md-sidenav being used in the menu item Ui Elements -> Material Uiand you can find the code inside views/ui_elements/material.html

 

md-slider

<md-slider></md-slider>

The component allows the user to choose from a range of values. As per the material design spec the slider is in the accent color by default.

The primary color palette may be used with the md-primary class. It has two modes: 'normal' mode, where the user slides between a wide range of values, and 'discrete' mode, where the user slides between only a few select values.

To enable discrete mode, add the md-discrete attribute to a slider, and use the step attribute to change the distance between values the user is allowed to pick.

Usage : 

<md-slider ng-model="myValue" min="5" max="500">
</md-slider>

You can find examples of md-slider being used in the menu item  Form elements -> Form elements and you can find the code inside views/forms/elements.html

 

md-switch

<md-switch></md-switch>

The switch is a style of checkbox usefull to simulate the mobile switch elements.

Usage : 

<md-switch ng-model="isActive" aria-label="Finished?">
  Finished ?
</md-switch>
<md-switch md-no-ink ng-model="hasInk" aria-label="No Ink Effects">
  No Ink Effects
</md-switch>
<md-switch ng-disabled="true" ng-model="isDisabled" aria-label="Disabled">
  Disabled
</md-switch>

You can find examples of md-switch being used in the menu item  Form elements -> Form elements and you can find the code inside views/forms/elements.html

 

md-tab

<md-tab></md-tab>

Use the md-tab a nested directive used within md-tabs to specify a tab with a label and optional view content. If the label attribute is not specified, then an optional md-tab-label tag can be used to specify more complex tab header markup.

If neither the label nor the md-tab-label are specified, then the nested markup of the md-tab is used as the tab header markup. If a tab label has been identified, then any non-md-tab-label markup will be considered tab content and will be transcluded to the internal div class="md-tabs-content" container.

This container is used by the TabsController to show/hide the active tab's content view. This synchronization is automatically managed by the internal TabsController whenever the tab selection changes.

Selection changes can be initiated via data binding changes, programmatic invocation, or user gestures.

Usage : 

<md-tab label disabled md-on-select md-on-deselect>
  <h3>My Tab content</h3>
</md-tab>
<md-tab>
  <md-tab-label>
    <h3>My Tab content</h3>
  </md-tab-label>
  <p>
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
    totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
    dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
    sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
  </p>
</md-tab>

You can find examples of md-tab being used in the menu item Ui Elements -> Material Uiand you can find the code inside views/ui_elements/material.html

 

md-toolbar

<md-toolbar></md-toolbar>

md-toolbar is used to place a toolbar in your app. Toolbars are usually used above a content area to display the title of the current page, and show relevant action buttons for that page. You can change the height of the toolbar by adding either the md-medium-tall or md-tall class to the toolbar.

Usage : 

<div layout="column" layout-fill>
  <md-toolbar>
    <div class="md-toolbar-tools">
      <span>My App's Title</span>
      <!-- fill up the space between left and right area -->
      <span flex></span>
      <md-button>
        Right Bar Button
      </md-button>
    </div>
  </md-toolbar>
  <md-content>
    Hello!
  </md-content>
</div>

You can find examples of md-toolbar being used in the menu item Ui Elements -> Material Uiand you can find the code inside views/ui_elements/material.html

 

 

md-tooltip

<md-tooltip></md-tooltip>

Tooltips are used to describe elements that are interactive and primarily graphical (not textual). Place a as a child of the element it describes. A tooltip will activate when the user focuses, hovers over, or touches the parent.

Usage : 

<md-icon icon="/img/icons/ic_play_arrow_24px.svg">
  <md-tooltip>
    Play Music
  </md-tooltip>
</md-icon>

You can find examples of md-tooltip being used in the menu item Ui Elements -> Material Uiand you can find the code inside views/ui_elements/material.html

Charts

The application includes different libraries to handle the charting and graphs. here will be explained each one and how they are built, how they can be changed or adapted.

 

Morris charts

Morris charts (http://morrisjs.github.io/morris.js/) is an excelent library for dynamic interactive charts. It contains different charts like : 

A special directive and controller was created for morris charts, it makes it very simple to include a chart in a view, provide the data from the controller and make it  rendered using a custom directive. The following sample displays a line morris chart :

 <div morris-chart data-data="simpleData" data-type="line" data-xkey="year" data-ykeys='["value"]' data labels='["Value"]' data-line-colors='["#2693E9"]' data-line-width="3"></div>

There are like mentioned different types of charts specified here in the data-type attribute : 

You can find information on the morris charts data in the controller morrisChartCtrl

 

Chart js

Chartjs (http://www.chartjs.org/) is a simple yet effective charting library, easy to use and  get started it provides different types of charts based on canvas. It does not provide interaction with the charts but provides a simple and clean way of representing easy data in several types of charts

A special directive and controller was created for chartjs, it makes it very simple to include a chart in a view, provide the data from the controller and make it  rendered using a custom directive. The following sample displays a line chartjs chart : 

<chart class="chartjs" data-data="chartjsBar" data-type="Bar" value="myChart"></chart>

In the example data is comming from the controller chartjsCtrl in the scope variable chartjsBar

 

Flot charts

Flotcharts (http://www.flotcharts.org/) is a very complete charting library. it provides simple interactions with the chartings, and very different options and customizations to the charts. There are different types of flotcharts : 

In the theme a directive and a controller was created for the flotcharts. The following example represents a chart where data is comming from  the flotchart controller and displayed in the flotchart custom directive : 

 <div data-flot-chart data-data="line1.data" data-options="line1.options" style="width: 100%; height: 300px;"></div>

In the example data is comming from the controller flotChartCtrl in the scope variable line1.data

 

Easypiecharts

Easypiecharts (https://github.com/rendro/easy-pie-chart/) provides a way "to draw simple, animated pie charts for single values". It is a simple representation of simple data in a very attractive way and easy to build.

In the theme there is a custom directive and a controller to build easypiecharts like in the following example :

<div easypiechart options="easypie1.options" percent="easypie1.percent" class="easypiechart">
      <span class="pie-percent" ng-bind="easypie1.percent"></span>
</div>
In the example data is comming from the controller chartingCtrl in the scope variable easypie1. It also contains a number in the middle wich will be the value represented in the center of the chart.
 

Gauge charts

Gauge charts are a type of chart that can represent a percentage as a means of how much is reached. In the theme a custom directive and a controller are included to represent gauge charts.
 
In the next example we can see how to build a gauge chart with the custom directive : 
 
<canvas data-gauge-chart data-gauge-data="gauge1.gaugeData" data-gauge-options="gauge1.gaugeOptions" style="width: 220px; height: 110px; "></canvas>
In the example data is comming from the controller gaugeCtrl in the scope variable gauge1.
 

Sparkline

Sparkline is a library for making small inline charts with data provided in the HTML element or via javascript. It has different types of charts and represents them a small sized elements that can be usefull to several widgets.
 
The following example shows how to build a sparkline chart : 
 
<span data-sparkline data-spark-data="simpleChart1.sparkData" data-spark-options="simpleChart1.sparkOptions"></span>
In the example data is comming from the controller sparklineCtrl in the scope variable simpleChart1.
 

CSS Files

In the theme there are several SCSS files inside the "styles" folder. These files are organized as mention in the first chapter in the following folders :

All these files are compiled into the styles.scss file inside the styles folder and copied with grunt into the dist folder (minimized application).

If you would like to edit a specific section of the site, simply find the appropriate CSS file as explained in the file styes.scss and then scroll down until you find the appropriate style that needs to be edited. For example for changing the default button style : 

/* Contains all buttons styling, including Angular Material design buttons md-button */
@import "base/buttons";
...
The theme uses bootstrap as well as Material design specific CSS for angularJs.
 
For more information on bootstrap see http://getbootstrap.com/ and https://material.angularjs.org/#/
 
 

Icons

The theme includes different libraries for displaying icons. You can find these libraries inside  the "fonts" folder in the themes root folder.

Material design icon set

Material design icons included with the Material design framework by google. Find more in https://github.com/google/material-design-icons

Glyphicons

The theme includes the glyphicons from bootstrap css for Icon. You can include icons anywhere on the template choosing from the different icons of bootstrap.

<span class="glyphicon glyphicon-asterisk"></span>

You can find all the icons in http://getbootstrap.com/components/

 

Weather icons

For displaying weather icons the API from http://erikflowers.github.io/weather-icons/ is used. It is a simple easy to use icon font generator that simillar to font awesome displays icons based on a <i> tag.

<i class="wi-day-cloudy-gusts"></i>

You can find all the icons in http://erikflowers.github.io/weather-icons/

 

Font awesome

The theme includes the fontawesome library for Icon generation. You can include icons anywhere on the template choosing from the great API that is fontawesome.  

To include an icon on a page simply add the following class elements to a i tag code (eg: facebook icon)   :           

<i class="fa fa-facebook fa-2x"></i>

For more information on the API see http://fortawesome.github.io/Font-Awesome/

Additional Angular scripts

Angular Bootstrap UI

The theme includes the angular bootstrap ui script. This script provides a lot of functionalities through custom directives and controllers that make it incredibely easy to make use of a lot of elements like : 

All  this and full documentation for how to use them can be found in http://angular-ui.github.io/bootstrap/

 

App todo

A todo list is something simple, yet very usefull. The admin theme includes a todo list that is saved on the browser cookies. This makes for a simple solution that can handle your everyday todo's in a easy and fast way. It is integrated with toastr for notifications via the service.js file in the app directory.

This todo list is brought throug the script available in https://github.com/1JS/App-todo

You can find the todo in the views folder of the app under "tasks" -> tasks.html. The controller associated with this is the taskCtrl pesent in the file controllers.js

 

Nested lists / Angular Ui Tree

The nested lists is a code sample from https://github.com/JimLiu/angular-ui-tree

It provides a easy way to organize lists inside of eachother, and attaching events to the js code you can actually perform tasks when a list is put inside another.

Here is sample of the HTML in the file nested-lists.html where a controller TreeDemoCtrl is providing the data and populating the tree that is using a template file (also present in this file) to render the HTML.

<div class="page" data-ng-controller="TreeDemoCtrl">
    <div class="row">
        <div class="col-md-12">
            <section class="panel panel-default">
                <div class="panel-heading"><strong><i class="fa fa-list panel-ico"></i>Nested Lists</strong></div>
                <div class="panel-body">
                    <div ui-tree="options">
                        <ol ui-tree-nodes ng-model="list" >
                            <li ng-repeat="item in list" ui-tree-node ng-include="'items_renderer.html'"></li>
                        </ol>
                    </div>
                </div>
            </section> 
        </div>
    </div>
...

 

 

Credits

The following scripts and frameworks where used in the development of this theme : 

 

The following sites where used to get images for the demo of the theme