{{ mainTitle }}

Getting started with {{app.name}} is easy. Whether you are a master of Sass, building a new app, or making your existing site responsive, we've got you covered.
Getting Started

What is {{app.name}}?

{{app.name}} is an advanced, responsive dashboard template built with AngularJS, the Superheroic JavaScript MVW Framework. This template is mobile friendly and ready for you to customize it any way you want to use it.

AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

Need more information? https://angularjs.org

Template Structure

This template has a fixed structure, including the following elements:

  • TopBar (Header)
  • Sidebar (with Main Navigation Menu)
  • Sliding Right Sidebar
  • Content
  • Footer
The Sidebar becomes a hidden Sliding Sidebar with a screen resolution of at least 992 pixels

Configurations

You need to have a basic knowledge of AngularJS and AngularUI Router to begin your project.

AngularUI Router is a routing framework for AngularJS, which allows you to organize the parts of your interface into a state machine. Unlike the $route service in the Angular ngRoute module, which is organized around URL routes, UI-Router is organized around states, which may optionally have routes, as well as other behavior, attached.

Check the official documentation .

Also, if you need to build a multi-language project, you need a basic knowledge of angular-translate.

angular-translate is an AngularJS module that makes your life much easier when it comes to i18n and l10n including lazy loading and pluralization.

Check the official documentation .

Local Development Web Server

Please put the files on a Server or on a Local Development Web Server to preview.

Then to access the preview, type in the address bar of the browser:

http://localhost/AngularJs-Admin/STANDARD/
http://localhost/AngularJs-Admin/RTL/

Build your project with grunt and manage dependencies with bower.

Grunt is a "JavaScript Task Runner". "Tasks" are small file operations that you might want to do as a front-end developer or designer when you build a website. For instance, once you are done programming your CSS you might want to concatenate all your files so that you only have one file to serve as you go live.

This is just one of many different tasks you can use Grunt for, but let's start at the beginning.

In order to install Grunt You need to install Node.js and npm first.

Grunt needs to be installed and run from the command line, but there are only a couple of very simple commands needed to do that. You won't have to learn how to be a command-line pro in order to use Grunt, all you need to know is to type a few words, or where to look to find the right command. You can also always come back to this guide at any time and copy and paste them.

Open the your project folder in the terminal

Once you have Node and npm installed open your terminal and change the directory to your project folder.

On the Mac you can just type 

cd

into the command line and then drag and drop the project folder on to the terminal window. This will add the path of the project directory next to the cd you just typed. Hit return and you have changed to your project folder.

On Windows you will have to open cmd.exe and then type in 

cd path\to\project\directory

and hit return to change into your project folder.

grunt-cli

In order to be able to run Grunt from the terminal you need to install a little tool called grunt-cli. "cli" stands for "comand line interface". This program only needs to be installed once. It is installed globally so it is available on your computer everywhere. grunt-cli is used to actually run the Grunt installation that we just installed in your project directory locally. This just means that each project can use a different version of Grunt locally without worry.

From the project's root folder type 

npm install -g grunt-cli

into the command line and hit return.

Installing Grunt plugins

Now we are going to install our Grunt plugins.

From the project's root folder type 

npm install

into the command line.

Using Bower

Bower is a package manager for client side technologies. It can be used to search , install, uninstall web assets like JavaScript, HTML, and CSS.

Of course, before we can actually use Bower, we’ll have to install it. This is easy. Use npm: 

npm install -g bower

In order to install all dependencies of Clip-Two, from the project's root folder type 

grunt bower-install-simple

into the command line.

Grunt Build Tool

This project supports build steps with Grunt. The supported Grunt tasks that this project ships with is:

  • Sass and Compass Compilation
  • Concatenate and minify js files.
  • Concatenate and minify css files.

To build your project, from the project's root folder type 

grunt build:standardversion

into the command line.

To build your RTL project, from the project's root folder type 

grunt build:rtlversion

into the command line.

Local Server Development

You need to run a Local Development Web Server to start correctly your Clip-Two project, because ng-view and ng-include make ajax requests to serve the template file

From the project's root folder type 

npm start

