javascript - 将 Angular 模块分成组件

Question

我首先将所有内容都放入一个 app.js 中，但这不是一个好方法。所以我想分成不同的文件，我认为最好的方法是制作 3 个不同的文件(因为我只有 Controller 和服务)。主要入口点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: "/"
            })
      });

Controller .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);
        }
    });

服务.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

And from my index.html I use the script app.js

如果您想让它们正常工作，您绝对应该将所有文件包含到 HTML 页面中。如果您添加单个文件，您的 services.js 和 controllers.js 将不会被执行。