AngularJS: {{ }} vs ng-bind

I was just curious about this discussion on stackoverflow and decided to do own test:

[javascript]
for(var i = 0; i < 100000; i++){
randomKey = randomString();
bigScope1[randomKey] = randomString();
bigScope2[randomKey] = randomString();
bigNgBindTempalte += ‘<div class="’ + randomString() + ‘" ng-bind="’+ randomKey + ‘"></div>’;
bigExpressionTemplate += ‘<div class="’ + randomString() + ‘">{{‘ + randomKey + ‘}}</div>’;
}

// console.time(‘ngBind’);
// $compile(‘<div>’ + bigNgBindTempalte + ‘</div>’)(bigScope1);
// console.timeEnd(‘ngBind’);

console.time(‘expression’);
$compile(‘<div>’ + bigExpressionTemplate + ‘</div>’)(bigScope2);
console.timeEnd(‘expression’);
[/javascript]

code.

and indeed ngBind is faster,my machine for 100000 iterations shows:

ngBind: 46984.981ms
expression: 51107.555ms

It’s still not clear why the result are so weird when you run it together (one by one). But it’s another question.

AngularJS drag&drop solution

dragula

Dragula is a light weight library(or module) for applying drag&drop functionality on you application. There is also an official AngularJS adapter for it – angular-dragula.

It has quite strange module dependancy declaration:

[javascript]
var app = angular.module(‘my-app’, [angularDragula(angular)]);
[/javascript]

so I put an example on plunker to make it easy for you to start.

 

Keep an eye on AngularJS perfomance with ng-stats

ng-stats

ng-stats is nice utility from Kent C. Dodds that allows you to see statistics for your page’s angular digest/watches.

to install just put this code into your bookmarks:

[javascript]
javascript: (function() {var a = document.createElement("script");a.src = "https://rawgithub.com/kentcdodds/ng-stats/master/dist/ng-stats.js";a.onload=function(){window.showAngularStats()};document.head.appendChild(a)})();
[/javascript]

AngularJS: from 1.2 to 1.4 hints

Just a checklist to prevent issues with application migration.

Expressions

  • no .bind, .call and .apply
  • no __proto__
  • no Object

toBoolean

fixed strange behaviour (from 1.3): before ‘f’, ‘0’, ‘false’, ‘no’, ‘n’, ‘[]’  have been converted to false. Check you ng-if statements.

helpers

.copy() – makes a copy of only own properties (from 1.3)

.forEach() – does not take in account new elements (if during the loop size was changed)(from 1.3)

other

directive property replace – is now deprecated (from 1.3)

responseInterceptors property was removed from $httpProvider (from 1.3) – now it’s just $httpProvider.interceptors

$cookieStore is deprecated from 1.4 ( you should use $cookie instead)

If you know more tricky places – do not hesitate to share!

 

AngularJS: Синтаксис Controller as

Решил выложить пример кода “Controller as” в песочнице, чтобы можно было поиграться и понять, что нельзя миксовать 2 стиля написания контроллеров: либо $scope и писать просто переменные, либо this и делать синтаксис Controller as.

AngularJs: intersting syntax for complex ng-class conditions

Just now I got known quite interesting condition syntax for ng-class (from stackoverflow answer):

[javascript gutter=”0″]
ng-class="{admin:’enabled’, moderator:’disabled’, ”:’hidden’}[user.role]"
[/javascript]

it seems that there is not good explanation for such case in documentation.
being inspired by this possibility I decided to create even more complex condition:
[javascript gutter=”0″]
ng-class="connections.length && ({true:’open’, false:’close’}[!!manager.showConnections])"
[/javascript]

(flag open/close will be shown only if there are some connections for current manager)

Angular one-time binding cheat sheet

ng-bind:

[javascript gutter=”0″]
{{ ::user.name }}
[/javascript]

with filters

[javascript gutter=”0″]
{{ ::item.price|number }}
[/javascript]

ng-class:

[javascript gutter=”0″]
<div ng-class="::{ ‘active’: item.active }"></div>
[/javascript]

ng-if:

[javascript gutter=”0″]
<div ng-if="::user.isOnline"></div>
[/javascript]

with several conditions:

[javascript gutter=”0″]
<div ng-if="::(user.isOnline && users.length)"></div>
[/javascript]

ng-repeat:

[javascript gutter=”0″]
<div ng-repeat="item in ::user.items"></div>
[/javascript]

ng-options:

[javascript gutter=”0″]
<select ng-options="n.title for n in ::list"></select>
[/javascript]

directive attributes:

[javascript gutter=”0″]
<user-card user="::currentUser"></user-card>
[/javascript]
it will work even if you have two-way binging inside your directive

 

AngularJS: How to pass a method into an isolated scope

I came to conclusion that it’s not very obvious how to pass a method into an isolated scope. And that’s why my junior AngularJS developers just do direct call:

[javascript]
$scope.$parent.methodOfParentScope();
[/javascript]

but it’s more like a hack. It’s more correct to pass it via attribute:

Continue reading

How to catch Angular ui-router resolve errors

It’s more than annoying to have just a blank page and no errors in console when your issue is inside ui-router resolve. Finally I found a pretty nice solution, don’t know why it’s not provided “from the box”. In case of error ui-router sends specific event $stateChangeError that we could listen for:

[javascript]
$rootScope.$on(‘$stateChangeError’, function(event, toState, toParams, fromState, fromParams, error){
console.error(error);
});
[/javascript]

and now wow! we have an exact error in console and no need to guess what’s wrong with your code anymore.