angularjs - 在 Angular 应用程序中重用 Controller 、 View 和服务

Question

我希望我的应用程序从服务器 API 获取数据，假设我有以下 API /orders、/users。基本上我只想显示我从表中的服务器获取的 json。为此，我正在使用 ng-table 指令。因此，就我拥有的组件而言:

1. 服务 - 两种服务做同样的事情 - 转到 API 并获取 JSON
2. View - 两个 API 的 View 相同，只是显示不同的数据
3. Controller - 从服务中获取数据并将其显示在 TableView 中。

所以在我看来，它们都做同样的事情，只是做了非常小的调整。我想做的是

angular.module('admin').config(function ($routeProvider, $locationProvider) {
  // same template and controller for both
  $routeProvider.
    when('/users', {
      templateUrl: '/partials/table.html',
      controllers: '/js/controllers/table.js
    }).
    when('/orders', {
      templateUrl: '/partials/table.html',
      controllers: '/js/controllers/table.js'
    });
});

在我的服务中

factory('AdminService', ['$resource', function($resource) {
  // somehow I want to inject the right endpoint, depending on the route
  return $resource( '/:endpoint',
    { }, {} );
}]);

在我的表 Controller 中，我也希望能够知道将什么传递给服务

我当然可以为每个 API 端点使用单独的 Controller 和服务，这看起来像是一种浪费的代码重复，但 99% 的事情都是一样的

这可能吗？

如何将所有内容连接在一起？

Answer 1

如果你想要单独的路由，但同一个 Controller ，但有一些选项，你可以在路由定义中使用 resolve 选项来传递一些选项:

$routeProvider.
when('/users', {
  templateUrl: '/partials/table.html',
  controller: 'TableController',
  resolve: {
     'option1': function() {
        return 'val1'
     },
     'option2': function() {
        return 'val2'
     }
  }
}).
when('/orders', {
  templateUrl: '/partials/table.html',
  controller: 'TableController',
  resolve: {
     'option1': function() {
        return 'val3'
     },
     'option2': function() {
        return 'val4'
     }
  }
});  

然后 Controller 在这两种情况下都将被注入(inject)“option1”和“option2”，可用于自定义其行为:

app.controller('TableController', function($scope, option1, option2) {
  // Do something with option1 or option1
});

从 resolve 对象函数中，您可以返回一个 $resource 对象，或者甚至返回一个 promise ，该 promise 将在显示路由之前使用一些数据进行解析。你可以看到 docs for $routeProvider了解详情。

编辑:对于资源，您可以编写一个可配置的工厂，例如:

app.factory('MyResource', function($resource) {
  return function(endpoint) {
    return $resource('/' + endpoint);
  }
});

然后在 Controller 中使用它:

app.controller('TableController', function($scope, MyResource, endpoint) {
  var currentResource = MyResource(endpoint);
  currentResource.query(); // Whatever you want to do with the $resource;
}

假设“端点”是添加到 resolve 中的选项之一，所以类似于

when('/orders', {
  templateUrl: '/partials/table.html',
  controller: 'TableController',
  resolve: {
     'endpoint': function() {
        return '/orders'
     }