Skip to content

AngularJS: How to Add a Deckster Deck to Your Project

Jump to bottom
fhawkes edited this page Aug 24, 2016 · 7 revisions

Step-by-step instructions to add a Deckster dashboard to an Angular app:

  1. Install DecksterJS:

    Bower

    $ bower install --save https://github.com/DecksterTeam/DecksterJS.git

    A jQuery, bootstrap-css-only, Gridster.js, and spin.js will be installed as dependencies automatically. If it doesn't install them automatically, install them manually.

    $ bower install --save jquery#~1.11.2
$ bower install --save bootstrap-css-only#~3.3.2
$ bower install --save https://github.com/DecksterTeam/gridster.js.git#~0.6.5
$ bower install --save spin.js

    Add the css dependencies to the <head> section of your main html file (index.html)

    <link rel="stylesheet" href="bower_components/bootstrap-css-only/css/bootstrap.min.css">
<link rel="stylesheet" href="bower_components/gridster/dist/jquery.gridster.css">
<link rel="stylesheet" href="bower_components/decksterjs/dist/jquery.deckster.css">

    Append the css dependencies to the bottom of <body> section of your main html file (index.html)

    <script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/gridster/dist/jquery.gridster.js"></script>
<script src="bower_components/decksterjs/dist/jquery.deckster.js"></script>

  2. Configure three Deckster directives, one for the deck as a whole, one for a card, and one for the pop-out (if desired).

  3. Configure your deck in the relevant controller and add content to those cards.

  4. Finally, place the <deckster-deck></deckster-deck> directive tag into the HTML where you want the deck to appear. This example will show the deck called 'mainDeck', but only if the deck itself has been initialized within the controller:

<deckster-deck deck="mainDeck" initialized="initialized" ng-if="initialized"></deckster-deck>
Clone this wiki locally