This will start a local server and open up your browser.

Now back to us.

Global App Scope

The first thing you need to do to customize this template is to define the information concerning your project.

Open main.js file (assets/js/main.js)

Change the Global App Scope according to your needs. More specifically you can set:

  • name (name of your project)
  • author (author's name or company name)
  • description (brief description of your project)
  • version (current version of your project)

Magically you will see significant changes in the template such as the title of the document, the logo, and copyright information in the footer.

Again in Global App Scope, ignoring the values of "year" and "isMobile" that are automatically setup, you can change the default layout as follows:

  • isNavbarFixed: true if you want to initialize the template with fixed header.
  • isSidebarFixed: true if you want to initialize the template with fixed sidebar.
  • isSidebarClosed: true if you want to initialize the template with closed sidebar.
  • isFooterFixed: true if you want to initialize the template with fixed footer.
  • theme: indicate the theme chosen for your project
  • logo (relative path of the project logo)
6 different color schemes are available on {{app.name}}. If you would like to set your favorite scheme, change the value of theme as follow:
  • theme-1
  • theme-2
  • theme-3
  • theme-4
  • theme-5
  • theme-6

Here is the code to setup 

// GLOBAL APP SCOPE
// set below basic information
$rootScope.app = {
	name: 'Clip-Two', // name of your project
	author: 'ClipTheme', // author's name or company name
	logo: 'assets/images/logo.png', // relative path of the project logo
	description: 'Angular Bootstrap Admin Template', // brief description
	version: '1.0', // current version
	year: ((new Date()).getFullYear()), // automatic current year (for copyright information)
	isMobile: (function() { // true if the browser is a mobile device
		var check = false;
		if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
			check = true;
		};
		return check;
	})(),
	layout: {
		isNavbarFixed: true, //true if you want to initialize the template with fixed header
		isSidebarFixed: true, // true if you want to initialize the template with fixed sidebar
		isSidebarClosed: false, // true if you want to initialize the template with closed sidebar
		isFooterFixed: false, // true if you want to initialize the template with fixed footer
		theme: 'theme-1' // indicate the theme chosen for your project
	},
	viewAnimation: 'ng-fadeInUp'
};

Configuring Main Navigation Menu

We now begin to customize the main navigation

(1) First, Open nav.html file (assets/views/partials/nav.html)

(2) Find ul with class .main-navigation-menu and change or add a menu item in the list as follows: 

<li ui-sref-active="active">
	<a ui-sref="app.dashboard">
		<div class="item-content">
			<div class="item-media">
				<i class="ti-home"></i>
			</div>
			<div class="item-inner">
				<span class="title"> Dashboard </span>
			</div>
		</div>
	</a>
</li>

(3) You'll notice we also added some links with ui-sref directives. In addition to managing state transitions, this directive auto-generates the href attribute of the <a /> element it's attached to, if the corresponding state has a URL.

You can also associate an icon to the link. Choose your favorite icon ( fontaweome or themify ) and place it inside the div with class .item-media

(4) Now Open config.router.js file (assets/js/config.router.js) for set up the states.

We'll wire it all up with $stateProvider. Set up your states in the module config, as in the following: 

$stateProvider.state('app', {
	url: "/app",
	templateUrl: "assets/views/app.html",
	abstract: true
}).state('app.dashboard', {
	url: "/dashboard",
	templateUrl: "assets/views/dashboard.html",
	title: 'Dashboard'
})

Go to Quick Start Plunker for Nested States & Views

Map of dependencies (Modules, Css, jQuery Plugins ecc.)

You can use resolve to provide your controller with content or data that is custom to the state. resolve is an optional map of dependencies which should be injected into the controller.

If any of these dependencies are promises, they will be resolved and converted to a value before the controller is instantiated and the $stateChangeSuccess event is fired.

Moreover, {{app.name}} uses the module oc.lazyLoad for load modules on demand (lazy load) in AngularJS.

But small steps.

First of all Open config.constant.js file (assets/js/config.constant.js)

Here we can register a constant service, ie the list of files (css, javascript, etc.) that will serve us as we go forward in the project.

