AngularJS 将逻辑放在服务中而不是控制器中,最佳实践
AngularJS putting logic in Service rather than Controller, Best practices
我有一个从 Firebase 收集数据的控制器。我在我的整个网站上都使用它,所以它一直被调用。
app.controller("ReplicatedController", function($scope, $routeParams, $firebaseObject) {
var parts = location.hostname.split('.');
var refSubdomain = parts.shift();
var ref = new Firebase("https://example-firebase.firebaseio.com/" + refSubdomain);
var syncObject = $firebaseObject(ref);
syncObject.$bindTo($scope, "coach");
if($routeParams.my_affiliate){
var myAffiliate = $routeParams.my_affiliate;
window.location = "http://" + myAffiliate + ".example.com";
};
});
这很好用,但我的问题是我应该将它移到服务中吗?这会不会让我访问我的 Firebase 的频率降低?
还有什么是将类似的东西移动到服务中的最佳方法。我只是创建一个服务吗?
app.factory('ReplicatedService', ['$http', function($scope, $routeParams, $firebaseObject){
var parts = location.hostname.split('.');
var refSubdomain = parts.shift();
var ref = new Firebase("https://example-firebase.firebaseio.com/" + refSubdomain);
var syncObject = $firebaseObject(ref);
syncObject.$bindTo($scope, "coach");
if($routeParams.my_affiliate){
var myAffiliate = $routeParams.my_affiliate;
window.location = "http://" + myAffiliate + ".example.com";
};
});
然后从我的控制器调用服务?
app.controller('ReplicatedController', ['$scope','ReplicatedService', function($scope,ReplicatedService){
}]);
我似乎无法让它工作。还有为什么我需要改变它?它会提高性能,还是只会使代码更清晰、更易读?
您的工厂供应商没有 returning 任何东西。要访问它,您实际上需要 return 同步对象。
app.factory('ReplicatedService', ['$http', function($scope, $routeParams, $firebaseObject){
var parts = location.hostname.split('.');
var refSubdomain = parts.shift();
...
return syncObject;
});
app.controller('...', function(ReplicatedService) {
$scope.data = ReplicatedService;
});
这是典型的化简调试案例。要自己解决这个问题,您首先要将其分解为您能想到的最小工作组件:
app.factory('test', function() {
return { foo: 'bar' };
});
app.controller('...', function($scope, test) {
$scope.test = test;
});
然后逐个添加组件,直到它损坏或按预期工作。处理多种新技术和概念时的好方法。
我有一个从 Firebase 收集数据的控制器。我在我的整个网站上都使用它,所以它一直被调用。
app.controller("ReplicatedController", function($scope, $routeParams, $firebaseObject) {
var parts = location.hostname.split('.');
var refSubdomain = parts.shift();
var ref = new Firebase("https://example-firebase.firebaseio.com/" + refSubdomain);
var syncObject = $firebaseObject(ref);
syncObject.$bindTo($scope, "coach");
if($routeParams.my_affiliate){
var myAffiliate = $routeParams.my_affiliate;
window.location = "http://" + myAffiliate + ".example.com";
};
});
这很好用,但我的问题是我应该将它移到服务中吗?这会不会让我访问我的 Firebase 的频率降低?
还有什么是将类似的东西移动到服务中的最佳方法。我只是创建一个服务吗?
app.factory('ReplicatedService', ['$http', function($scope, $routeParams, $firebaseObject){
var parts = location.hostname.split('.');
var refSubdomain = parts.shift();
var ref = new Firebase("https://example-firebase.firebaseio.com/" + refSubdomain);
var syncObject = $firebaseObject(ref);
syncObject.$bindTo($scope, "coach");
if($routeParams.my_affiliate){
var myAffiliate = $routeParams.my_affiliate;
window.location = "http://" + myAffiliate + ".example.com";
};
});
然后从我的控制器调用服务?
app.controller('ReplicatedController', ['$scope','ReplicatedService', function($scope,ReplicatedService){
}]);
我似乎无法让它工作。还有为什么我需要改变它?它会提高性能,还是只会使代码更清晰、更易读?
您的工厂供应商没有 returning 任何东西。要访问它,您实际上需要 return 同步对象。
app.factory('ReplicatedService', ['$http', function($scope, $routeParams, $firebaseObject){
var parts = location.hostname.split('.');
var refSubdomain = parts.shift();
...
return syncObject;
});
app.controller('...', function(ReplicatedService) {
$scope.data = ReplicatedService;
});
这是典型的化简调试案例。要自己解决这个问题,您首先要将其分解为您能想到的最小工作组件:
app.factory('test', function() {
return { foo: 'bar' };
});
app.controller('...', function($scope, test) {
$scope.test = test;
});
然后逐个添加组件,直到它损坏或按预期工作。处理多种新技术和概念时的好方法。