Wie teilt man angularjs Controller in Stücke?

Question

Ich bin AngularJs sehr neu und hoffe, ich kann hier Hilfe bekommen. Im Folgenden habe ich zwei Controller, die sehr ähnlich sind. Eine ist zum Bearbeiten eines Elements und eine zum Hinzufügen eines neuen Elements. Ich würde gerne wissen, wie ich diesen Code umgestalten kann, um den Großteil dieses Codes für beide Controller wiederzuverwenden oder einfach einen Controller für beide zu verwenden. Ich habe ursprünglich versucht, einen Controller für beide zu verwenden, aber die neue Artikelseite ließ mich nichts in die Felder eingeben. Ich nehme an, weil es keine aktuellen Modelldaten gab, wie es beim Editieren gibt.

Jede Hilfe wäre willkommen.

tplApp.controller('editController', function ($scope, $http, $routeParams){ 

    $scope.template = {}; 
    $scope.id = $routeParams.template_id; 

    $http.get(baseUrl+'templates/get_template/'+$scope.id).success(function(data) { 
     $scope.template = data; 
    }); 

    $scope.bodyOptions = { 
     plugins: 'link image code', 
     toolbar: 'bold, italic, underline, alignleft, aligncenter, alignright, alignjustify, styleselect, bullist, numlist, outdent, indent, removeformat, mybutton, code', 
     height: 300, 
     menubar: false, 
     statusbar: false, 
     setup: function(editor) { 
      editor.addButton('mybutton', { 
       type: 'menubutton', 
       text: 'Variables', 
       icon: false, 
       menu: [ 
        {text: 'Candidate Name', onclick: function() {editor.insertContent('%name%');}}, 
        {text: 'Company Name', onclick: function() {editor.insertContent('%company-name%');}}, 
        {text: 'Today\'s Date', onclick: function() {editor.insertContent('%date%');}}, 
        {text: 'Your Name', onclick: function() {editor.insertContent('%your-name%');}}, 
       ] 
      }); 
     } 
    }; 

    $scope.saveTemplate = function() { 
     $http({ 
      method : 'POST', 
      url  : baseUrl+'templates/save', 
      data : $.param($scope.template), 
      headers : { 'Content-Type': 'application/x-www-form-urlencoded' } 
     }) 
     .success(function(data) { 
      $scope.message = data.message; 
      if (data.success) { 
       console.log(data); 
       $scope.templates = data.templates; 
      } 
     }); 
    }; 



}); 



tplApp.controller('addController', function ($scope, $http){ 

    $scope.template = {}; 

    $scope.bodyOptions = { 
     plugins: 'link image code', 
     toolbar: 'bold, italic, underline, alignleft, aligncenter, alignright, alignjustify, styleselect, bullist, numlist, outdent, indent, removeformat, mybutton, code', 
     height: 300, 
     menubar: false, 
     statusbar: false, 
     setup: function(editor) { 
      editor.addButton('mybutton', { 
       type: 'menubutton', 
       text: 'Variables', 
       icon: false, 
       menu: [ 
        {text: 'Candidate Name', onclick: function() {editor.insertContent('%name%');}}, 
        {text: 'Company Name', onclick: function() {editor.insertContent('%company-name%');}}, 
        {text: 'Today\'s Date', onclick: function() {editor.insertContent('%date%');}}, 
        {text: 'Your Name', onclick: function() {editor.insertContent('%your-name%');}}, 
       ] 
      }); 
     } 
    }; 

    $scope.saveTemplate = function() { 
     $http({ 
      method : 'POST', 
      url  : baseUrl+'templates/save', 
      data : $.param($scope.template), 
      headers : { 'Content-Type': 'application/x-www-form-urlencoded' } 
     }) 
     .success(function(data) { 
      $scope.message = data.message; 
      if (data.success) { 
       console.log(data); 
       $scope.templates = data.templates; 
      } 
     }); 
    }; 



}); 

Answer 1

Was Sie wollen, ist ein Service: https://docs.angularjs.org/guide/services „Sie können Dienste nutzen zu organisieren und zu teilen Code für Ihre Anwendung“

Google es und/oder hier für weitere Informationen in SO aussehen.

Answer 2

Versuchen Sie diese Änderungen. Sie benötigen 2 Dienste + 2 Controller (für saveTemplateService.js und buildBodyOptionsService.js). Die Dienste werden in die Controller eingespeist.

Am Ende, vergessen Sie nicht, die src jedes Dienstes in der Vorlage/HTML-Datei hinzuzufügen.

