CRUD應用程序的理想代碼/文件夾結構

作爲學習角度的一部分，我決定使用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' 

      } 
     }); 
    }) 


;

來源

2014-09-19 Ian P

在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

來源

2014-09-19 09:25:00 meriadec

CRUD應用程序的理想代碼/文件夾結構

回答

相關問題