我在AngularJS中有两个CRUD屏幕。
1)用于查看,添加和编辑的单独的html文件。 View Controller,Add Controller和Edit Controllers也分开。这种结构在html和控制器端创建了更多重复的代码。
2)为视图,添加单独的html文件。查看控制器,仅添加控制器单独。在编辑模式下,我在控制器中使用布尔值来查找或不在编辑模式下。
我是AngularJS的新手。任何人都清楚地告诉我我的利弊,哪种方法在AngularJS“关注分离”概念中是正确的。
最佳答案
我不确定您的方向是否正确。
通过分离关注点,目的是拆分负责管理视图的代码和负责对服务器进行调用的代码。假设您想对一个人进行CRUD,我将执行以下操作:
服务内容:
angular.module('app').factory("personService", ["$http", function($http)]){
return {
create : create,
update: update,
remove : remove,
get: get
};
function create(person){
return http.post("person/create", person);
}
// other functions
}
然后,我将只有1个控制器来执行所有操作:
angular.module("app").controller("PersonController", ["personService", function(personService)]){
var self = this;
self.isUpdate = true; // Insert logic here
self.isCreate = false; // Insert logic here
init();
self.save = function(){
var promise = self.isCreate ?
personService.create(self.person)
:personService.update(self.person);
promise.then(function(result){
// Handle return of save;
});
};
function init(){
if (!self.isCreate){
personService.get(personId).then(function(result){
self.person = result.data.person;
});
}
}
}
然后,我将具有以下观点:
<div ng-controller="personController as person">
<label>Name: </label>
<input type="text" ng-disabled="!person.isUpdate" ng-model="person.person.name" />
<button ng-click="person.isUpdate = !person.isUpdate;">Edit</button>
<!-- Edit : the code 'person.isUpdate = !person.isUpdate;' could also be into a controller's function (like the save function) -->
<button ng-click="person.save()" ng-if="person.isUpdate">Save</save>
</div>
我也建议您阅读以下内容:https://github.com/johnpapa/angular-styleguide