如何設置角快速入門與NG2-dragula

我已經按照這裏的說明：https://github.com/valor-software/ng2-dragula/wiki#5-min-quickstart還有這裏：https://www.npmjs.com/package/ng2-dragula 如何設置角快速入門與NG2-dragula

角快速啓動工作，按照：

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

「我的第一角應用程序」（在瀏覽器彈出 - 所以一切工作）

我通過安裝dragula：

npm install ng2-dragula dragula --save

我用快速入門文件替換了valor-software ng2-dragula wiki的精確內容（第一個鏈接）。

如果有人可以提供任何建議（關於非關鍵的非公開步驟）或簡單的完整性檢查，將不勝感激。

來源

2016-09-29 Quaternion

安裝ng2-dragula後，您是否在瀏覽器控制檯中看到任何錯誤？ – Sanket

那麼在這一刻我已經得到了「zone.js：1274 GET http：// localhost：3000/ng2-dragula/ng2-dragula 404（Not Found）」，這不是很有用......但是之前在messing把我所有的ng2-dragula安裝妥當，但仍然不能使用該指令。我的IDE找不到Dragula指令，即：'ng2-dragula'中的import {Dragula，DragulaService}; （Dragula找不到，但DragulaService很好，當我導入DragulaModule時）。這不是IDE的錯誤，因爲手動查找這些文件非常簡單，我無法對dragula指令進行任何參考... – Quaternion

這些是採用了棱角分明，快速入門成立NG2-dragula基本的測試程序（採用了棱角分明看到底部「UPDATE完整的說明-CLI」如果採用了棱角分明-CLI）：

建立一個新的角度，快速啓動項目：

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

如果一切順利，你應該有一個網頁陳述「我的第一個Angular 2應用程序」，基本的angular2-quickstart正在運行，現在我們將添加dragula。

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

npm install ng2-dragula dragula

在的index.html我們將通過添加以下行添加dragula.css

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有以下幾點：採用了棱角分明-CLI

幸運的指令是比什麼是上面要求更容易

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

更新：

首先建立一個新的項目，並添加Dragula：

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

如果你得到一個錯誤，如下面的：

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]

然後，你需要升級的角度，CLI，可能是一個好主意，升級NPM太：

以下行添加到您的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; }

現在你應該有一個工作的例子。

來源

2016-10-07 01:04:54 Quaternion

你是救世主。比他們網站上給出的指導好得多。 'systemjs.config.js'幫助我除去了組件中的指令行代碼，只是從'ng2-dragula/ng2-dragula'中導入{DragulaModule}; //這是NEW *** @NgModule（{ 進口：[BrowserModule，DragulaModule] // ADDED DragulaModule *** 聲明：[AppComponent]，自舉：[AppComponent] }）' –

爲什麼這不在文檔中！非常感謝:) – Mellkor

我仍然收到錯誤，直到我還將「main」屬性添加到systemjs.config.js。像這樣：''ng2-dragula'：{main：'ng2-dragula。js'，defaultExtension：'js'}' – cjn

要解決"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' } 
    };

來源

2016-09-29 04:02:46 Sanket

我不確定是否將這些值放入了兩個包中。我會在今晚稍後測試，謝謝。 – Quaternion

如何設置角快速入門與NG2-dragula

回答

相關問題