AngularJS:正确使用控制器和工厂
我是AngularJS的新生儿,当我得到AngularJS的新项目时,已经有其他开发人员编写的代码了。当我开始深入讨论代码时,我看到了视图控制器工厂“连接”实现的两种方式。 第一个是在Angular教程中: 控制器:AngularJS:正确使用控制器和工厂,angularjs,Angularjs,我是AngularJS的新生儿,当我得到AngularJS的新项目时,已经有其他开发人员编写的代码了。当我开始深入讨论代码时,我看到了视图控制器工厂“连接”实现的两种方式。 第一个是在Angular教程中: 控制器: app.controller('dashboardController', function (dashboardFactory){ /*Controller as implementation*/ this.widgets = dashboardFactory.
app.controller('dashboardController', function (dashboardFactory){
/*Controller as implementation*/
this.widgets = dashboardFactory.getWidgets();
})
app.controller('mapController', function (mapFactory){
this.mapFactory= mapFactory;
this.getRowStatus = mapFactory.getRowStatus;
this.getRowTooltip = mapFactory.getRawTooltip;
})
工厂:
app.factory('dashboardFactory', function (){
var widgets = [];
return {
getWidgets: function () {
return widgets;
},
}
app.factory('mapFactory', function (){
getRowStatus: function (grid, row) {
var result = '';
var currentStatus = row.entity.ONLINE_STATUS;
switch (currentStatus) {
case 1:
result = 'carInMotionLight';
break;
case 2:
result = 'carInIdleLight';
break;
case 4:
result = 'carAlertLight';
break;
}
return result;
},
getRawTooltip: function (grid, row) {
var result = 'Engine off';
var currentStatus = row.entity.ONLINE_STATUS;
switch (currentStatus) {
case 1:
result = 'In motion';
break;
case 2:
result = 'In idle';
break;
case 4:
result = 'Alert';
break;
}
return result;
},
});
在第二种情况下,所有控制器函数都作为指向工厂的指针,控制器本身具有工厂变量指针:
控制器:
app.controller('dashboardController', function (dashboardFactory){
/*Controller as implementation*/
this.widgets = dashboardFactory.getWidgets();
})
app.controller('mapController', function (mapFactory){
this.mapFactory= mapFactory;
this.getRowStatus = mapFactory.getRowStatus;
this.getRowTooltip = mapFactory.getRawTooltip;
})
工厂:
app.factory('dashboardFactory', function (){
var widgets = [];
return {
getWidgets: function () {
return widgets;
},
}
app.factory('mapFactory', function (){
getRowStatus: function (grid, row) {
var result = '';
var currentStatus = row.entity.ONLINE_STATUS;
switch (currentStatus) {
case 1:
result = 'carInMotionLight';
break;
case 2:
result = 'carInIdleLight';
break;
case 4:
result = 'carAlertLight';
break;
}
return result;
},
getRawTooltip: function (grid, row) {
var result = 'Engine off';
var currentStatus = row.entity.ONLINE_STATUS;
switch (currentStatus) {
case 1:
result = 'In motion';
break;
case 2:
result = 'In idle';
break;
case 4:
result = 'Alert';
break;
}
return result;
},
});
在第二个实现中,控制器看起来更干净,在工厂函数内,您在控制器范围内,如果需要调用另一个工厂函数,则必须使用已定义的工厂变量
我没有发现使用第一个或第二个实现的任何积极或消极反馈都是有效的,并且都提供相同的结果。
那么你认为呢?哪一个更好用呢?在我们与AngularJS的商业合作中,我们试图保持控制器“精简”,并将大量逻辑推送到服务/工厂中。我们将ES6与AngularJS 1.5结合使用,有时很难保持这种方式,但一般来说,我们尝试在服务中编写大量函数式编程,因此方法是枯燥的
控制器不能如此枯燥,因为它们与特定的页面相关联(我想这是在服务中使用大量这种逻辑的一个理由)。也许不是对您问题的直接回答,但我想在从AngularJS开始的人中分享John Papa AngularJS样式指南。如果你有时间,它会有清晰的内容来讨论最好的方法。那么你说第二种方法更可取?我个人会说是的。我的大多数同事都同意这种方法(60+团队)。