Question

我有一个控制器，我想将其转换为服务，这是用于订单列表的控制器。

angular.module('recopeApp')
  .controller('OrderDetailCtrl', function ($scope, $routeParams) {
    $scope.detalleOrden = [{
            id: '12423',
            title: 'Detalles de la orden',
            supervisor: 'Someone',
            responsable: 'Someone Else',
            solicitante: 'Recope',
            unidadEjec: 'Grupo Planificador Belén'
            },
        {
            id: '56456',
            title: 'Detalles de la orden',
            supervisor: 'Carlos Blabla',
            responsable: 'Alberto Blablo',
            solicitante: 'Recope',
            unidadEjec: 'Grupo VEINSA'
            }];

  });

我想这样做，因为我有一个用户可能会看到title属性的视图，一旦您点击title，您应该被重定向到您能够看到的视图订单的详细信息。

然后我需要创建一个控制器来显示订单的完整信息，如下所示

angular.module('recopeApp')
  .controller('OrderIdCtrl', function ($scope, $routeParams, $log, $rootScope) {

        $log.info($routeParams.id);

  });

然后是配置功能

  .when('/orders', {
    templateUrl: 'views/main.html',
    controller: 'OrderDetailCtrl'
  })
  .when('/orders/:id', {
    templateUrl: 'views/order-detail.html',
    controller: 'OrderIdCtrl'
  })
  .otherwise({
    redirectTo: '/orders'
  });

这里是HTML，您应该看到订单的title

    <div ng-repeat="detalle in detalleOrden">
      <a ng-href="#/orders/{{detalle.id}}">
        <h4 heading">Order {{detalle.id}}</h4>
        <p class="list-group-item-text">{{detalle.unidadEjec}}</p>
      </a>
    </div>

这里的视图可能会看到详细的完整订单

            <table ng-repeat="detalle in detalleOrden">
                <tbody>
                    <tr>
                        <th>Supervisor</th>
                        <td>{{detalle.supervisor}}</td>
                    </tr>
                    <tr>
                        <th>Responsable:</th>
                        <td>{{detalle.responsable}}</td>
                    </tr>
                    <tr>
                        <th>Solicitante:</th>
                        <td>{{detalle.solicitante}}</td>
                    </tr>
                    <tr>
                        <th>Unidad ejecutora:</th>
                        <td>{{detalle.unidadEjec}}</td>
                    </tr>
                </tbody>
            </table>

所以我需要使用上面的信息创建一个服务，我是对的吗？

或您的建议是什么？

Answer 1

第一步是切换到服务或工厂。

我在这里使用promises，因此如果您切换到$http，您的控制器代码将不必更改。

angular.module('recopeApp')
  .controller('OrderDetailCtrl', function ($scope, $routeParams, $log, $rootScope, Order) {

    Order.list().then(function(orders) {
      $scope.detalleOrden = orders;
    }, function() {
      $log('error');
    });

  });

angular.module('recopeApp')
  .controller('OrderIdCtrl', function ($scope, $routeParams, $log, $rootScope, Order) {

    $scope.order = {};

    Order.list().then(function(orders) {
      for(var i = 0; i < orders.length; i++) {
        if(orders[i].id === $routeParams.id) { 
          $scope.order = orders[i];
        }
      }
    }, function() {
      $log('error');
    });

  });

您可以将此Factory直接注入控制器并调用其list方法。

angular.module('recopeApp')
  .factory('Order', function ($q) {    
    return {
      list: function() {
        var deferred = $q.defer();

        deferred.resolve([{
          id: '12423',
          title: 'Detalles de la orden',
          supervisor: 'Someone',
          responsable: 'Someone Else',
          solicitante: 'Recope',
          unidadEjec: 'Grupo Planificador Belén'
        }, {
          id: '56456',
          title: 'Detalles de la orden',
          supervisor: 'Carlos Blabla',
          responsable: 'Alberto Blablo',
          solicitante: 'Recope',
          unidadEjec: 'Grupo VEINSA'
        }]);

        return deferred.promise;
      }
    };
  });

更进一步，您可以使用解决路由器中的订单并将结果注入您的控制器。如果你坚持下去，这将会改变：

  .when('/orders', {
    templateUrl: 'views/main.html',
    controller: 'OrderDetailCtrl',
    resolve: {
      orders: function(Order) {
        return Order.list();
      }
    }
  })

  .when('/orders/:id', {
    templateUrl: 'views/order-detail.html',
    controller: 'OrderIdCtrl',
    resolve: { 
      order: function(Order, $routeParams) {
        Order.list().then(function(orders) {
          for(var i = 0; i < orders.length; i++) {
            if(orders[i].id === $routeParams.id) { 
              return orders[i];
            }
          }
          return null;
        });
      }
    }
  })

控制器更改为：

angular.module('recopeApp')
  .controller('OrderDetailsCtrl', function ($scope, $routeParams, $log, $rootScope, orders) {    
    $scope.detalleOrden = orders;   
  });

angular.module('recopeApp')
  .controller('OrderIdCtrl', function ($scope, $routeParams, $log, $rootScope, order) {    
    $scope.order = order;   
  });

在2个控制器和路由之间共享服务

1 个答案: