2014-09-19 90 views
0

作为学习角度的一部分,我决定使用ng-boilerplate作为起点创建一个简单的bug跟踪器应用程序,因为我喜欢他们的文件夹结构方法。我已经下了auth,并进入了“会员区”,其中列出了所有用户项目,并允许他们创建新项目并最终为每个项目添加错误。CRUD应用程序的理想代码/文件夹结构

我有一点点在关于构建代码中的“角办法”分析瘫痪到目前为止,我有:

- 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' 

      } 
     }); 
    }) 


; 

回答

0

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