1. © Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com
SELA DEVELOPER PRACTICE
MAY 31, 2015 – JUNE 4, 2015
Sebastian Pederiva
Tips for Angular Applications
Senior Consultant
sebastianp@sela.co.il
@spederiva
tiny.cc/SebastianBlog

2. Starting

3. Project Structure
Roll your own
Angular Seed
https://github.com/angular/angular- seed

4. Project Structure…by components

5. Add Suffix to the file names
Easy to read and understand
Essential for “component type” structure
Help make better automation and testing
product-list.ctrl.js
product-list.tpl.html
product-list.fltr.js
product-list.fctry.js
product-list.srv.js
product-list.const.js
product-list.val.js

6. Separate to Modules
var corelist = app.module("app.core.list", []);
corelist.controller("app.core.list.listCtrl", ...)
angular.module(“app.common.services")
.service("myApp.common.services.product"

7. Golden Rules
Controllers should never refer to any DOM
elements
Controllers should call services vs. holding too
much business logic
Avoid $rootScope, try to use services instead
Expression {{}} vs ng-cloak

8. Minimizing Angular Files
Minimizing process will replace variable names
compromising the dependency injection
someModule.controller('MyController', ['$scope', function($scope) {
$scope.name = "Sebastian";
}]);
someModule.controller('MyController', function ($scope) {
$scope.name = "Sebastian";
});
someModule.controller('MyController', function (a) {
a.name = "Sebastian";
});

9. One Time Binding
Use double colon ::
https://code.angularjs.org/1.3.15/docs/guide/e
xpression#one-time-binding
For previous versions:
https://github.com/Pasvaz/bindonce
<p id="one-time-binding-example">
One time binding: {{::name}}
</p>

10. Controller Inheritance
app.controller("ChildCtrl", ["$scope", function ($scope) {
$scope.childText = "childText"
$scope.text = "childText”
}]);
app.controller("ParentCtrl", ["$scope", function ($scope) {
$scope.parentText = "parentText"
$scope.text = "parentText”
}]);
<div ng-controller="ParentCtrl”>
<div ng-controller="ChildCtrl”>
{{parentText}}
<br/>
{{childText}}
<br/>
{{text}}
</div>
</div>

11. Controller Inheritance
app.controller("ChildCtrl", function ($scope, $controller) {
$controller("ParentCtrl", {$scope: $scope});
$scope.childText = "childText";
$scope.text = "childText";
});
app.controller("ParentCtrl", ["$scope", function ($scope) {
$scope.parentText = "parentText"
$scope.text = "parentText”
}]);
<div ng-controller="ChildCtrl”>
{{parentText}}
<br/>
{{childText}}
<br/>
{{text}}
</div>

12. Avoid Watchers
$watch occurs when the users clicks on an item,
not when the model changes
Consider using events instead
Minimize use watchers
Angular uses dirty checking to keep track of all
the changes in app

13. $watch() vs. $watchCollection()
$watch has 3 parameters
Use $watchCollection, it only checks the first
layer of object’s properties
http://www.bennadel.com/blog/2566-scope-
watch-vs-watchcollection-in-angularjs.htm
http://plnkr.co/edit/Pbvo6AqME081rZ2RVKDU?
p=preview

14. ng-repeat, track when possible
ngRepeat does not allow duplicate items in
arrays
Track by to increase performance
Default tracking
<div ng-repeat=”item in collection track by $id(obj)”>
Own tracking
<div ng-repeat=”item in collection track by item.id”>
https://docs.angularjs.org/api/ng/directive/ngR
epeat#tracking-and-duplicates

15. ng-repeat
How many times will getPrice function be
called?
Use watch collection to calculate everything
when the controller is first invoked
<tr ng-repeat="item in items">
<td>{{item.name}}</td>
<td>{{item.description}}</td>
<td>{{getPrice(item.id)}}</td>
</tr>

16. ng-repeat cont
<tr ng-repeat="item in items">
<td>{{item.name}}</td>
<td>{{item.description}}</td>
<td>{{item.price}}</td>
</tr>
$scope.$watchCollection('items', function (newItems) {
for (var i = 0; i < newItems.length; i++) {
newItems[i].price = getPrice(newItems.id);
}
$scope.items = newItems;
});

17. Avoid ng-repeat for infinite scroll
Memory Leaks
Performance problem
Possible solution:
http://www.williambrownstreet.net/blog/2013/0
7/angularjs-my-solution-to-the-ng-repeat-
performance-problem

18. Debounce ng-model
Lot of updates?
https://docs.angularjs.org/api/ng/directive/ng
ModelOptions
<input
ng-model="name”
ng-model-options="{ debounce: 500 }” />

19. Use ng-if instead of ng-show
ng-show will render an element, and use
display:none to hide it
ng-if will actually removes the element from
DOM, and will re-create it, if it’s needed.

20. Promise you use Promises
Prefer Promises Over Callbacks
Follow The ‘...ing’ Convention
Clear Indication You’re getting a Promise
function gettingUsers(){
return $http()...
}
gettingUsers()
.success()
.error()

21. Destroying Memory Leaks
Use $scope.$on('$destroy', …)
Remove handlers
Clean up resources which won’t be garbage
collected automatically
module.controller("TestController", function ($scope, $timeout) {
var onTimeout = function () {
$scope.value += 1;
timer = $timeout(onTimeout, 1000);
};
var timer = $timeout(onTimeout, 1000);
$scope.value = 0;
$scope.$on("$destroy", function () {
if (timer) {
$timeout.cancel(timer);
}
});
});

22. Managing the Time…use moment.js
https://github.com/urish/angular-moment
<span am-time-ago="message.time">
</span>

23. Use Batarang

24. Debugging
Pause On Caught Exceptions

25. Debugging
Attach DOM Breakpoints

26. Logging
Avoid using console.log in your controllers
Use $log instead
$log can be extended to provide additional
logging capabilities

27. Forget jQuery Exists
jQuery
-- Use angular.element instead of $() selector --
Search for a jQuery-equivalent instead
» Examples
-- html(), text(), val()
» Ask whether you can use directives instead
Take a look at ui-bootstrap’s directives at
https://github.com/angular-
ui/bootstrap/tree/master/src

28. Testing
Faster Bug Tracking
Jasmine Given
http://www.airpair.com/angularjs/workshops/u
nit-testing-angularjs
describe("assigning stuff to this", function() {
Given(function() { this.number = 24; });
Given(function() { this.number++; });
When(function() { this.number *= 2; });
Then(function() { expect(this.number).toBe(50) });
});

29. Links
https://thinkster.io/angulartutorial/a-better-
way-to-learn-angularjs/
http://chieffancypants.github.io/angular-
loading-bar
http://angular-js.in
https://docs.google.com/document/d/1XXMvRe
O8-
Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub

30. Questions