Question

我正在构建一个AngularJS应用程序，现在我只有一个.js文件，其中包含控制器，服务，过滤器，指令......

看起来像这样：

angular.module('msfLogger', ['offClick', 'ngBootstrap', 'ngSanitize','ngCsv', 'angularFileUpload'])

.controller('LoggerCtrl',['$scope', 'dataService', function($scope, dataService)
     { ... }])

.filter('showhide', function() {
    ...
})

.service('dataService', function() {
    ...
})

.directive('headerLinks', function() {
    ...
});

现在正在运作，但我认为这不是一个好习惯。

我应该如何拆分文件？我称它们的顺序有什么不同吗？

我应该包括

angular.module('msfLogger', ['offClick', 'ngBootstrap', 'ngSanitize','ngCsv', 'angularFileUpload'])

在所有这些中？

Answer 1

我建议您关注angular styleguide from John Papa，它会为每个功能使用一个文件夹。

Answer 2

关于如何分割文件通常有两种思想流派。一种是按类型拆分，例如controller，directive，filter，view等：

root  
 - controller
     - controller-1.js
     - controller-2.js
 - directive  
     - directive-1.js
     - directive-2.js
 - filter
     - filter-1.js
     - filter-2.js
 - view
     - partial-1.html
     - partial-2.html

另一个是按上下文或功能逻辑分组的文件组：

root  
   - login
     - login-controller.js
     - login-directive.js
     - login-view.html
   - account
     - account-controller.js
     - account-directive.js
     - account-view.html

您选择的是由您自己决定的。我发现第一个适用于非常小的项目，但我很快就进入了第二个更大的项目。

Answer 3

这是一篇关于角度应用程序结构的好文章：https://scotch.io/tutorials/angularjs-best-practices-directory-structure

Answer 4

是的，分割文件会更好，下面是Angular服务和使用该服务的Angular控制器的示例。只要你确保包含两个.js文件，你应该没问题。

这是服务（ReadPolicyService.js）

(function () {
    var readPolicy = function ($http) {

    var read = function
        (
          searchTerm
        ) {

        return $http({
            url: localStorage["policyServiceUrl"] + "api/ReadPolicy/Read",
            dataType: 'json',
            method: 'POST',
            headers: {
                "Authorization": "Bearer " + localStorage["yat"]
            },
            data: {
                "SearchTerm": searchTerm
            }
        }).success(function (response) {
            return response.data;
        });
    };

    return {
        read: read
    };
};


var module = angular.module("yugasat");
module.factory("readPolicy", ["$http", readPolicy]);
}());

这是Controller（SearchPolicyController.js）

(function () {
var module = angular.module("yugasat");

var searchPolicyController = function ($scope, readPolicy) {
    $scope.policies = [];
    $scope.searchTerm = "";
    $scope.isBusy = false;
    $scope.policyError = false;
    $scope.policySuccess = false;

    $scope.searchPolicy = function () {
        $scope.policyError = false;
        $scope.policySuccess = false;
        $scope.isBusy = true;

        readPolicy.read($scope.searchTerm).then(function (response) {

            if (response.data.Policies.length > 0) {

              angular.copy(response.data.Policies, $scope.policies);

              $scope.isBusy = false;
              $scope.policyError = false;
              $scope.policySuccess = true;

                 } else {

                     $scope.isBusy = false;
                     $scope.policyError = true;
                     $scope.policySuccess = false;
                 }
        }, function() {
            window.location = "/Error/Index";
        });
    }
};

module.controller("searchPolicyController", ["$scope", "readPolicy", searchPolicyController]);
}());

Answer 5

过去几周我一直在研究同样的问题，所以虽然不是专家，但我可以向您指出我认为有用的资源。

如果您有复数订阅，我建议John Papa的课程AngularJS模式：清洁代码 http://www.johnpapa.net/angularjs-patterns-clean-code-released/

如果没有，还是值得浏览git hub上的课程资料： https://github.com/johnpapa/ng-demos/ 看看模块化应用程序（src / client / app）以及他的app.module.js如何引入其余的模块，以及它们的组织方式。

另请查看他的dataservice文件夹。他的应用程序的任何需要API信息的部分都可以通过该服务获得。

我刚刚开始进行单元测试（https://docs.angularjs.org/guide/unit-testing），这让我进一步重组我的代码。

在AngularJS App中拆分JS文件

5 个答案: