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

标记

我将尽力简洁地解释这一点。

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

可以说我们有两个模块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并将它们组合成仅可由两个模块中的ui-router使用的FormCtrl

赫南·马格里尼(Hernan Magrini)

好的,阅读编辑后的示例,它可以通过两种方法完成,我能想到的最好的方法是(我将在解决方案之前解释原因):

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

我为什么要这样做?是的,您可以在“ formModule”上创建一个控制器而不是服务,但是您不会从该控制器知道“ A”和“ B”的状态,并且如果以后需要对某些问题做出反应设置在模块上或与模块中的任何组件进行通信(特别是此操作,因为您需要将该组件注入到“ formModule”中,从而创建递归依赖项),所以您将遇到很大的问题。

我这样做的方式允许您将所需的每个方法从“ formService”公开到视图,最重要的是,您可以在其自己的控制器上添加特定于任一模块的代码。

旧答案:

简短的答案是:

  • 一个工厂,用于管理与API通讯相关的所有事情(向服务器请求/保留数据)
  • 一种为控制器提供通用API的服务,通过这种服务,您可以抽象出要重用的方法,并通过将服务作为依赖项注入,从而在每个控制器上使用它们。

更长的答案(我个人建议您阅读它,因为它会对您有很大帮助)是:AngularJS:服务vs提供程序vs工厂

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章