Ich denke, es könnte noch mehr reduziert werden (ohne die $http 's success in den Controllern), aber da wir hier mit Rückrufen arbeiten, bin ich mir nicht sicher. Versuch es ;).

Es ist möglicherweise nicht voll funktionsfähig, weil ich nicht Ihren ganzen Code habe. Aber das Debugging sollte es lösen.

saveTemplateService.js:

app.factory('saveTemplateService', function (baseUrl, $http) { 
    return $http({ 
       method : 'POST', 
       url  : baseUrl+'templates/save', 
       data : $.param($scope.template), //fix these (injecting them like baseUrl) 
       headers : { 'Content-Type': 'application/x-www-form-urlencoded' } 
      }); 
}); 

buildBodyOptionsService.js:

app.factory('buildBodyOptionsService', function() { 
    return { 
     build: function (editor) { //maybe editor needs to be injected 
      var output = { 
       plugins: 'link image code', 
       toolbar: 'bold, italic, underline, alignleft, aligncenter, alignright, alignjustify, styleselect, bullist, numlist, outdent, indent, removeformat, mybutton, code', 
       height: 300, 
       menubar: false, 
       statusbar: false, 
       setup: function(editor) { 
        editor.addButton('mybutton', { 
         type: 'menubutton', 
         text: 'Variables', 
         icon: false, 
         menu: [ 
          {text: 'Candidate Name', onclick: function() {editor.insertContent('%name%');}}, // I dont like this functions here. There must be a better way to do this (ex: in a partial html with ng-click) 
          {text: 'Company Name', onclick: function() {editor.insertContent('%company-name%');}}, 
          {text: 'Today\'s Date', onclick: function() {editor.insertContent('%date%');}}, 
          {text: 'Your Name', onclick: function() {editor.insertContent('%your-name%');}}, 
         ] 
        }); 
       } 
      }; 
      return output; 
     } 
    }; 
}); 

editController.js

tplApp.controller('editController', function ($scope, saveTemplateService, buildBodyOptionsService) { 
    $scope.template = {}; 

    $scope.id = $routeParams.template_id; 
    $http.get(baseUrl+'templates/get_template/'+$scope.id) 
      .success(function(data) { 
       $scope.template = data; 
    }); 

    // call 1st service 
    $scope.bodyOptions = buildBodyOptionsService.build(editor); 

    // call 2nd service 
    $scope.saveTemplate = saveTemplateService.success(function(data) { 
     $scope.message = data.message; 
      if (data.success) { 
       console.log(data); //use $log.info() instead 
       $scope.templates = data.templates; 
      } 
    }); 
}); 

addController.js

tplApp.controller('addController', function ($scope, saveTemplateService, buildBodyOptionsService) { 
    $scope.template = {}; 

    // call 1st service 
    $scope.bodyOptions = buildBodyOptionsService.build(editor); 

    // call 2nd service 
    $scope.saveTemplate = saveTemplateService.success(function(data) { 
     $scope.message = data.message; 
      if (data.success) { 
       console.log(data); //use $log.info() instead 
       $scope.templates = data.templates; 
      } 
    }); 
}); 

Schauen Sie sich diese Links für weitere Informationen:

• individuelle Dienste in Angular (wirklich gut erklärt): https://youtu.be/rlx1cf7qM0E?list=PL6n9fhu94yhWKHkcL7RJmmXyxkuFB3KSl

• Versprechen in Dienstleistungen : AngularJS: Performing $http request inside custom service and returning data

• (relevant) Angular $http difference between .success() and .then()

Answer 3

Ich würde wahrscheinlich alles in einem einzigen Dienst (templateService) setzen. Ich bin mir nicht sicher, ob die bodyOption dort hingehört, aber für den Moment würde ich es einfach dort hinstellen.Dann würde ich die Load/Save Template-Funktion auf den Dienst verschieben.

Sie könnten wahrscheinlich mehr tun, zum Beispiel könnten Sie den $ scope.templateService = templateService setzen und in Ihrem html templateService.bodyOptions/templates direkt verwenden.

Sie könnten wahrscheinlich auch save.success vom Controller zum Dienst verschieben.

tplApp.service('templateService', function($http, $routeParams) { 

var self = this; 
this.template = {}; 

this.loadTemplate = function() { 
    $http.get(baseUrl+'templates/get_template/' + $routeParams.template_id) 
     .success(function(data) { 
      self.template = data; 
     }); 
}; 

this.saveTemplate = function() { 
    return $http({ 
     method: 'POST', 
     url: baseUrl + 'templates/save', 
     data: $.param(self.template), 
     headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
    }); 
}; 

this.bodyOptions = { 
    plugins: 'link image code', 
    toolbar: 'bold, italic, underline, alignleft, aligncenter, alignright, alignjustify, styleselect, bullist, numlist, outdent, indent, removeformat, mybutton, code', 
    height: 300, 
    menubar: false, 
    statusbar: false, 
    setup: function(editor) { 
     editor.addButton('mybutton', { 
      type: 'menubutton', 
      text: 'Variables', 
      icon: false, 
      menu: [ 
       {text: 'Candidate Name', onclick: function() {editor.insertContent('%name%');}}, 
       {text: 'Company Name', onclick: function() {editor.insertContent('%company-name%');}}, 
       {text: 'Today\'s Date', onclick: function() {editor.insertContent('%date%');}}, 
       {text: 'Your Name', onclick: function() {editor.insertContent('%your-name%');}}, 
      ] 
     }); 
    } 
}; 
}); 

tplApp.controller('editAndAddController', function ($scope, templateService){ 
$scope.template = templateService.template; 
$scope.bodyOptions = templateService.bodyOptions; 

if(edit) { 
    templateService.loadTemplate(); 
} 

$scope.saveTemplate = function() { 
    templateService.saveTemplate() 
     .success(function(data) { 
      $scope.message = data.message; 
      if (data.success) { 
       console.log(data); 
       $scope.templates = data.templates; 
      } 
     }); 
}; 
}); 

Idealerweise würde der Controller wahrscheinlich so aussehen:

tplApp.controller('editAndAddController', function ($scope, templateService){ 
$scope.templateService = templateService; 

if(edit) { 
    templateService.loadTemplate(); 
} 
}); 

up Heads! Dies ist nur ein Beispiel, der Code wurde nicht getestet!