Inside the constant JS_REQUIRES, is the object scripts that contains the name of the file or files (eg jQuery plugins) that we want to use in the project.

For example, if we want to use the plugin "Modernizr" add the following line of code, specifying the name of the plugin, and an array of associated files: 

scripts: {
	'modernizr': ['vendor/modernizr/modernizr.js']
}

Similarly, if we want to use an angularJS module, we will indicate in the array modules the name of the module (usually assigned by the author of the library) and its associated files: 

modules: [{
	name: 'toaster',
	files: ['vendor/toaster/toaster.js', 'vendor/toaster/toaster.css']
}]

Now we want to dynamically load them on-the-fly at runtime when we change states.

To do this, we use the function loadSequence() that generates a resolve object by passing script names previously configured in constant.JS_REQUIRES.

In file config.router.js we will match our resolve 

$stateProvider.state('app', {
	url: "/app",
	templateUrl: "assets/views/app.html",
	abstract: true 
}).state('app.dashboard', {
	url: "/dashboard",
	templateUrl: "assets/views/dashboard.html",
	resolve: loadSequence('modernizr', 'toaster'),
	title: 'Dashboard'
})

Breadcrumbs

{{app.name}} uses Angular-breadcrumb , a module for AngularJS, which generates a breadcrumb for any page of your application. It is strongly based on the ui-router framework and its hierarchical tree of states.

Define a ncyBreadcrumb.label property to each states: 

$stateProvider.state('app', {
	url: "/app",
	templateUrl: "assets/views/app.html",
	resolve: loadSequence('modernizr', 'toaster'),
	abstract: true
}).state('app.dashboard', {
	url: "/dashboard",
	templateUrl: "assets/views/dashboard.html",
	resolve: loadSequence('chartjs', 'tc.chartjs'),
	title: 'Dashboard',
	ncyBreadcrumb: {
		label: 'My Dashboard'
	}
})

Translate content

{{app.name}} uses angular-translate , an AngularJS module that makes your life much easier when it comes to i18n and l10n including lazy loading and pluralization.

The translate directive was used in this project in the following files:

  • top-navbar.html (assets/views/partials/top-navbar.html)
  • nav.html (assets/views/partials/nav.html)
  • footer.html (assets/views/partials/footer.html)
  • off-sidebar.html (assets/views/partials/off-sidebar.html)
  • in the main title (.mainTitle) of each page

You can find the main configuration in the file main.js (assets/js/main.js) in the $translateProvider method

In our case, we have translated part of the contents of {{app.name}} in three languages (English, German and Italian) creating json files in the folder i18n (assets/i18n).

You can edit these files to your liking, respecting the structure of your project.

If you need to add a new language, do the following:

(1) First, Create your json file (eg. es_Es.json) and put it in the folder i18n (assets/i18n)

(2) Open mainCtrl.js file (assets/js/controllers/mainCtrl.js)

(3) Find the scope language and edit the object available in this way: 

available: {
	'en': 'English',
	'it_IT': 'Italiano',
	'de_DE': 'Deutsch',
	'es_ES': 'Español'
},
{{app.name}} CSS

Getting Started With {{app.name}} CSS

{{app.name}} uses Bootstrap CSS that provides global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.

The Grid

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Column width Auto ~62px ~81px ~97px
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes
Example: Stacked-to-horizontal

Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
Example: Mobile and desktop

Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-*.col-md-* to your columns. See the example below for a better idea of how it all works.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
Example: Mobile, tablet, desktop

Build on the previous example by creating even more dynamic and powerful layouts with tablet .col-sm-* classes.

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
Offsetting columns

Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
Nesting columns

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

Level 1: .col-sm-9
Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6

CSS Utilities

In addition to the default bootstrap css, {{app.name}} includes classes that can help you speed up your development work

