作为学习角度的一部分,我决定使用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'
}
});
})
;