Skip to content

Home

Jump to bottom Edit New page
Nathan Walker edited this page Apr 7, 2016 · 9 revisions

How to configure with different sample projects and seeds:

5 Min Quickstart

How to configure if using 5 Min Quickstart guide application from angular.io docs.

  • index.html:
<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <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">
    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        defaultJSExtensions: true,
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        },
        paths: {
          'dragula': 'node_modules/dragula/dist/dragula.js',
          'ng2-dragula/*': 'node_modules/ng2-dragula/ng2-dragula.js',
          'angular2/*': 'node_modules/angular2/*',
          'rxjs/*': 'node_modules/rxjs/*'
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>
  • app/app.component.ts:
import {Component} from 'angular2/core';

import {Dragula, 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>
    `,
    directives: [Dragula],
    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 { }

angular2-seed

https://github.com/mgechev/angular2-seed

Import into your component using this path:

import {DragulaService, Dragula} from 'ng2-dragula/ng2-dragula';

In tools/config/project.config.ts, add dragula to the following:

export class ProjectConfig extends SeedConfig {
  PROJECT_TASKS_DIR = join(process.cwd(), this.TOOLS_DIR, 'tasks', 'project');

  constructor() {
    super();
    // this.APP_TITLE = 'Put name of your app here';
    let additional_deps: InjectableDependency[] = [
      // {src: 'jquery/dist/jquery.min.js', inject: 'libs'},
      // {src: 'lodash/lodash.min.js', inject: 'libs'},
    ];

    const seedDependencies = this.NPM_DEPENDENCIES;

    this.NPM_DEPENDENCIES = seedDependencies.concat(additional_deps);

    this.APP_ASSETS = [
      // {src: `${this.ASSETS_SRC}/css/toastr.min.css`, inject: true},
      // {src: `${this.APP_DEST}/assets/scss/global.css`, inject: true},
      { src: `${this.ASSETS_SRC}/main.css`, inject: true },
    ];

    // Add Dragula

    // Development
    this.SYSTEM_CONFIG.paths['dragula'] = `${this.APP_BASE}node_modules/dragula/dist/dragula.min`;

    // Production
    this.SYSTEM_BUILDER_CONFIG.paths['dragula'] = `node_modules/dragula/dist/dragula.min.js`;
  }
}

angular2-webpack

https://github.com/preboot/angular2-webpack

There is nothing you need to do other than install the lib:

npm install ng2-dragula dragula --save

Then import as normal:

import {DragulaService, Dragula} from 'ng2-dragula/ng2-dragula';
Add a custom sidebar
Clone this wiki locally