A better way than controllers
A better way than controllers
ngServeBy is directive that binds services to the scope of the using element. As if using ngController
.
It’s often that we write services to distribute code in our application. And to make usage of service, we inject them to controllers/directives, but then to reuse them somewhere else, we’ll either re-instantiate a controller or inject them to that other directive.
Let’s imagine we have a little app where we would like to display our posts in the news feed (e.g: as in facebook) :
For that we have written a service:
postsService.js
app.service('postsService', function () {
return {
fetch: function () {},
refresh: function () {},
spinLoader: function () {}
...
};
});
Injected it into a controller:
postsController.js
app.controller('postsController', function ($scope, postsService) {
$scope.fetch = postsService.fetch;
$scope.refresh = postsService.refresh;
$scope.spinLoader = postsService.spinLoader;
// other functionalities
});
And use it in our page (Jade is used in here instead of html, because it’s simpler):
div(ng-controller="postsController")
div(ng-init="fetch()")
...
But then, whenever we would like to use that somewhere else, without wanting to creat another controller, create a file for it, call it in the dom, what could you do? Use ngServeBy!
Define our services in a fashion that allows binding functions to the current scope, as if in a controller, only now you could use the same service all across your app without having to create controllers:
postsService.js
app.service('postsService', function () {
// You can directly bind your vars/functions to the scope
return function (scope) { // or function (scope, element, attrs) if you need to manipulate the DOM
scope.fetch = function () {};
...
};
// or you can make use of the `as` syntax
return function (scope) { // or function (scope, element, attrs) if you need to manipulate the DOM
var self = this;
self.fetch = function () {};
...
};
});
And in your page:
// When you've bound your vars/functions to the scope.
div(ng-serve-by="postsService")
div(ng-init="fetch()")
...
// When you've bound your vars/functions to `this` keyword.
div(ng-serve-by="postsService as p")
div(ng-init="p.fetch()")
...
Honestly, I missed on why I created this solution to begin with, but one of the reasons is that because it solved some of my problems at the time, and not until recently I felt like sharing it after having forgot most of the reasons why. If you think it’s a good practice or a bad practice, please let me know!