將角度模塊分解爲組件

Question

我首先將所有東西都放到了一個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我使用的腳本app.js

你一定要包括所有文件到HTML頁面，如果你想使他們的工作。如果你添加了單個文件，你的services.js和controllers.js就不會被執行。