jQueryGantt Package使用教程： 角度样本

jQuery Gantt Package是一个真正的跨平台，基于HTML5 / jQuery的本地实现，具有2个不同的gantt小部件，可满足您所有基于gantt的可视化需求。还带有ASP.NET WebControl和MVC扩展，可轻松集成到现有应用中。

jQuery Gantt Package试用版

角度样本

您可以在以下路径中找到Angular Samples，

<安装路径> / PlatformSamples / AngularSamples / app / Samples

注意：您还可以在以下路径中找到可选的VisulStudio项目或Angular解决方案

<安装路径> /PlatformSamples/AngularSamples/Angular4DemoVS2015.csproj

1）如何运行Angular示例

您可以使用NPM（cmd），Visual Studio 2015+版本或Visual Studio Code运行Angular Gantt示例。对于所有这三种方法，您需要首先使用npm来安装从属的“ node_modules”，如以下步骤中所述。 （已经在“ package.json”文件中指定了“ node_modules”软件包依赖项。）

另外，请确保将您的npm版本更新为5.4.1或更高版本。 （使用“ npm版本”来确定您的版本）。要更新到最新版本，请使用cmd行：“ npm install npm @ latest -g”。

使用NPM运行Angular示例的步骤：

1. 使用“以管理员身份运行”选项，在命令提示符下浏览到项目目录（../PlatformSamples/AngularSamples）。
2. 键入“ npm install”。这会将不同的从属模块安装在“ node_modules”目录中。
3. 运行“ npm start”。
4. 该示例自动在默认浏览器中运行。如果不是，请复制本地主机并将其粘贴到浏览器中。

使用Visual Studio 2015+运行Angular示例的步骤：

1. 安装“ node_modules”软件包（上述NPM步骤中的步骤1和步骤2）
2. 然后从项目目录中使用Visual Studio 2015和更高版本打开“ .csproj”，然后照常运行。

使用Visual Studio Code运行Angular示例的步骤：

1. 打开Visual Studio Code IDE
2. 使用File-> Open Folder导入Angular gantt项目
3. 使用视图->集成终端打开命令窗口，然后选择终端标签。
4. 然后按照上述NPM步骤执行步骤2至4。

2）角甘特结构与安装

Angular Gantt软件包v4.0在<安装路径> / PlatformSamples / AngularSamples中可用

该平台仅包含构建和运行基本Angular示例所需的文件和文件夹。

创建项目目录并根据需要对其进行结构化。我们看起来像这样

Angular Gantt文件可以列出如下。

• package.json
• index.html
• ts文件夹
• 应用文件夹

package.json

“ package.json”文件指定了项目名称，描述，服务器，还包含可以在npm安装期间安装的Angular必需软件包（如下所述）。

该JSON文件还包含诸如angular-cli，打字稿，在’devDependencies’下键入的包。在这里，用户还可以根据他们的项目需求添加一些其他软件包。

index.html

“ index.html”包含所有甘特图源引用。它具有根标签，其根标签的名称为“ ”，该根标签可通过导出类进行检测，以查找该样品属于GanttControl还是FlexyGantt。并且请确保注释除之外的其他可用根标记。

‘ts’文件夹

由于Angular gantt基于TypeScript，因此在此“ ts”文件夹中可以使用诸如datejs.d.ts，jquery.d.ts，RadiantQGantt_TS2.3.d.ts等TypeScript声明文件。

“ app”文件夹

“ app”文件夹由main.ts和Samples文件夹组成。

以下文件和目录在此“ app”和“ Samples”文件夹中可用。

• Samples folder        –
• main.ts
• SampleBrowser folder

-main.ts

“ main.ts”导入角度组件，例如BrowserModule，platformBrowserDynamic等，以及甘特类。

我们的甘特图导出类的声明使用’@NgModule（{}）’装饰器进行。并且它还会引导导出类“ RQGanttSample”。

在这里，用户还可以使用方法’enableProdMode（）’启用生产模式

