DlhSoft Angular Directives

As previously announced, we’ve just released a set of AngularJS directives that allow developers to easily include DlhSoft Gantt Chart Hyper Library components into Angular applications:

index.html:

<script src=”scripts/angular.js”></script>
<script src=”DlhSoft.ProjectData.GanttChart.HTML.Controls.js”></script>
<script src=”DlhSoft.ProjectData.GanttChart.Angular.Directives.js”></script>
<script src=”app.js”></script>

[…]

<body ng-app=”GanttChartViewSample” ng-controller=”MainController”>
    […]
   
<ds:gantt-chart id=”ganttChartView”
                    items=”items” settings=”settings”
                    change=”itemPropertyChangeHandler”
                    auto-refresh=”{{ true }}”
                    style=”min-height: 240px”>…</ds:gantt-chart>
    […]
</body>

app.ts (TypeScript):

/// <reference path=’./DlhSoft.ProjectData.GanttChart.HTML.Controls.d.ts’/>
import GanttChartView = DlhSoft.Controls.GanttChartView;
import TaskItem = GanttChartView.Item;
import PredecessorItem = GanttChartView.PredecessorItem;

angular.module(“GanttChartViewSample”,
               [“DlhSoft.ProjectData.GanttChart.Directives”,
                “DlhSoft.ProjectData.PertChart.Directives”])
.controller(“MainController”, [“$scope”, function ($scope) {
    var items = <TaskItem[]>[
        { content: “Task 1”,
          start: new Date(2013, 8 – 1, 22, 08),
          finish: new Date(2013, 8 – 1, 23, 12),
          completedFinish: new Date(2013, 8 – 1, 22, 12),
          assignmentsContent: “Resource 1” },
        { content: “Task 2”,
          start: new Date(2013, 8 – 1, 23, 08),
          finish: new Date(2013, 8 – 1, 23, 16) }];
    items[1].predecessors = <PredecessorItem[]>[
        { item: items[0], dependencyType: “FS” }];
    $scope.items = items;

    // Prepare configuration settings.
    var settings = <GanttChartView.Settings>{
        currentTime: new Date(2013, 8 – 1, 22),
        areTaskDependencyConstraintsEnabled: true
    }
    $scope.settings = settings;

    // Set up event handlers.
    $scope.itemPropertyChangeHandler = function[…]

    […]
})];

Do you want to see all code and run the app? Download the complete sample application.

Advertisements

About DlhSoft Team

DlhSoft is a software development company focused on building high quality and innovative solutions using state-of-the-art technologies for customers worldwide. Our activity includes designing and developing general purpose software applications, components and tools, and customized software solutions upon request. DlhSoft team is highly experienced and fully dedicated to software development. Additionally, one of the most important things we rely on is the continuous communication with the customer.
This entry was posted in Development Components and tagged , . Bookmark the permalink.

Add a reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s