AngularJS: Example Card Configuration

Complete Example

See the Angular Example's main controller for a complete example.

Step-by-step

First, inject these dependencies into your module

app = angular.module('core', ['ngRoute', 'decksterjs'])

Then, if needed, configure the routing of the pop-out functionality in a configuration block

app.config(['$routeProvider', function($routeProvider) {

   // Configures the base URL for deckster pop-outs
   var popoutRoute = Deckster.getPopoutRoute('/deckster/');

   // Configures the pop-out base template
   $routeProvider.when(popoutRoute.fullPath, {
      templateUrl: 'partials/deckster-popout.html'
   });
 }]);

You will then need to configure the controller to have a Deckster deck. First, inject your needed Angular services:

app.controller('PageController', ['$scope', '$http', '$compile', '$timeout', function ($scope, $http, $compile, $timeout) {

Then, within the controller, set initialized to false and configure your deck. Here it is called 'mainDeck', but you may have multiple decks and name them as appropriate.

      $scope.initialized = false;
      $scope.mainDeck = { // the name "mainDeck" should be referenced in your decksterDeck directive.
        rootUrl: '#/deckster',
        // These are example option settings for gridster (see http://gridster.net/#documentation)
        gridsterOpts: {
          max_cols: 4,
          widget_margins: [10, 10],
          widget_base_dimensions: ['auto', 250], // define height of one "row"
          responsive_breakpoint: 850
        }
      };

Each card in your deck will need some way to acquire the data it should display. The following two functions are examples of how to retrieve a particular HTML partial. You can configure the cards to display a different partial depending on whether they are expanded ('details') or not ('summary'). Here those two are separated into two functions, both retrieving a sample HTML file that you may create.

    // Example configuration of how the content is fetched for the "summary" and "detailed" views of each card.
      var getSummaryTemplate = function(cardConfig, cb) {
        // Not using the cardConfig here but you could use it to make request
        $http.get('partials/testSummaryCard.html').success(function (html) {
          cb && cb($compile(html)($scope));
        });
      };
    
      var getDetailsTemplate = function(cardConfig, cb) {
        // Not using the cardConfig here but you could use it to make request
        $http.get('partials/testDetailsCard.html').success(function (html) {
          cb && cb($compile(html)($scope));
        });
      };

Then create your cards. Below is an example of a static array added to the cards field of your mainDeck object, but they can also be loaded from a server.

      $scope.mainDeck.cards = [
        {
          title: 'Photos', // display title
          id: 'photoCard',
          hasPopout: true, // whether pop-out button will appear on card
          // here we set the HTML fields to the functions we defined previously
          summaryContentHtml: getSummaryTemplate, // HTML to appear when not expanded
          detailsContentHtml: getDetailsTemplate, // HTML to appear when expanded
          position: { // produces a 1x1 card in the left-most corner
            size_x: 1,
            size_y: 1,
            col: 1,
            row: 1
          }
        },
        {
          title: 'Alerts',
          id: 'alertsCard',
          summaryContentHtml: getSummaryTemplate,
          detailsContentHtml: getDetailsTemplate,
          position: {
            size_x: 1,
            size_y: 2,
            col: 4,
            row: 1
          }
        },
        {
          title: 'Geospatial',
          id: 'mapCard',
          summaryContentHtml: getSummaryTemplate,
          detailsContentHtml: getDetailsTemplate,
          position: {
            size_x: 2,
            size_y: 2,
            col: 2,
            row: 1
          }
        },
        {
          title: 'Table Data',
          id: 'tableCard',
          summaryContentHtml: getSummaryTemplate,
          detailsContentHtml: getDetailsTemplate,
          position: {
            size_x: 1,
            size_y: 2,
            col: 1,
            row: 2
          }
        },
        {
          title: 'Timeline',
          id: 'timelineCard',
          summaryContentHtml: getSummaryTemplate,
          detailsContentHtml: getDetailsTemplate,
          position: {
            size_x: 3,
            size_y: 1,
            col: 2,
            row: 3
          }
        }
      ];

Once the cards are loaded (could be done in a async call) initialize the deck

  $timeout(function () {
    $scope.initialized = true;
  });

}]);