7. Templates
When angular still loading
Use
• Use ng-bind only for index.html or ng-cloak
• For rest use {{ }}
• When you need to set the src of an image dynamically
use ng-src instead of src with {{ }} template.
• When you need to set the href of an anchor tag
dynamically use ng-href instead of href with {{ }} template.
• Instead of using scope variable as string and using it with style
attribute with {{ }}, use the directive ng-style with object-like
parameters and scope variables as values:
• Use $templateCache to decrease XHR calls (Optimization tips)
9. Directive
• Name your directives with lowerCamelCase.
• Use the dash-delimited format e.g ng-bind
• Use prefixed names e.g my-customer
• Reserved prefixes ng & ui
• Clean up scope.$on('$destroy', ...)
• use controller when you want to expose an API to other
directives. Otherwise use link.
10. Business logic
• Controllers
oShould not do DOM manipulations
oShould have view behavior
• Services
o Should not contain large DOM manipulations
o Have logic independent of view
o For session-level cache you can
use $cacheFactory. (Optimization tips)
11. • Scope is read-only in view
- Scope must refer to the model not to be a
model (model is javascript object)
• Scope is write-only in controller
• $rootScope Unsubscribing watchers manually
Demo with model
Demo without model
$scope
12. General
• Use promises ($q) instead of callbacks.
• Use $resource or RestAngular instead of $http when
working in REST API
• Use angular’s provided services instead of native ,
$timeout,$interval,$window, $document
• AngularJS reserved prefix $, don’t use it when defining a
variables
• In DI order should be angular’s at first, then customs
• Prefer the usage of controllers instead of ng-init
14. Optimizing angular
• Guaranteed watchers count is 2.000, link to count
watchers
• Limit DOM filters (Angular 1.2.x)
• Each filter runs twice per $digest cycle
• Use $filter provider - $filter('filter')(array, expression, comparator);
• For content what should be rendered only once use
bindonce (Angular 1.2.x) or {{::myVar}} (Angular 1.3.x)
• $timeout & $interval functions has third argument which
will skip $digest loop
15. Optimizing angular
• Don’t write crazy things in $watch callback it will kill your
app
• $watch has two comparison modes
• referential (default) - quick, shallow comparison
• deep - slow, recurses through objects for a deep comparison; also
makes a deep copy of the watched value each time it changes
• $watchCollection function is a sort-of mid-ground between
the two $watch() configurations
• referential (default) - quick, shallow comparison lika default $watch
• goes one-level deep and performs an additional, shallow reference
check of the top level items in the collection
• Avoid deep $watch whenever possible, instead use
$watchCollection
16. Optimizing angular
• ng-repeat - track by $index
• By default, ng-repeat creates a dom node for each item and
destroys that dom node when the item is removed.
• With track by $index, it will reuse dom nodes.
• Very Bad Practice: $$postDigest
• $$ means private to Angular, so be aware that the interface is not
stable
• Fires a callback after the current $digest cycle completes
• $timeout or $evalAsync ?