ng-server-by

A better way than controllers

What is ngServeBy ?

ngServeBy is directive that binds services to the scope of the using element. As if using ngController.

Why not just use 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.

Example:

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!

Usage:

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()")
        ...

Why all that?

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!