reagieren in großen eckigen App

Question

So habe ich eine eckige große Web-Anwendung, ich habe ein paar Seiten, wo ich React verwenden möchte, um die Renderzeit der Seite (> 3000 Zeilen) zu verringern.

Während Suche nach einer Lösung stieß ich auf dieses Plugin reagieren: http://bebraw.github.io/reactabular/

Es ist mir eine Datentabelle mit Bearbeitungsoptionen und mehr hinzufügen können - perfekt für meine Bedürfnisse. Das Problem ist, dass es keine einfache Möglichkeit gibt, es in eine vorgefertigte eckige App zu integrieren.

Da ich neu bin zu reagieren, wollte ich es in meine aktuelle eckige Anwendung integrieren und ich suche das Web nach Antworten für eine lange Zeit.

ich nach einem Weg suchen, es zu meinem aktuellen Code zu integrieren, sieht das wie folgt aus:

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 
    }) 

und der 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

Wenn Sie Angular Code aufrufen müssen aus eine nicht-Angular App, versuchen Sie https://github.com/bcherny/ngimport. Es ermöglicht Ihnen require/import Angular Services aus nicht-Angular-Dateien.