角度モジュールをコンポーネントに分割する

Question

私はまずすべてを1つのapp.jsに収めましたが、これは良いアプローチではありません。だから私は別のファイルに分けたいと思っていました.3つの異なるファイルを作るのが最良の方法だと思っていました。 主な入口ポイントapp.js、そして次にcontrollers.jsとservices.js 読んだら、それはメインモジュールを定義し、他のモジュールを依存関係として使用することになっています。しかし、それは動作していません。ここ は、ファイル定義です：

app.js：

angular.module("personasApp", ["ngRoute", "personasApp.services", "personasApp.controllers"]) 
    .config(function($routeProvider) { 
     $routeProvider 
      .when("/", { 
       controller: "ListController", 
       templateUrl: "list.html", 
       resolve: { 
        personas: function(Personas) { 
         return Personas.getPersonas(); 
        } 
       } 
      }) 
      .when("/facturas/nueva", { 
       controller: "CargarFacturaControlador", 
       templateUrl: "facturas-form.html" 
      }) 
      .when("/personas/nueva", { 
       controller: "NuevaPersonaControlador", 
       templateUrl: "contact-form.html" 
      }) 
      .when("/personas/:personaId", { 
       controller: "EditarPersonaControlador", 
       templateUrl: "contact.html" 
      }) 
      .otherwise({ 
       redirectTo: "/" 
      }) 
     }); 

controllers.js

angular.module("personasApp.controllers", ["ngRoute"]) 
    .controller("ListController", function(personas, $scope) { 
     $scope.personas = personas.data; 
    }); 
    .controller("CargarFacturaControlador", function($scope, $location, Facturas) { 
     $scope.atras = function() { 
      $location.path("#/"); 
     } 

     $scope.cargarFactura = function(factura) { 
      Facturas.cargarFactura(factura).then(function(doc) { 
       var facturaUrl = "/facturas/" + doc.data._id; 
       $location.path(facturasUrl); 
      }, function(response) { 
       alert(response); 
      }); 
     } 
    }) 
    .controller("NuevaPersonaControlador", function($scope, $location, Personas) { 
     $scope.atras = function() { 
      $location.path("#/"); 
     } 

     $scope.guardarPersona = function(persona) { 
      Personas.crearPersona(persona).then(function(doc) { 
       var personaUrl = "/personas/" + doc.data._id; 
       $location.path(personaUrl); 
      }, function(response) { 
       alert(response); 
      }); 
     } 
    }) 
    .controller("EditarPersonaControlador", function($scope, $routeParams, Personas) { 
     Personas.getPersona($routeParams.personaId).then(function(doc) { 
      $scope.persona = doc.data; 
     }, function(response) { 
      alert(response); 
     }); 

     $scope.toggleEdit = function() { 
      $scope.editMode = true; 
      $scope.contactFormUrl = "contact-form.html"; 
     } 

     $scope.atras = function() { 
      $scope.editMode = false; 
      $scope.contactFormUrl = ""; 
     } 

     $scope.guardarPersona = function(persona) { 
      Personas.editarPersona(persona); 
      $scope.editMode = false; 
      $scope.contactFormUrl = ""; 
     } 

     $scope.borrarPersona = function(personaId) { 
      Personas.borrarPersona(personaId); 
     } 
    }); 

services.js

angular.module("personasApp.services", ["ngRoute"]) 
    .service("Facturas", function($http) { 
     this.cargarFactura = function(factura) { 
      return $http.post("/facturas", factura). 
       then(function(response) { 
        return response; 
       }, function(response) { 
        alert("Error cargando factura."); 
       }); 
     } 
    }) 
    .service("Personas", function($http) { 
     this.getPersonas = function() { 
      return $http.get("/personas"). 
       then(function(response) { 
        return response; 
       }, function(response) { 
        alert("Error intentando encontrar personas."); 
       }); 
     } 
     this.crearPersona = function(persona) { 
      return $http.post("/personas", persona). 
       then(function(response) { 
        return response; 
       }, function(response) { 
        alert("Error creando persona."); 
       }); 
     } 
     this.getPersona = function(personaId) { 
      var url = "/personas/" + personaId; 
      return $http.get(url). 
       then(function(response) { 
        return response; 
       }, function(response) { 
        alert("No se pudo encontrar esta persona."); 
       }); 
     } 
     this.editarPersona = function(persona) { 
      var url = "/personas/" + persona._id; 
      //console.log(contact._id); 
      return $http.put(url, persona). 
       then(function(response) { 
        return response; 
       }, function(response) { 
        alert("Error al editar esta persona."); 
        console.log(response); 
       }); 
     } 
     this.borrarPersona = function(personaId) { 
      var url = "/personas/" + personaId; 
      return $http.delete(url). 
       then(function(response) { 
        return response; 
       }, function(response) { 
        alert("Error al borar esta persona."); 
        console.log(response); 
       }); 
     } 
    }) 
); 

そして、私のindex.htmlから、私が使用してスクリプトapp.js

Answer 1

そして、私のindex.htmlから、私はスクリプトを使用するには、あなたは彼らが働くようにしたい場合は、間違いなく、HTMLページにすべてのファイルを含める必要があり

をapp.js。単一のファイルを追加した場合、services.jsとcontrollers.jsは実行されません。