import { enableProdMode } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { Http, Response, HttpModule, JsonpModule } from '@angular/http';import { NgModule } from '@angular/core';import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';import { Routes, RouterModule } from '@angular/router';// RadiantQ components.import { DataService } from './data.service';import { RQGanttControl, RQFlexyGantt, Column, getClientTemplate, getClientEditorTemplate, rqTemplateBinder, getTaskItemTemplate, getParentTaskItemTemplate } from './RQGanttSettings';import { SampleBrowser } from './SampleBrowser/SampleBrowser';import { FlexyGanttSkeleton } from './Samples/FlexyGanttSkeleton/FlexyGanttSkeleton';import { GanttControlSkeleton } from './Samples/GanttControlSkeleton/GanttControlSkeleton';import { GanttControlCustomDataBinding } from './Samples/GanttControlCustomDataBinding/GanttControlCustomDataBinding';import { ResourceLoadView } from './Samples/ResourceLoadView/ResourceLoadView';// Route config let's you map routes to componentsconst routes = [    {       path: 'GanttControlCustomDataBinding',        component: GanttControlCustomDataBinding    },    {        path: 'GanttControlSkeleton',        component: GanttControlSkeleton    },    {        path: 'FlexyGanttSkeleton',        component: FlexyGanttSkeleton    },    {        path: 'ResourceLoadView',        component: ResourceLoadView    },    {        path: '',        redirectTo: '/GanttControlCustomDataBinding',        pathMatch: 'full'    }];export const appRouterModule = RouterModule.forRoot(routes, { useHash: true}); // 'useHash' - To avoid 404 error while manually refeshing URL.//enableProdMode();@NgModule(    imports: [        BrowserModule,        HttpModule,        JsonpModule,        appRouterModule    ],    declarations: [        getParentTaskItemTemplate,        getTaskItemTemplate,        getClientTemplate,        getClientEditorTemplate,        rqTemplateBinder,        Column,        RQFlexyGantt,        RQGanttControl,        ResourceLoadView,        GanttControlCustomDataBinding,        GanttControlSkeleton,        FlexyGanttSkeleton,        SampleBrowser    ],    providers: [DataService],    bootstrap: [SampleBrowser]})export class RQSampleBrowserModule {    constructor(private dataService: DataService) {        for (var i = 0; i < routes.length; i++) { if (routes[i].path == "" && routes[i]['redirectTo'] != "") { // To update current sample's link color.(SampleBrowser.ts). dataService.obj.activeSampleURL = routes[i]['redirectTo']; break; } } } } platformBrowserDynamic().bootstrapModule(RQSampleBrowserModule);

“样品”文件夹

“ Samples”文件夹包含各种示例，分别是html，css，ts和json文件。 它还在其中包含“ Src”文件夹。

-‘src’文件夹

“ Src”文件夹包含运行我们的甘特样本所需的源文件，例如ResourceStrings，Scripts，Styles。

样品文件夹
-GanttControlSkeleton示例文件夹
-GanttControlSkeleton.ts
-GanttControlSkeleton.html
-GanttControlSkeleton.css
-GanttControlSkeleton.json
-FlexyGanttSkeleton示例文件夹
-FlexyGanttSkeleton.ts
-FlexyGanttSkeleton.html
-FlexyGanttSkeleton.css
-FlexyGanttSkeleton.json
-GanttControlCustomDataBinding示例

-ResourceLoadView示例

甘特图可以集成到生产排程APS系统中，用于解决复杂生产模型下多约束、有限产能的快速实时计划优化和生产调度问题；是智能制造的核心解决方案和大脑中枢。

相关产品介绍：

VARCHART XGantt：支持ActiveX、.Net等平台的C#甘特图控件
AnyGantt：构建复杂且内容丰富的甘特图的理想工具
phGantt Time Package：对任务和时间的分配管理的甘特图
dhtmlxGantt：交互式JavaScript / HTML5甘特图

想要购买甘特图正版授权，或了解更多产品信息请点击【咨询在线客服】

标签：