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页面中。如果您添加了单个文件，则不会执行html, body { height: 100%; min-height: 100%; } select{ width: 300px; }和services.js。

将角度模块分离成组件

1 个答案: