Question

所以我有一个角度大的Web应用程序，我有几个页面，我想使用React来减少页面的渲染时间（＆gt; 3000行）。

在搜索解决方案时，我遇到了这个反应插件：http://bebraw.github.io/reactabular/

它允许我添加一个带有编辑选项的数据表，以及更多 - 完美满足我的需求。问题是没有简单的方法将它包含在预建的角度应用程序中。

由于我是新手，我想将它整合到我当前的角度应用中，并且我在网上搜索了很长时间的答案。

我正在寻找一种方法将它集成到我当前的代码中，如下所示：

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

如果您需要从非Angular应用程序调用Angular代码，请尝试https://github.com/bcherny/ngimport。它允许您从非Angular文件中require / import Angular服务。

在大角度应用中做出反应

1 个答案: