Как настроить угловой запуск с помощью ng2-dragula
Я следовал инструкциям здесь: https://github.com/valor-software/ng2-dragula/wiki, а также здесь: https://www.npmjs.com/package/ng2-dragula
Angular-quickstart работает согласно:
git clone https://github.com/angular/quickstart angular2-dragula-test
npm install
npm start
"My First Angular App" (появляется в браузере - все работает)
Я устанавливаю dragula по:
npm install ng2-dragula dragula --save
Я заменил файлы быстрого запуска точным содержимым вики-программного обеспечения ng2-dragula wiki (первая ссылка).
Если бы кто-то мог дать какой-либо совет (о не перечисленных шагах, которые имеют решающее значение) или простой проверке работоспособности, это было бы очень ценно.
2 ответа
Вот полные инструкции по использованию angular-quickstart для настройки базового тестового приложения ng2-dragula (см. Нижний раздел "ОБНОВЛЕНИЕ с использованием Angular-CLI" при использовании Angular-CLI):
Настройте новый угловой проект:
mkdir angular2-dragula-test
git clone https://github.com/angular/quickstart angular2-dragula-test
cd angular2-dragula-test
npm install
npm start
Если все хорошо, у вас должна быть веб-страница с надписью "My First Angular 2 App", основной angular2-quickstart работает, теперь мы добавим dragula.
npm install ng2-dragula dragula
В index.html мы добавим dragula.css, добавив следующую строку:
<link rel="stylesheet" href="node_modules/dragula/dist/dragula.css">
Это мой полный index.html для справки:
<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- dragula css -->
<link rel="stylesheet" href="node_modules/dragula/dist/dragula.css">
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
systemjs.config.js (ищите два комментария, читая "//***, что требуется для dragula********************", если вы просто хотите добавить соответствующие строки):
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
//***the following is required by dragula********************
'dragula': 'node_modules/dragula',
'ng2-dragula': 'node_modules/ng2-dragula',
'contra': 'node_modules/contra',
'atoa': 'node_modules/atoa',
'ticky': 'node_modules/ticky',
'crossvent': 'node_modules/crossvent/src',
'custom-event': 'node_modules/custom-event',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
},
//***the following is required by dragula********************
'dragula': {main: 'dragula.js', defaultExtension: 'js'},
'ng2-dragula': {defaultExtension: 'js'},
'contra': {main: 'contra.js', defaultExtension: 'js'},
'atoa': {main: 'atoa.js', defaultExtension: 'js'},
'ticky': {main: 'ticky.js', defaultExtension: 'js'},
'crossvent': {main: 'crossvent.js', defaultExtension: 'js'},
'custom-event': {main: 'index.js', defaultExtension: 'js'},
}
});
})(this);
Импортируйте DragulaModule в app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { DragulaModule } from 'ng2-dragula/ng2-dragula'; //THIS IS NEW***
@NgModule({
imports: [ BrowserModule, DragulaModule ], //ADDED DragulaModule***
declarations: [ AppComponent],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Замените app.component.ts следующим:
import { Component } from '@angular/core';
import { DragulaService } from 'ng2-dragula/ng2-dragula';
@Component({
selector: 'my-app',
template: `<h1>My First Angular 2 App</h1>
<div>
<div class='wrapper'>
<div class='container' [dragula]='"first-bag"'>
<div>Drag/drop item 1</div>
</div>
<div class='container' [dragula]='"first-bag"'>
<div>Drag/drop item 2</div>
</div>
</div>
</div>
`,
viewProviders: [DragulaService],
styles: [`
.wrapper {
display: table;
}
.container {
display: table-cell;
background-color: rgba(255, 255, 255, 0.2);
width: 50%;
}
.container:nth-child(odd) {
background-color: rgba(0, 0, 0, 0.2);
}
.container div,
.gu-mirror {
margin: 10px;
padding: 10px;
background-color: rgba(0, 0, 0, 0.2);
transition: opacity 0.4s ease-in-out;
}
.container div {
cursor: move;
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
.gu-mirror {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
`]
})
export class AppComponent { }
Обновление с использованием Angular-CLI
К счастью, инструкции проще, чем требуется выше:
Сначала настройте новый проект и добавьте Dragula:
ng new ngcli-dragula
cd ngcli-dragula
npm install ng2-dragula dragula
Если вы получили ошибку, такую как следующее:
npm install ng2-dragula dragula
ngcli-dragula@0.0.0 /home/quaterion/Development/ngcli-dragula
├── UNMET PEER DEPENDENCY @angular/compiler@4.0.3
├── UNMET PEER DEPENDENCY @angular/forms@4.0.3
├─┬ dragula@3.7.2
│ ├─┬ contra@1.9.4
│ │ ├── atoa@1.0.0
│ │ └── ticky@1.0.1
│ └─┬ crossvent@1.5.4
│ └── custom-event@1.0.0
└── ng2-dragula@1.3.1
Затем вам нужно обновить angular-cli, вероятно, неплохо бы обновить и npm:
npm install npm -g
npm install -g @angular/cli
Добавьте следующую строку в ваш index.html:
<link rel="stylesheet" href="node_modules/dragula/dist/dragula.css">
Импортируйте DragulaModule в app.module.ts (см. Два комментария "//NEW"):
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { DragulaModule } from 'ng2-dragula/ng2-dragula'; //NEW
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
DragulaModule//NEW
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Импортируйте DragulaService в app.component.ts (см. Два комментария "//NEW"):
import { Component } from '@angular/core';
import { DragulaService } from 'ng2-dragula/ng2-dragula';//NEW
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
viewProviders: [DragulaService]//NEW
})
export class AppComponent {
title = 'app works!';
}
Обновите HTML (app.component.html), чтобы появился рабочий пример:
<h1>
{{title}}
</h1>
<div>
<div class='wrapper'>
<div class='container' [dragula]='"first-bag"'>
<div>Drag/drop item 1</div>
</div>
<div class='container' [dragula]='"first-bag"'>
<div>Drag/drop item 2</div>
</div>
</div>
</div>
Теперь есть рабочий пример, этот необязательный блок CSS сделает пример лучше (app.component.css):
.wrapper {
display: table;
}
.container {
display: table-cell;
background-color: rgba(255, 255, 255, 0.2);
width: 50%;
}
.container:nth-child(odd) {
background-color: rgba(0, 0, 0, 0.2);
}
.container div,
.gu-mirror {
margin: 10px;
padding: 10px;
background-color: rgba(0, 0, 0, 0.2);
transition: opacity 0.4s ease-in-out;
}
.container div {
cursor: move;
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
.gu-mirror {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
Теперь у вас должен быть рабочий пример.
Разрешить "zone.js:1274 GET localhost:3000/ng2-dragula/ng2-dragula 404 (Not Found)" ошибка, добавьте ниже блок в вашем systemjs.config.js
var map = {
...
'dragula': 'node_modules/dragula/dist/dragula.js',
'ng2-dragula': 'node_modules/ng2-dragula'
};
var packages = {
...
'dragula': { defaultExtension: 'js' },
'ng2-dragula': {defaultExtension: 'js' }
};