Margin
.no-marginmargin: 0
.margin-bottom-0margin-bottom: 0
.margin-bottom-5margin-bottom: 5px
.margin-bottom-10margin-bottom: 10px
.margin-bottom-15margin-bottom: 15px
.margin-bottom-20margin-bottom: 20px
.margin-bottom-25margin-bottom: 25px
.margin-bottom-30margin-bottom: 30px
.margin-top-0margin-top: 0
.margin-top-5margin-top: 5px
.margin-top-10margin-top: 10px
.margin-top-15margin-top: 15px
.margin-top-20margin-top: 20px
.margin-top-25margin-top: 25px
.margin-top-30margin-top: 30px
.margin-right-0margin-right: 0
.margin-right-5margin-right: 5px
.margin-right-10margin-right: 10px
.margin-right-15margin-right: 15px
.margin-right-20margin-right: 20px
.margin-right-25margin-right: 25px
.margin-right-30margin-right: 30px
.margin-left-0margin-left: 0
.margin-left-5margin-left: 5px
.margin-left-10margin-left: 10px
.margin-left-15margin-left: 15px
.margin-left-20margin-left: 20px
.margin-left-25margin-left: 25px
.margin-left-30margin-left: 30px
Padding
.no-paddingpadding: 0
.padding-bottom-0padding-bottom: 0
.padding-bottom-5padding-bottom: 5px
.padding-bottom-10padding-bottom: 10px
.padding-bottom-15padding-bottom: 15px
.padding-bottom-20padding-bottom: 20px
.padding-bottom-25padding-bottom: 25px
.padding-bottom-30padding-bottom: 30px
.padding-top-0padding-top: 0
.padding-top-5padding-top: 5px
.padding-top-10padding-top: 10px
.padding-top-15padding-top: 15px
.padding-top-20padding-top: 20px
.padding-top-25padding-top: 25px
.padding-top-30padding-top: 30px
.padding-right-0padding-right: 0
.padding-right-5padding-right: 5px
.padding-right-10padding-right: 10px
.padding-right-15padding-right: 15px
.padding-right-20padding-right: 20px
.padding-right-25padding-right: 25px
.padding-right-30padding-right: 30px
.padding-left-0padding-left: 0
.padding-left-5padding-left: 5px
.padding-left-10padding-left: 10px
.padding-left-15padding-left: 15px
.padding-left-20padding-left: 20px
.padding-left-25padding-left: 25px
.padding-left-30padding-left: 30px
Border
.no-borderborder: none
.border-rightborder-right-style: solid; border-right-width: 1px; border-color: inherit;
.border-leftborder-left-style: solid; border-left-width: 1px; border-color: inherit;
.border-topborder-top-style: solid; border-top-width: 1px; border-color: inherit;
.border-bottomborder-bottom-style: solid; border-bottom-width: 1px; border-color: inherit;
.border-light border-color: rgba(255, 255, 255, 0.2) (border with light color)
.border-darkborder-color: rgba(0, 0, 0, 0.2); (border with dark color)
Radius
.no-radius border-radius: 0
.radius-3border-radius: 3px;
.radius-5border-radius: 5px;
.radius-10border-radius: 10px;
Text
.text-boldfont-weight: bold;
.text-extra-smallfont-size: 11px
.text-smallfont-size: 12px
.text-extra-smallfont-size: 11px
.text-large font-size: 16px
.text-extra-largefont-size: 18px
.text-orangecolor: #f58a5c;
.text-greencolor: #1fbba6;
.text-bluecolor: #5f8295;
.text-pinkcolor: #dd5a82;
.text-purplecolor: #dd5a82;
.text-brickycolor: #894550;
.text-yellowcolor: #ffb848;
.text-redcolor: #e66b6b;
.text-whitecolor: white;
.text-darkcolor: rgba(44, 47, 59, 0.4);
.text-lightcolor: rgba(255, 255, 255, 0.6);
.text-lefttext-align: left;
.text-righttext-align: right;
.text-lightcolor: rgba(255, 255, 255, 0.6);
.text-lefttext-align: left;
Height
.height-155height: 155px
.height-180height: 180px
.height-200height: 200px
.height-230height: 230px
.height-250height: 250px
.height-270height: 270px
.height-300height: 300px
.height-350height: 350px
.min-height-155min-height: 155px
.min-height-180min-height: 180px
.min-height-200min-height: 200px
.min-height-230min-height: 230px
.min-height-250min-height: 250px
.min-height-270min-height: 270px
.min-height-300min-height: 300px
.min-height-350min-height: 350px
Generic Classes
.inlinedisplay: inline;
.blockdisplay: block;
.inline-blockdisplay: inline-block;
.no-displaydisplay: none;
.vertical-align-topvertical-align: top
.vertical-align-middlevertical-align: middle;
.vertical-align-bottomvertical-align: bottom;
.float-nonefloat: none;
.noTransform-o-transform: none -moz-transform: none -ms-transform: none -webkit-transform: none transform: none

