реагировать в большом угловом приложении

Question

У меня есть угловое большое веб-приложение. У меня есть несколько страниц, где я бы хотел использовать React для уменьшения времени рендеринга страницы (> 3000 строк).

В поисках решения я столкнулся с этим среагировать плагин: http://bebraw.github.io/reactabular/

Это позволяет мне добавить DataTable с опциями редактирования и многое другое - идеально подходит для моих потребностей. Проблема заключается в том, что нет простого способа включить его в заранее подготовленное угловое приложение.

Поскольку я новичок в реагировании, я хотел интегрировать его в свое текущее угловое приложение, и долгое время я ищу в Интернете ответы.

Я ищу способ, чтобы интегрировать его в мой текущий код, который выглядит следующим образом:

var contactManager = angular.module('contactManager', ['ngMaterial','ngCookies','ngRoute','loadingOnAJAX','truncate','chart.js','xeditable','datatables','ui.calendar', 
    'xeditable', 'ngFileUpload','ui.bootstrap','html5.placeholder','luegg.directives','angular-svg-round-progress','ngProgress','ngDraggable']) 
     .run(function($rootScope, ngProgress, editableOptions) { 
      editableOptions.theme = 'bs3'; // bootstrap3 theme. Can be also 'bs2', 'default' 
      $rootScope.$on('$routeChangeStart', function(ev,data) { 
      ngProgress.start(); 
      }); 
      $rootScope.$on('$routeChangeSuccess', function(ev,data) { 
      // Close menu on mobiles 
      ngProgress.complete(); 
      }); 
     }) 
     .config(['$routeProvider','$locationProvider','$controllerProvider', function($routeProvider, $locationProvider, $controllerProvider) { 
$routeProvider 
      .when('/index', { 
    templateUrl: 'partials/adminPanel.html', 
    controller: 'GroupPanelCtrl', 
    resolve: GroupPanelCtrl.resolve 
    }) 
      .when('/profile/:id', { 
    templateUrl: 'partials/profile.html', 
    controller: 'ProfileCtrl' 
    }) 
      .when('/group/:id/contacts', { 
    templateUrl: 'partials/group-contacts.html', 
    controller: 'GroupContactsInfo', 
    resolve: GroupContactsInfo.resolve 
    }) 

и в HTML:

<table datatable="ng" class="table table-bordered table-hover dataTable" role="grid" data-page-length="100"> 
      <thead> 
      <tr> 
       <th></th> 
       <th>{{texts.fullName}}</th> 
       <th>{{texts.title}}</th> 
       <th>{{texts.mobile}}</th> 
       <th>{{texts.email}}</th> 
       <th>{{texts.department}}</th> 
       <th></th> 
      </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="contact in contacts track by $index"> 
       <td ng-click="clickContact()">{{img}} 
       </td> 
       <td ng-click="clickContact()"> 
        <a> 
        {{::contact.fullName}} 
        </a> 
       </td> 
       <td ng-click="clickContact()"> 
        {{::contact.title|| ""}} 
       </td> 
       <td ng-click="clickContact()"> 
        {{::contact.phoneFormatted}} 
       </td> 
       <td ng-click="clickContact()"> 
        <span> 
        {{::contact.email}} 
        </span> 
       </td> 
       <td ng-click="clickContact()"> 
        {{::contact.department|| ""}} 
       </td> 
       <td ng-click="deleteContact(contact, $index)"> 
        <span class="fa fa-trash showOnhover"></span> 
       </td> 
       </tr> 
      </tbody></table> 

Answer 1

Если вам нужно вызвать Угловой код из не-Угловое приложение, попробуйте https://github.com/bcherny/ngimport. Он позволяет вам require/import Угловые услуги из неграмотных файлов.