EmmanuelDemey / EmmanuelDemey/eslint-plugin-angular

Bindable Members Up Top (Y033)

Open
#37 2 comments 0 reactions 0 assignees View on GitHub
Rule
Dominant language
JavaScript
Stars
620
Forks
127
PR merge metrics
No merged PRs in 30d

Description

https://github.com/johnpapa/angularjs-styleguide/edit/master/README.md
- 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.

_Why?_: Setting anonymous functions in-line can be easy, but when those functions are more than 1 line of code they can reduce the readability. Defining the functions below the bindable members (the functions will be hoisted) moves the implementation details down, keeps the bindable members up top, and makes it easier to read.

``` javascript
/* avoid */
function Sessions() {
var vm = this;

vm.gotoSession = function() {
/* ... */
};
vm.refresh = function() {
/* ... */
};
vm.search = function() {
/* ... */
};
vm.sessions = [];
vm.title = 'Sessions';
```

``` javascript
/* recommended */
function Sessions() {
var vm = this;

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

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

function gotoSession() {
/* */
}

function refresh() {
/* */
}

function search() {
/* */
}
```

![Controller Using "Above the Fold"](https://raw.githubusercontent.com/johnpapa/angularjs-styleguide/master/assets/above-the-fold-1.png)

Note: If the function is a 1 liner consider keeping it right up top, as long as readability is not affected.

``` javascript
/* avoid */
function Sessions(data) {
var vm = this;

vm.gotoSession = gotoSession;
vm.refresh = function() {
/**
* lines
* of
* code
* affects
* readability
*/
};
vm.search = search;
vm.sessions = [];
vm.title = 'Sessions';
```

``` javascript
/* recommended */
function Sessions(dataservice) {
var vm = this;

vm.gotoSession = gotoSession;
vm.refresh = dataservice.refresh; // 1 liner is OK
vm.search = search;
vm.sessions = [];
vm.title = 'Sessions';
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.