Как использовать библиотеку, такую ​​как Sortablejs, в приложении Angular 2.0?

Я запускаю новое простое приложение Angular 2.0 и хотел бы иметь списки с элементами, которые можно перетаскивать.

Sortablejs кажется хорошим инструментом для этого, но здесь есть несколько препятствий. Насколько я могу сказать, я должен:

1) Используйте ng-sortable, чтобы обернуть Sortable.js в директиву атрибута Angular 1.

2) Используйте UpgradeAdapter для использования директив Angular 1 в качестве компонентов Angular 2.

3) Используйте оболочку ngadapter вокруг инструмента обновления, чтобы включить директивы атрибутов в дополнение к директивам компонентов.

Затем мне нужно включить все файлы и смешать все инструкции.

Начиная с приложения, созданного angular-cli, я сгенерировал маршрут и установил npm ngadapter, angular, UpgradeAdapter и sortablejs. Я добавил это в мой файл index.html

<script type="text/javascript" src="/node_modules/sortablejs/ng-sortable.js"></script>
<script type="text/javascript" src="/node_modules/angular/angular-min.js"></script>

Я создал файл upgrade_adapter.ts примерно так

import { UpgradeAdapter } from '@angular/upgrade';
export const upgradeAdapter = new UpgradeAdapter();

Я отредактировал мой файл main.ts, чтобы он выглядел так:

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { MySimpleAppComponent, environment } from './app/';
import { upgradeAdapter } from './app/upgrade_adapter';
import { angular } from '../node_modules/angular'; // here's the problem. I don't know how to get angular
import { ngAdapter } from 'ngAdapter/build/ngAdapter';

//create your AngularJS module 
let module = angular.module('MyApp', []);

//create adapter 
let adapter = new ngAdapter(module);

if (environment.production) {
  enableProdMode();
}

// bootstrap(MySimpleAppComponent);          // what it was originally
adapter.bootstrap(document.body, ['MyApp']); // from ngadapter instructions

Я уверен, что здесь что-то не так, но первое сообщение об ошибке

  • Не могу найти имя "угловой"

Я уверен, что ответ лежит на страницах документации system.js, но я не получаю его. Вы знаете, как установить угловой объект? Я иду по правильному пути здесь? Я не женат на Sortable, но я ожидаю, что столкнусь с теми же проблемами, пытаясь использовать другие библиотеки с Angular 2, и хотел бы выяснить, как это сделать.

Есть ли лучший или стандартный способ использовать хорошую библиотеку JavaScript, которая не была разработана для Angular 2?

Источник

0 ответов

Другие вопросы по тегам