Colors

You can use these colors to customize buttons, text, backgrounds and more.

Dark Primary
Primary
Light Primary
Dark Azure
Azure
Light Azure
Dark Blue
Blue
Light Blue
Dark Purple
Purple
Light Purple
Dark Red
Red
Light Red
Dark Bricky
Bricky
Light Bricky
Dark Orange
Orange
Light Orange
Dark Yellow
Yellow
Light Yellow
Dark Beige
Beige
Light Beige
Dark Green
Green
Light Green
Dark Grey
Grey
Light Grey
Info
Success
Warning
Danger
Components and Modules

Core Components

Some component is needed to provide services and directives that implement UI interactions with angular.

AngularUI Router

AngularUI Router is a routing framework for AngularJS, which allows you to organize the parts of your interface into a state machine. Unlike the $route service in the Angular ngRoute module, which is organized around URL routes, UI-Router is organized around states, which may optionally have routes, as well as other behavior, attached.

Official Documentation

ngStorage

An AngularJS module that makes Web Storage working in the Angular Way. Contains two services: $localStorage and $sessionStorage.

Official Documentation

UI Bootstrap

Bootstrap components written in pure AngularJS by the AngularUI Team

This repository contains a set of native AngularJS directives based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required.

Official Documentation

angular-translate

angular-translate is an AngularJS module that makes your life much easier when it comes to i18n and l10n including lazy loading and pluralization.

Official Documentation

ocLazyLoad

Load modules on demand (lazy load) in AngularJS

Official Documentation

ocLazyLoad

Load modules on demand (lazy load) in AngularJS

Official Documentation

angular-perfect-scrollbar

This is a small directive to allow the use of perfect-scrollbar in angular.

Official Documentation

Angular Loading Bar

An automatic loading bar using angular interceptors. It works automatically, so simply include it as a dependency and it will automatically display the progress of your $http requests.

Official Documentation

angular-scroll

Scrollspy, animated scrollTo and scroll events for angular.js

Official Documentation

angular-moment

AngularJS directive and filters for Moment.JS.

Official Documentation

Featured Components

AngularJS-Toaster

AngularJS Toaster is an AngularJS port of the toastr non-blocking notification jQuery library.

Official Documentation

ngSweetAlert

AngularJS wrapper for SweetAlert jQuery Plugin. Sweet Alert is a beautiful replacement for Javascript's "Alert".

Official Documentation

angular-ladda

An angular directive wrapper for Ladda jQuery Plugin.

Official Documentation

ng-table

Simple table with sorting and filtering on AngularJS.

Official Documentation

ui-select

AngularJS-native version of Select2 and Selectize.

Official Documentation

ui-calendar

A complete AngularJS directive for the Arshaw FullCalendar.

Official Documentation

v-accordion

AngularJS multi-level accordion.

Official Documentation

uiMask

A module from UI.Utils, Swiss-Army-Knife of AngularJS tools (with no external dependencies!).

Official Documentation

ngImgCrop

Simple Image Crop directive for AngularJS. Enables to crop a circle or a square out of an image.

Official Documentation

Angular File Upload

Angular File Upload is a module for the AngularJS framework. Supports drag-n-drop upload, upload progress, validation filters and a file upload queue. It supports native HTML5 uploads, but degrades to a legacy iframe upload method for older browsers. Works with any server side platform which supports standard HTML form uploads.

Official Documentation

ng-flow

Flow.js html5 file upload extension on angular.js framework

Official Documentation

angular-ui-switch

This is a simple iOS 7 style switch directive for AngularJS. You can use this module as you would use the default HTML checkbox input element. This is a super lightweight module and you can completely change the design using just CSS.

