大きな角度のアプリケーションで反応する

Question

角のある大規模なWebアプリケーションがあるので、ページのレンダリング時間を短縮するためにReactを使用するページがいくつかあります（> 3000行）。

私は、これはプラグインに反応遭遇した解決策を探している間：http://bebraw.github.io/reactabular/

それは私が編集オプションとより多くでデータテーブルを追加することができます - 私のニーズにぴったりの。 問題は、あらかじめ組み立てられたアングルアプリに簡単に含めることができないということです。

私は反応が新しいので、私は現在の角度のアプリケーションに統合したいと思っていました。私は、ウェブで長い間答えを探しています。

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

：あなたがからの角度のコードを呼び出す必要がある場合

<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

：

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角度のないアプリの場合は、https://github.com/bcherny/ngimportを試してください。 require/import角度のないファイルの角度サービス。