如何使用ng2-dragula设置角度快速启动

Question

如何使用ng2-dragula设置角度快速启动

我按照这里的说明操作:https://github.com/valor-software/ng2-dragula/wiki#5-min-quickstart以及这里:https://www.npmjs.com/package/ng2- dragula

Angular-quickstart正在运行,按照:

git clone  https://github.com/angular/quickstart  angular2-dragula-test
npm install
npm start

Run Code Online (Sandbox Code Playgroud)

"我的第一个Angular App"(在浏览器中弹出 - 所以一切正常)

我通过以下方式安装dragula:

npm install ng2-dragula dragula --save

Run Code Online (Sandbox Code Playgroud)

我用valor-software ng2-dragula wiki(第一个链接)的确切内容替换了quickstart文件.

如果有人可以提供任何建议(关于非关键的非上市步骤)或简单的健全性检查,将非常感激.

Answer 1

Qua*_*ion 11

这些是使用angular-quickstart设置ng2-dragula基本测试应用程序的完整说明(如果使用Angular-CLI,请参见底部"使用Angular-CLI更新"):

设置一个新的angular-quickstart项目:

mkdir angular2-dragula-test
git clone  https://github.com/angular/quickstart  angular2-dragula-test
cd angular2-dragula-test
npm install
npm start

Run Code Online (Sandbox Code Playgroud)

如果一切顺利,你应该有一个网页,上面写着"My First Angular 2 App",基本的angular2-quickstart正在运行,我们现在将添加dragula.

npm install ng2-dragula dragula

Run Code Online (Sandbox Code Playgroud)

在index.html中,我们将通过添加以下行添加dragula.css:

<link rel="stylesheet" href="node_modules/dragula/dist/dragula.css">

Run Code Online (Sandbox Code Playgroud)

这是我的完整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>

Run Code Online (Sandbox Code Playgroud)

systemjs.config.js(查找两条评论"//***如果您只是想要,则需要以下内容来执行:********************"添加相关行):

/**
 * 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);

Run Code Online (Sandbox Code Playgroud)

在app.module.ts中导入DragulaModule:

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 { }

Run Code Online (Sandbox Code Playgroud)

用以下内容替换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 { }

Run Code Online (Sandbox Code Playgroud)

使用Angular-CLI进行更新

幸运的是,指令比上面要求的更容易:

首先设置一个新项目,然后添加Dragula:

ng new ngcli-dragula
cd ngcli-dragula
npm install ng2-dragula dragula

Run Code Online (Sandbox Code Playgroud)

如果您收到如下错误:

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

Run Code Online (Sandbox Code Playgroud)

然后你需要升级angular-cli,也许是升级npm的好主意:

npm install npm -g
npm install -g @angular/cli

Run Code Online (Sandbox Code Playgroud)

将以下行添加到index.html:

<link rel="stylesheet" href="node_modules/dragula/dist/dragula.css">

Run Code Online (Sandbox Code Playgroud)

在app.module.ts中导入DragulaModule(请参阅两条注释"// 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 { }

Run Code Online (Sandbox Code Playgroud)

在app.component.ts中导入DragulaService(请参阅两条注释"// 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!';
}

Run Code Online (Sandbox Code Playgroud)

更新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>

Run Code Online (Sandbox Code Playgroud)

现在有一个工作示例,这个可选的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;
}

Run Code Online (Sandbox Code Playgroud)

现在你应该有一个有效的例子.

归档时间：	9 年前
查看次数：	2756 次
最近记录：	8 年，6 月前