Question

我会尽量简明扼要地解释这一点。

我有一个无法立即转换为单个角应用的应用。因此，我们有许多独立的模块，目前是有效的个人应用程序，并在他们自己的相关页面上实例化

假设我们有两个模块A + B都使用angular-ui-router来管理状态和视图，它们都访问相同的rest api，但是它们以非常不同的方式显示信息。但是，要在A + B中创建或编辑资源，请使用相同的表单。

这个表单有一个可以轻松共享的模板，但它还有一个控制器，现在是A.controller（'formcontroller'）。对于我来说，将控制器从A模块中取出并将其注入A + B的最佳方式（有没有办法）是什么？

一些伪代码可以解释我想知道的更清楚

angular.module('A', ['ApiService', 'ui.router'])
    .config(function($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('templateA', {
                controller: 'templateACtrl'
            })
            .state('tempalteA.form', {
                controller: 'templateAFormCtrl'
            })
    })
    .controller('TemplateACtrl', function () {
    })
    .controller('TemplateAFormCtrl', function() {
    });

angular.module('B', ['ApiService', 'ui.router'])
    .config(function($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('templateB', {
                controller: 'templateBCtrl'
            })
            .state('tempalteB.form', {
                controller: 'templateBFormCtrl'
            })
    })
    .controller('TemplateBCtrl', function () {
    })
    .controller('TemplateBFormCtrl', function() {
    });

我想摆脱TemplateAFormCtrl和TemplateBFormCtrl，并将它们整合到FormCtrl中，ui-router可以在两个模块中使用

Answer 1

好的，阅读已编辑的示例，可以通过几种方式完成，我能想到的最好的一个（我将在解决方案之前解释原因）是：

angular.module('formModule', [])
  .service('formService', function(){
    //Everything that can be abstracted from templateAFormCtrl should be here
  });

angular.module('A', ['formModule'])
.config(function($stateProvider, $urlRouterProvider) {
    //$stateProvider config
    $stateProvider
        .state('tempalteA.form', {
            controller: 'templateAFormCtrl'
        })
})
.controller('TemplateAFormCtrl', function(formService) {
    //Assuming you're working with 'controller as' syntax, else attach to $scope
    this.formService = formService;
});

angular.module('B', ['formModule'])
.config(function($stateProvider, $urlRouterProvider) {
    //$stateProvider config
    $stateProvider
        .state('tempalteB.form', {
            controller: 'TemplateBFormCtrl'
        })
})
.controller('TemplateBFormCtrl', function(formService) {
    //Assuming you're working with 'controller as' syntax, else attach to $scope
    this.formService = formService;
});

为什么我会这样做？是的，你可以在＆＃39; formModule＆＃39;上创建一个控制器。而不是服务，但你不会意识到＆＃39; A＆＃39;和＆＃39; B＆＃39;从那个控制器，如果你以后需要对任何模块上设置的东西作出反应或与其中的任何组件通信（特别是这个，因为你需要将该组件注入到＆＃39; formModule＆＃39 ;因此创建一个递归依赖），你会遇到很大的问题。

我这样做的方式，允许你公开你想要的每一种方法＆＃39; formService＆＃39;根据您的观点，您可以在其自己的控制器上添加特定于任一模块的代码。

OLD ANSWER：

简短的回答是：

工厂管理与API通信相关的所有内容（向服务器请求/保留数据）
服务为控制器提供通用API，这样您就可以抽象出要重用的方法，并通过将服务作为依赖项注入每个控制器上使用它们。

更长的答案（我个人建议你阅读它，因为它会对你有所帮助）是这样的：AngularJS: Service vs provider vs factory

在模块之间“共享”控制器

1 个答案: