Question

作为学习角度的一部分，我决定使用ng-boilerplate创建一个简单的bug跟踪器应用程序作为起点，因为我喜欢他们的文件夹结构方法。我已经获得了授权，并已移至“成员区”，其中列出了所有用户项目，并允许他们创建新项目并最终为每个项目添加错误。

关于将代码构造成“角度方式”，我有一些分析瘫痪。到目前为止，我有：

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

在member.js中我有一个memberctrl，它列出了用户项目并添加了一个新项目，调用一个名为ProjectsService的工厂（也位于member.js中）来完成这两项工作。 ProjectsService目前有两个方法，query（）和add（），但显然这会增加到包括更新，删除等。

add-project文件夹中的add.js目前似乎有点多余，但我担心成员控制器会增长（编辑项目，添加错误，编辑错误等）所以会是什么理想的结构向前发展？我是否应该在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-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

CRUD app的理想代码/文件夹结构

1 个答案: