0

I'm beginning using AngularJS (v1) framework, and after browsing good practices I found those examples (from this page https://github.com/johnpapa/angular-styleguide/tree/master/a1), like :

/* recommended */
function SessionsController() {
    var vm = this;

    vm.gotoSession = gotoSession;
    vm.refresh = refresh;
    vm.search = search;
    vm.sessions = [];
    vm.title = 'Sessions';

    ////////////

    function gotoSession() {
      /* */
    }

    function refresh() {
      /* */
    }

    function search() {
      /* */
    }
}

Am I the only one to find this weird ? It looks like bad practices in JavaScript.

  • Each time you create a controller, you'll have to write functions and also write all accessors to all of them. It's looks useless and also less readable as it mixes methods attribution and attributes.

  • Each time this controller is instantiated, all methods will be rewritten. Shouldn't we use a prototype to share methods between all instances ?


function SessionsController() {
    this.sessions = [] ;
    this.title = 'Sessions' ;
}

SessionsController.prototype = {
    gotoSession : function() {
        /* */
    },

    refresh : function() {
        /* */
    },

    search : function() {
        /* */
    }
} ;

Isn't it simpler, more readable and more efficient ?

Maybe I've missed something. What do you think ?

1
  • I think that's quite opinion-based. I clearly prefer the second way. Inside a self executing function which will isolate others private methods and binding the SessionController to a namespace for usage outside.
    – Walfrat
    Oct 18 '16 at 12:42
1

I think it is well-explained in the styleguide as well. Because JavaScript doesn't hard-load files like C# or Java includes, it should be made obvious to identify the public members of a service/component.

ref: https://github.com/johnpapa/angular-styleguide/tree/master/a1#bindable-members-up-top:

"Place bindable members at the top of the controller, alphabetized, and not spread through the controller code.

Why?: Placing bindable members at the top makes it easy to read and helps you instantly identify which members of the controller can be bound and used in the View."

1
  • So just for instantly identify members, you would break JavaScript's prototype design pattern ? Why not just documenting properties, even with comments only ?
    – Tot
    Oct 18 '16 at 11:39
0

As @jlast mentioned is good to have public members listed at the top of constructor.
BUT
When it comes to why those functions are not declared by prototype I think reason is dependency injection mechanism.

If you declare methods inside of constructor you can get quick access to injected angular services.

function SessionsController(sessionService) {
    var vm = this;

    vm.gotoSession = gotoSession;
    vm.refresh = refresh;

    function gotoSession() {
      if (sessionService.isSessionValid()) {
         // Do something
      }
    }
}

You don't have to bind all services to controller instance if you want to access them by controllers methods.
And when it comes to

Each time you create a controller, you'll have to write functions and also write all accessors to all of them.

Yes you have to do this and what is more you should do this. Each component (or directive) should have its own controller.
Main reason is more predictable and better separated code
look here:
https://github.com/johnpapa/angular-styleguide/tree/master/a1#style-y037

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.