AngularJS: добавить один и тот же компонент в несколько модулей

Question

Я использую https://coreui.io/demo/#main.html основной шаблон начальной загрузки пользовательского интерфейса.

У меня есть несколько модулей + контроллер. Например, вот так:

mypartapp1.js:

 angular
    .module("app", [])
    .controller('ComptesController', ComptesController)
   // etc ...

mypartapp2.js:

    angular
    .module("app", [])
   .controller('EnseignesController', EnseignesController)
    // etc ...

Я создал очень большой компонент, совместимый с каждым из моих контроллеров (многоразовый), нужно ли переписывать его внутри каждого файла (mypartapp1.js), мой partapp2.js ...), потому что я хотел бы, чтобы он был уникальным, и не знаю, как это сделать.

Как я могу просто вызвать его по тому же пути?

Этомой большой компонент для информации:

.component('filtresDyn', {
    templateUrl:'_crm/views/include/filtres_dyn.html',
    controller : [ '$http','$scope','$rootScope','toastr',function control($http,$scope,$rootScope,toastr){


         const table = 'crm_comptes';


         this.filtres = [];


        $http.post("./_crm/backend/backend.php?action=GetColumnsNames", {'table':table}).then(function(response) {
            this.table = response.data;
        }.bind(this))

         this.operateurs = [
            {'nom':'LIKE','traduction':'Contient'},
            {'nom':'NOT LIKE','traduction':'Ne Contient Pas'},
            {'nom':'=','traduction':'Est'},
            {'nom':'!=','traduction':'N\'est pas'},
            {'nom':'NULL','traduction':'Est vierge'},
            {'nom':'NOT NULL','traduction':'N\'est pas vierge'},
            {'nom':'>','traduction':'Est supérieur à'},
            {'nom':'<','traduction':'N\'est pas supérieur à '}
        ];


        this.Get_filtered_data = function(){

            $scope.$parent.Get_filtered_data(this.filtres); 
        }



        this.addElement = function(){
            this.filtres.push({'champs':'','operateur':'','critere':'','table':table});

        }

        this.spliceElement = function(){
            this.filtres.splice(-1,1);

        }

        this.verify_data_type = function(champs,parent){

            switch(champs.data_type) {
                case 'integer':
                    parent.showInteger = true;
                    parent.showDate = false;
                    parent.showText = false;
                    break;
                case 'date':
                    parent.showInteger = false;
                    parent.showDate = true;
                    parent.showText = false;
                    break;
                case 'character varying':
                    parent.showInteger = false;
                    parent.showDate = false;
                    parent.showText = true;
                    break;
                default:
                    parent.showInteger = false;
                    parent.showDate = false;
                    parent.showText = true;
            } 



        }



        this.nomF = ''; 

        this.ChargeFiltresPersos = function(){
                $http.post("./_crm/backend/backend.php?action=GetFiltresDynamique",{'id'    : $rootScope.user.id})
                    .then(function(response) {

                        angular.forEach(response.data,function(value,key){
                                angular.forEach(value.filtres,function(value,key){
                                    if(value.showDate == true){
                                         value.critere = new Date(value.critere);
                                    }
                                 });
                        });


                        this.listeFiltresUser = response.data;

                }.bind(this))
        }

        this.sauverFiltre = function(){

                $http.post("./_crm/backend/backend.php?action=SetFiltresDynamique",
                    {
                    'id_liseo_utilisateurs' :   $rootScope.user.id_liseo_utilisateurs,
                    'filtres'               :   this.filtres,
                    'nom_filtre'            :   this.nomF
                    })
                    .then(function(response) {
                         toastr.success('Bien Joué !', 'Votre filtre a bien été enregistré.');

                        $http.post("./_crm/backend/backend.php?action=GetFiltresDynamique",{'id'    : $rootScope.user.id})
                            .then(function(response) {
                                this.listeFiltresUser = response.data;
                        }.bind(this));

                    }.bind(this))

        }   

            this.chargerMonFiltrePersonnel = function(array){

                    this.filtres = angular.copy(array.filtres);

                    this.Get_filtered_data(); 

            }




        this.filtres.push({'champs':'','operateur':'','critere':'','table':table});

        this.ChargeFiltresPersos();

    }]
  })

Нужно ли переписывать это в каждом из моих файловых модулей?Он не будет хорошо выглядеть и должен быть уникальным

Answer 1

При создании компонента добавьте другие модули в зависимости, чтобы использовать компонент в нескольких модулях.

angular.module("app1", []);

angular.module("app2", ["app1"])
.component("myComponent",{}); //component can used in multiple modules 

Проверьте ссылку, я добавил общую структуру общего компонента: https://next.plnkr.co/edit/MlktyFgTYCgHXBo9?preview