Angular+jointjs

之前搞angular和jointjs搞得很绝望，后来发现哦原来是这个样子啊。

一、进入项目目录，运行以下命令安装jointjs和相关的依赖

1、jquery
npm install jquery --save
npm install @ types / jquery --save-dev
2、backbone
npm install backbone --save
npm install @ types / backbone --save-dev
3、jointjs
npm install jointjs --save
npm install @ types / jointjs --save-dev
4、lodash
npm install lodash@3.10.1 --save
npm install @ types / lodash @ 3.10.1 --save-dev

二、修改angular.json文件

“styles”: [
“styles.scss”,
“node_modules/jointjs/css/layout.css”,
“node_modules/jointjs/css/themes/material.css”,
“node_modules/jointjs/css/themes/default.css”
],
“scripts”: [
“node_modules/jquery/dist/jquery.js”,
“node_modules/lodash/index.js”,
“node_modules/backbone/backbone.js”,
“node_modules/jointjs/dist/joint.js”
]

三、在对应的component.ts中添加具体内容

import * as _ from ‘lodash’;
import * as backbone from ‘backbone’;
import * as joint from ‘node_modules/jointjs/dist/joint.js’;
declare var $:JQueryStatic;

ngOnInit() { //ngOnInit()是已有的，找到他然后在里面写具体内容

var w = $("#content1").width();   //content1为div
var h = $("#content1").height();
let graph = new joint.dia.Graph;
let paper = new joint.dia.Paper({el: $("#content1"),width: w,height: h,model: graph,gridSize: 10,drawGrid: true,background: {color: 'rgb(240,255,255)'}
});
let rect = new joint.shapes.basic.Rect({position: { x: 100, y: 30 },size: { width: 100, height: 30 },attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } }
});
let rect2 = rect.clone() as joint.shapes.basic.Rect;
rect2.translate(300);
var link = new joint.dia.Link({source: { id: rect.id },target: { id: rect2.id }
});
graph.addCells([rect, rect2, link]);

}

ps:如果出现问题可能是版本不对，在安装的时候可以进行版本控制

Angular+jointjs相关推荐

Angular No name was provided for external module 'XXX' in output.globals 错误
Angular 7 开发自定义库时,引用ngZorroAntd,build过程中出现 No name was provided for external module 'ng-zorro-antd' ...
angular.isUndefined()
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>ang ...
五：Angular 数据绑定 (Data Binding)
通常来说,数据绑定要么是从页面流向组件中的数据,要么是从组件中的数据流向页面.下面我们来介绍在Angular 2中数据绑定的几种不同方式. 1. 使用{{}}将组件中的数据显示在html页面上实 ...
angular初步认识一
最近比较流行MVC前端框架开发,最近研究了一个框架AngularJS框架不说那么多,先上例子,我是个代码控 <!DOCTYPE html> <html lang="en& ...
【讲人话】Angular如何通过@ViewChildren获取实时渲染的动态DOM节点元素（@ViewChild只能获取静态的固定DOM节点）
故事背景:有一天,强哥整了个动态渲染的列表代码如下 app.component.html <div><button (click)="add()">添加一行 ...
Angular的ChangeDetectorRef.detectChanges()实现angularJS的$apply()方法，强制刷新数据渲染
在Javascript代码里,都是按照一定顺序来执行的,当轮到一个代码片段执行的时候,浏览器就只会去执行当前的片段,不会做任何其他的事情.所以有时候一些做得不是很好的网页,当点击了某个东西之后会卡住, ...
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办？
有一天,我写了一个自信满满的自定义组件myComponent,在多个页面import使用了,结果控制台给我来这个我特么裤子都脱了,你给我来这个提示是几个意思仔细一看 The Component ' ...
【硬核解说】一口气讲明白Angular的5种路由守卫RouteGuard是嘛玩意儿
Angular的常用路由守卫有5种,按照执行顺序: ① CanLoad:进入到当前路由的时候触发(若用户没有权限访问,相应的模块并不会被加载.这里是指对应组件的代码). ↓ ② CanAcitivat ...
浅谈Angular如何自定义创建指令@Directive
知识普及 Angular 指令根据其创建形式分为内置指令和自定义指令,指令按照类型分: 模板指令--组件就是模板指令(只能自定义) 属性型指令 -- 更改元素.组件或其他指令的外观或行为的指令(有内 ...

Angular+jointjs

Angular+jointjs

一、进入项目目录，运行以下命令安装jointjs和相关的依赖

二、修改angular.json文件

三、在对应的component.ts中添加具体内容

Angular+jointjs相关推荐

最新文章

热门文章