Как часть изучения углового я решил создать простое приложение для отслеживания ошибок с использованием ng-patplate в качестве отправной точки, поскольку мне нравится их подход к структуре папок. У меня есть аут-хаус и перешел на «область пользователей», в которой перечислены все проекты пользователей и позволяет им создавать новые проекты и, в конечном итоге, добавлять ошибки к каждому проекту.идеальный код/структура папок для приложения CRUD
У меня есть немного . анализ паралич в отношении структурирования коды на «угловом пути» до сих пор у меня есть:
- member
— add-project
—— add.js
—— add.tpl.html
- member.tpl.html
- member.js
внутри member.js у меня есть memberctrl, который перечисляет пользователь проекты и добавляет новый проект, назвав завод под названием ProjectsService (также сидя в member.js), чтобы сделать оба. В ProjectService в настоящее время есть два метода: query() и add(), хотя очевидно, что это увеличится, включая обновление, удаление и т. д.
В настоящее время add.js в папке add-project кажется немного избыточным, но я обеспокоен тем, что контроллер-член будет расти (редактирование проектов, добавление ошибок, редактирование ошибок и т. Д.), Так что идеальная структура в будущем? Должен ли я иметь отдельный addProjectCtrl внутри add.js исключительно для добавления проекта? Должен ли я удалить add() из ProjectService и перенести его на свой собственный завод в 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'
}
});
})
;