Official Documentation

angularjs-google-maps

The Simplest AngularJS Google Maps V3 Directive

Official Documentation

tc-angular-chartjs

Angular Directives for Chart.js jQuery plugin

Official Documentation

Angular Elastic

Elastic (autosize) textareas for AngularJS, without jQuery dependency.

Official Documentation

Angular Truncate

This project is a filter for Angularjs to truncate text strings to a set number of characters or words and add ellipses when needed.

Official Documentation

angular-aside

Off canvas side menu to use with ui-bootstrap. Extends ui-bootstrap's $modal provider.

Official Documentation

angular-bootstrap-slider

an angular directive for seiyria-bootstrap-slider.

Official Documentation

angular-bootstrap-nav-tree

This is a Tree directive for Angular JS apps that use Bootstrap CSS.

Official Documentation

angular-perfect-scrollbar

This is a small directive to allow the use of perfect-scrollbar in angular.

Use it wherever you want: 

<perfect-scrollbar class="scroller" wheel-propagation="true" wheel-speed="10" min-scrollbar-length="20">
// your content
</perfect-scrollbar>

Official Documentation

Angular-xeditable

Angular-xeditable is a bundle of AngularJS directives that allows you to create editable elements in your projects.

Official Documentation

Checklist-model

AngularJS directive for list of checkboxes

Official Documentation

Plugins

Modernizr

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

Official Documentation

Moment.js

Parse, validate, manipulate, and display dates in JavaScript.

Official Documentation

perfect-scrollbar

Tiny but perfect jQuery scrollbar plugin.

Official Documentation

Ladda

Buttons with built-in loading indicators.

Official Documentation

FullCalendar

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop event calendar like the one below. It uses AJAX to fetch events on-the-fly and is easily configured to use your own feed format. It is visually customizable with a rich API.

Official Documentation

Sweet Alert

A beautiful replacement for Javascript's "Alert"

Official Documentation

Chart.js

Simple, clean and engaging charts for designers and developers

Official Documentation

jQuery Sparklines

This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript. .

Official Documentation

AngularJS Directives

Directives

AngularJS lets you extend HTML with new attributes called Directives.

ctToggle

A simple but useful and efficient directive to toggle a class to an element.

See demo here

csSelect

Create a custom CSS3 Select Elements.

You must use it as a class.

Combined with the class .cs-skin-slide it creates a slide <select>

Combined with the class .cs-skin-elastic it creates an elastic <select>

ctDismiss

A directive used for "close buttons" (eg: alert box). It hides its parent node that has the class with the name of its value.

Try the example below:

Close Me!

ctPaneltool

Add several features to panels.

See demo here

offClick

It's like click, but when you don't click on your element.

The off-click attribute is the expression or function that will execute each time the user doesn't click on your element (or filter)
The optional off-click-filter attribute is a comma separated list of selectors that will not trigger off-click when they are clicked.
The optional off-click-if attribute is an expression that will determine if the off-click should trigger or not.

compareTo

Password-check directive.

You can use the directive inside of markup like so: 

<input type="password" name="confirmPassword" 
ng-model="registration.user.confirmPassword"
required
compare-to="registration.user.password" />

ctFullheight

Make div 100% height of browser window.

If you set the ct-fullheight directive with the value "window" you will force the element to be the same height of the page, otherwise, if you do not assign any valuethe element will adapt to the document.

The optional ct-fullheight-if attribute is an expression that will determine if the ct-fullheight should trigger or not.

The optional ct-fullheight-exclusion attribute is a comma separated list of selectors whose height must be excluded from the height of the page.

Chat

An AngularJS Chat Directive exclusively for Clip-Two

Put the following markup in your template: 

<clip-chat messages="chat" id-self="selfIdUser" id-other="otherIdUser"></clip-chat>

Insert wherever you want in your html a second directive for the entry messages bar: 

<chat-submit submit-function="sendMessage" ng-model="chatMessage" scroll-element="#chatBox"></chat-submit>

The scroll-element optional attribute is used to indicate the html element (eg. with overflow:auto) that encloses the messages and you want to slide down after insertion.

