AngularJS-FlowChart 项目教程

苗圣禹Peter

于 2024-09-25 07:39:54 发布

阅读量722

点赞数 18

本文链接：https://blog.csdn.net/gitblog_00208/article/details/142505999

版权

AngularJS-FlowChart 项目教程

AngularJS-FlowChart An example/template WebUI control for visualizing and editing flow charts 项目地址: https://gitcode.com/gh_mirrors/an/AngularJS-FlowChart

1. 项目目录结构及介绍

AngularJS-FlowChart/
├── app/
│   ├── css/
│   ├── js/
├── debug/
│   └── js/
├── index.html
├── server.js
├── LICENSE
├── README.md
└── flowchart/
    ├── svg_class.js
    ├── mouse_capture_service.js
    ├── dragging_service.js
    ├── flowchart_viewmodel.js
    └── flowchart_directive.js

目录结构说明

app/: 包含项目的核心代码，分为 css 和 js 两个子目录。
- css/: 存放项目的样式文件。
- js/: 存放项目的 JavaScript 文件。
debug/: 包含调试相关的 JavaScript 文件。
index.html: 项目的启动文件，包含了 AngularJS 应用的初始化代码。
server.js: 项目的后端服务文件，用于启动本地服务器。
LICENSE: 项目的开源许可证文件。
README.md: 项目的说明文档。
flowchart/: 包含与流程图相关的 JavaScript 文件，如 svg_class.js, mouse_capture_service.js, dragging_service.js, flowchart_viewmodel.js, flowchart_directive.js。

2. 项目启动文件介绍

`index.html`

index.html 是项目的启动文件，包含了 AngularJS 应用的初始化代码。以下是文件的部分内容：

<html>
<head>
    <title>AngularJS-FlowChart</title>
    <!-- LiveReload support -->
    <script src="http://localhost:35729/livereload.js?snipver=1"></script>
</head>
<body ng-app="app" ng-controller="AppCtrl" mouse-capture ng-keydown="keyDown($event)" ng-keyup="keyUp($event)">
    <div style="width: 100%; overflow: hidden;">
        <div style="width: 600px; float: left;">
            <textarea style="width: 100%; height: 100%;" chart-json-edit view-model="chartViewModel"></textarea>
        </div>
        <div style="margin-left: 600px;">
            <button ng-click="addNewNode()" title="Add a new node to the chart">Add Node</button>
        </div>
    </div>
    <flow-chart style="margin: 5px; width: 100%; height: 100%;" chart="chartViewModel"></flow-chart>
</body>
</html>

启动文件说明

ng-app="app": 定义了 AngularJS 应用的模块名称为 app。
ng-controller="AppCtrl": 指定了控制器 AppCtrl 来管理页面的逻辑。
mouse-capture: 自定义指令，用于捕获鼠标事件。
ng-keydown 和 ng-keyup: 用于处理键盘事件。
<flow-chart>: 自定义指令，用于渲染和编辑流程图。

3. 项目配置文件介绍

`server.js`

server.js 是项目的后端服务文件，用于启动本地服务器。以下是文件的部分内容：

var express = require('express');
var app = express();

app.use(express.static(__dirname));

app.listen(3000, function() {
    console.log('Server is running on port 3000');
});