彩票走势图

jQueryGantt Package使用教程: 角度样本

翻译|使用教程|编辑:杨鹏连|2020-07-14 14:40:15.960|阅读 141 次

概述:本文从如何运行Angular示例,角甘特结构与安装两个方面讲解Angular Samples。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

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 components
const 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甘特图


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


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP