Opinionated AngularJS

Cleaner Opinionated AngularJS
Prabhakar Doraisamy

August 2014

Better
Better #2Dependency injection
• Using the array syntax to declare dependencies works with miniﬁcation
function MainCtrl(anyVariableName, $q) {

} 
MainCtrl.$inject = ['$http',‘$q’];

angular 
.module('app', []) 

app.controller('MainCtrl', [ '$http', '$q', function($http, $q){ 
… 
});

app.controller('MainCtrl', function ($http, $q) { 
… 
});

<div ng-controller="MainCtrl">

{{ someObject }}

</div>
<div ng-controller="MainCtrl as main">

{{ main.someObject }}

</div>
Better
<div> 
{{ main.someObject }} 
</div>

!
function config ($routeProvider) { 
$routeProvider 
.when('/', { 
templateUrl: 'views/main.html', 
controller: 'MainCtrl', 
controllerAs: 'main' 
}); 
}

angular 
.module('app') 
.config(config);
BestAdding controller to a view
• Controllers are classes

• aids in nested scoping and controller instance reference.
• avoids tight coupling ie., reusable view with different controllers

• avoids using $parent to access any parent controllers from a child controller

function SomeService () { 
}

angular 
.module('app') 
.factory('$$SomeService', SomeService);
• $ incites they’re public and can be used.

• $scope and $rootScope

• $$ are considered private methods.

• $$listeners, which are available on the Object

function SomeService () { 
}

angular 
.module('app') 
.factory('SomeService', SomeService);
Better
• Avoid using two different names for the Service deﬁnition, and the function name for consistency
and stack tracing.
Naming services/directives/providers/factories

<input ng-model=“myModel">

function MainCtrl(){ 
$scope.$watch('myModel', function () { 
// go 
}); 
}
<input ng-model="myModel" ng-change="callback">

function MainCtrl(){ 
$scope.callback = function () { 
// go 
}; 
}

Better
• Avoid $scope.$watch unless there are no others options

• less performant than binding an expression to something like ng-change
Watching data change

this.doSomething = function () { 
}; 
}

angular 
.module('app') 
function MainCtrl (SomeService) { 
this.doSomething = SomeService.doSomething; 
}

angular 
.module('app') 
Better
• delegating logic to Factories/Services

• maximises reusability
Controller logic

this.makeActive = function (elem) { 
$(elem).addClass(‘test’); 
}; 
}

angular 
.module('app') 

function SomeDirective (SomeService) { 
return { 
restrict: 'EA', 
template: [ 
'<a href="" class="myawesomebutton" ng-transclude>', 
'<i class="icon-ok-sign"></i>', 
'</a>' 
].join(''),

link: function ($scope, $element, $attrs) { 
// DOM manipulation/events here! 
$element.on('click', function () { 
$(this).addClass('test'); 
}); 
} 
}; 
}

angular 
.module('app') 
.directive('SomeDirective', SomeDirective);
Better
• Any DOM manipulation should take place inside a directive, and only directives
DOM manipulation

If you are writing $(element) somewhere in your
controller, its a indication that you need a directive.

<div class="my-directive"></div>
Followed by adding restrict usage using the restrict property inside each directive's Object.

• E for element

• A for attribute

• M for comment (avoid)

• C for className (avoid this too as it's even more confusing, but plays better with IE).

• Multiple restrictions, such as restrict: 'EA'.
BetterDirective usage restriction
<my-directive></my-directive>

<div my-directive></div>

Opinionated AngularJS

Recommended

More Related Content

What's hot (20)

Similar to Opinionated AngularJS (20)

Recently uploaded (20)

Opinionated AngularJS