Dies sind die vollständigen Anweisungen für die Verwendung von Winkelquickstart einen NG2-Dragula Grund Test-App einzurichten (siehe unten im Abschnitt „UPDATE -cli“bei Verwendung von Angular-CLI):
ein neues Winkel-quickstart-Projekt ein:
mkdir angular2-dragula-test
git clone https://github.com/angular/quickstart angular2-dragula-test
cd angular2-dragula-test
npm install
npm start
wenn alles gut ist, dass Sie sollte eine Web-Seite haben, die "My First Angular 2 App" sagt, der grundlegende angular2-quickstart funktioniert, wir werden jetzt dragula hinzufügen.
npm install ng2-dragula dragula
In index.html werden wir die dragula.css hinzufügen, indem Sie die folgende Zeile hinzu:
<link rel="stylesheet" href="node_modules/dragula/dist/dragula.css">
Das ist mein voll ist index.html Referenz:
<!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 (suchen Sie nach dem zwei Kommentare lesen "// *** Folgendes wird von dragula ********************" benötigt, wenn Sie nur die relevanten Zeilen hinzufügen möchten:
/**
* 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);
Import der DragulaModule in 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 ersetzen.ts mit den folgenden:
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 { }
Update-Angular-CLI
Glücklicherweise sind die Anweisungen verwenden, sind leichter als das, was oben ist erforderlich:
zunächst ein neues Projekt einrichten und hinzufügen Dragula:
ng new ngcli-dragula
cd ngcli-dragula
npm install ng2-dragula dragula
Wenn Sie einen Fehler wie den folgenden:
npm install ng2-dragula dragula
[email protected] /home/quaterion/Development/ngcli-dragula
├── UNMET PEER DEPENDENCY @angular/[email protected]
├── UNMET PEER DEPENDENCY @angular/[email protected]
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ └─┬ [email protected]
│ └── [email protected]
└── [email protected]
Dann müssen Sie Winkel-cli aktualisieren, wahrscheinlich eine gute Idee npm zu aktualisieren:
npm install npm -g
npm install -g @angular/cli
die folgende Zeile in Ihre index.html:
<link rel="stylesheet" href="node_modules/dragula/dist/dragula.css">
Import der DragulaModule in in app.module.ts (siehe die beiden Kommentare "// NEU"):
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 { }
Import der DragulaService in app.component.ts (siehe die beiden Kommentare "// NEU"):
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!';
}
Aktualisieren Sie die html (app.component.html), so gibt es ein funktionierendes Beispiel :
<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>
Jetzt gibt es ein funktionierendes Beispiel, wird dieser optionale Block von CSS das Beispiel schöner (app.component.css) aussehen:
.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;
}
Jetzt sollten Sie ein funktionierendes Beispiel haben.
Nach der Installation von ng2-Dragula, sehen Sie einen Fehler in der Browser-Konsole? – Sanket
Nun in diesem Moment habe ich "zone.js: 1274 Get http: // localhost: 3000/ng2-Dragula/ng2-Dragula 404 (nicht gefunden)", die nicht sehr nützlich ist ... aber früher vor dem Mischen up alles, was ich hatte ng2-Dragula ordnungsgemäß installiert, aber immer noch nicht die Richtlinie verwenden konnte. Meine IDE konnte die Dragula-Direktive nicht finden, dh: {Dragula, DragulaService} aus 'ng2-dragula' importieren; (Dragula kann nicht gefunden werden, aber DragulaService ist in Ordnung, ebenso wie DragulaModule, wenn ich das importiere). Es ist kein Fehler mit der IDE, weil das Finden dieser Dateien von Hand einfach war und ich keinen Hinweis auf eine Dragula-Direktive erkennen konnte ... – Quaternion