angularjs - 大きな角度のアプリで反応する

Question

したがって、角度のある大きなWebアプリケーションがあり、Reactを使用してページのレンダリング時間を短縮したいページがいくつかあります(> 3000行)。

解決策を探しているときに、この反応プラグインに遭遇しました: http://bebraw.github.io/reactabular/

編集オプションなどを備えたデータテーブルを追加できるので、私のニーズにぴったりです。問題は、ビルド済みの angular アプリに簡単に含める方法がないことです。

私は反応するのが初めてなので、それを現在のAngularアプリケーションに統合したいと思っていました.Webで長い間答えを探しています。

次のような現在のコードに統合する方法を探しています。

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>