CRUD应用程序的理想代码/文件夹结构

Question

作为学习angular的一部分，我决定创建一个简单的bug跟踪应用程序，使用ng-boilerplate作为起点，因为我喜欢他们的文件夹结构方法。我已经得到了认证，并转移到了“成员区域”，该区域列出了所有用户的项目，并允许他们创建新项目，并最终向每个项目添加bug。

关于以“angular方式”构建代码，我有一点分析瘫痪。到目前为止，我有：

- member
— add-project
—— add.js
—— add.tpl.html
- member.tpl.html
- member.js

在member.js中，我有一个memberctrl，它列出用户的项目并添加一个新项目，调用一个名为ProjectsService (也在member.js中)的工厂来完成这两项工作。ProjectsService目前有两个方法，query()和add()，尽管很明显这会增加到包括update，delete等。

add- add.js文件夹中的项目目前看起来有点多余，但我担心成员控制器会增长(编辑项目，添加bug，编辑bug等)，那么未来理想的结构是什么？我是否应该在add.js中有一个单独的addProjectCtrl来单独添加项目？我是否应该从ProjectsService中删除add()，并将其也移到add.js中自己的工厂中？

member.js的代码如下

.controller('MemberCtrl', function MemberCtrl($scope, $location,ProjectsService) {
        $scope.projects = [];
        $scope.refresh = function () {
            ProjectsService.query()
                .then(function (data) {
                    $scope.projects = data;
                });
        };


    $scope.addProject = function (project) {
        ProjectsService.add(project).then(function (data) {
            $scope.projects = data;
            $location.path("/member");
        });
    };


    //is this just going to get bigger and bigger?

    $scope.refresh();
})

.factory('ProjectsService', ['$http', '$q', function ($http, $q) {
    return {
        query: function () {
            var deferred = $q.defer();
            $http.get('/api/get-projects')
                .success(function (data) {
                    deferred.resolve(data);
                })
                .error(function (data) {
                    deferred.reject(data);
                });

            return deferred.promise;
        },
        add: function (project) {
            var deferred = $q.defer();
            $http.post('/api/create-project', project)
                .success(function (data) {
                    deferred.resolve(data);
                })
                .error(function (data) {
                    deferred.reject(data);
                });

            return deferred.promise;
        }

    };
}])

和add.js的代码

angular.module( 'ngBoilerplate.member.add-project', [
    'ui.router',
    'placeholders',
    'ui.bootstrap',
    'ngBoilerplate.config',
    'ngBoilerplate.member'
])


    .config(function config( $stateProvider,USER_ROLES ) {
        $stateProvider.state( 'member.add-project', {
            url: '/add-project',
            views: {
                "main": {
                    templateUrl: 'member/add-project/add.tpl.html'
                }
            },
            data:{ pageTitle: 'Add Project'

            }
        });
    })


;

Answer 1

看看official angular-seed project，或者Yeoman angular generator，它将为你开始你的angular项目提供一个基本的结构。

通常一个好的做法是将控制器/服务/指令拆分到不同的文件中。

有关更详细的代码指南，请阅读流行的angular-style-guide。从其中提取，下面是一个结构示例：

.
├── app
│   ├── app.js
│   ├── controllers
│   │   ├── home
│   │   │   ├── FirstCtrl.js
│   │   │   └── SecondCtrl.js
│   │   └── about
│   │       └── ThirdCtrl.js
│   ├── directives
│   │   ├── home
│   │   │   └── directive1.js
│   │   └── about
│   │       ├── directive2.js
│   │       └── directive3.js
│   ├── filters
│   │   ├── home
│   │   └── about
│   └── services
│       ├── CommonService.js
│       ├── cache
│       │   ├── Cache1.js
│       │   └── Cache2.js
│       └── models
│           ├── Model1.js
│           └── Model2.js
├── partials
├── lib
└── test