AngularJS controller definition

Question

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 ?

Answer 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."

Answer 2

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