Enclose the two directives in a controller: 

<div class="col-md-6">
	<div ng-controller="ChatCtrl">
		<div id="scroller" style="height: 200px; overflow: auto">
			<clip-chat messages="chat" id-self="selfIdUser" id-other="otherIdUser"></clip-chat>
		</div>
		<chat-submit submit-function="sendMessage" ng-model="chatMessage" scroll-element="#scroller"></chat-submit>
	<div>
</div>

and this is an example of a controller: 

'use strict';
/**
 * controller for Messages
 */
app.controller('ChatCtrl', function($scope) {

	$scope.selfIdUser = 50223456;
	$scope.otherIdUser = 50223457;
	$scope.setOtherId = function(value) {
		
    	$scope.otherIdUser = value;
	};
	var exampleDate = new Date().setTime(new Date().getTime() - 240000 * 60);

	$scope.chat = [{
		"user": "Peter Clark",
		"avatar": "assets/images/avatar-1.jpg",
		"to": "Nicole Bell",
		"date": exampleDate,
		"content": "Hi, Nicole",
		"idUser": 50223456,
		"idOther": 50223457
	}, {
		"user": "Peter Clark",
		"avatar": "assets/images/avatar-1.jpg",
		"to": "Nicole Bell",
		"date": new Date(exampleDate).setTime(new Date(exampleDate).getTime() + 1000 * 60),
		"content": "How are you?",
		"idUser": 50223456,
		"idOther": 50223457
	}];

	
	$scope.sendMessage = function() {
		var newMessage = {
			"user": "Peter Clark",
			"avatar": "assets/images/avatar-1.jpg",
			"date": new Date(),
			"content": $scope.chatMessage,
			"idUser": $scope.selfIdUser,
			"idOther": $scope.otherIdUser
		};
		 $scope.chat.push(newMessage);
		 $scope.chatMessage = '';
		 
		 
	};
});
Changelog Entries

version 1.3 - Mar 26, 2015

  • NEW Grunt build steps

    Grunt is a "JavaScript Task Runner". "Tasks" are small file operations that you might want to do as a front-end developer or designer when you build a website. For instance, once you are done programming your CSS you might want to concatenate all your files so that you only have one file to serve as you go live.

  • NEW Bower dependency management

    Bower is a package manager for client side technologies. It can be used to search , install, uninstall web assets like JavaScript, HTML, and CSS.

  • UPGRADE Change folder name and references

    The folder "vendor", which contained all the dependencies, now called "bower_components"

  • UPGRADE AngularJS and Related Extras

    Version 1.3.15

  • FIXED Improvements & Minor Bug Fixes

version 1.2 - Mar 14, 2015

  • NEW HTML version

    Clip-Two HTML Version with Bootstrap 3 & jQuery View

  • NEW Right To Left HTML version

    Clip-Two HTML Version RTL with Bootstrap 3 & jQuery View

  • FIXED Improvements & Minor Bug Fixes

version 1.1 - Feb 25, 2015

  • NEW Chat Directive

    An AngularJS Chat Directive exclusively for Clip-Two
    N.b. for best performance from version 1.0 you must replace style.css (assets/css/style.css) and _chat.scsss (master/sass/partials/_chat.scsss)

    Open off-sidebar for demo and click a name in the list.

  • NEW RTL version of Clip-Two

    RTL is the writing system known as right-to-left (RTL) in which script runs from the right-hand side of a page and concludes on the left-hand side, such as in Arabic, Hebrew and Urdu. View

  • NEW X-Editable Elements

    Angular-xeditable is a bundle of AngularJS directives that allows you to create editable elements. Such technique is also known as click-to-edit or edit-in-place. View

  • UPGRADE AngularJS and Related Extras

    Version 1.3.13

  • UPGRADE UI Bootstrap

    Version 0.12.1

  • FIXED Mouse wheel scroll problem in IE

    From version 1.0 you must replace style.css (assets/css/style.css) and _top-navbar.scsss (master/sass/partials/layout-elements/_top-navbar.scsss)

  • FIXED Improvements & Minor Bug Fixes