Optimizing AngularJS Application

Md.
Ziaul
Haq
Sr.
JavaScript
Developer
oDesk
Inc.
@jquerygeek

¡ Identify
the
problems
¡ The
solution
with
best
practices
¡ Few
more
best
practices

¡ Network
related
issue
¡ Unexpected
characters
¡ Slow
DOM
¡ Slow
watcher

¡ Minify
your
codes
§ Use
Uglify

¡ Write
minify
safe
code
§ Use
Dependency
Annotation

¡ Without
Dependency
Annotation
myApp.service(’myService’,
function($http){
console.log($http);
});

¡ Without
Dependency
Annotation
myApp.service("myService",
function(a){
console.log(a)
});

¡ With
Dependency
Annotation
myApp.service(’myService’,
[‘$http’, function($http){
console.log($http);
}]);

¡ Use
‘ng-‐annotate’
§ https://github.com/olov/ng-‐annotate

¡ Lot
of
network
request
§ Mostly
for
template
files

¡ Cache
the
templates
§ Use
$templateCache
service

myApp.run([‘$templateCache’,
function($templateCache) {
$templateCache.put('tpls/
hello.html', '<div class='hello
'>Hello, {{world}}!</div>’);
}]);

¡ For
grunt
§ https://github.com/karlgoldstein/grunt-‐html2js
¡ For
gulp
§ https://github.com/fraserxu/gulp-‐html2js

¡ Template
tag
{{
}}
in
landing
page

— Hide
the
body/some
element,
till
bootstrap
angular
— Use
ng-‐cloak

<Style>
[ng-cloak] {
display: none;
}
</style>
<body ng-cloak>

▪ Hide
individual
expressions
▪ Use
ng-‐bind
<span ng-bind=”data.value”>
</span>

¡ https://builtwith.angularjs.org/

¡ Optimize
ng-‐repeat
§ Use
the
track
by
syntax
<li ng-repeat=”
item in data.items
track by item.id ”>
</li>

¡ Use
bind-‐once
<li ng-repeat=”
item in ::data.items">
{{::item.title}}
</li>

¡ Filter
in
controller,
not
in
‘ng-‐repeat’

¡ Do
you
need
$watch?
¡ Use
unWatch
¡ Keep
$watch
smaller
and
focused
¡ Avoid
loop
in
$watch

¡ Avoid
deep
comparison
$scope.user = {
id: grrey,
name: Gandaf Grey,
email: ggreay@gmail.com
}
$scope.$watch('user', function(newUser) {
//...
}, true);

¡ Keep
filter
simple
with
single
task
¡ Use
bind-‐once
¡ Keep
less
item
in
ng-‐repeat

¡ Bootstrap
Angular
app
§ Angular-‐seed
https://github.com/angular/angular-‐seed
§ Angular-‐fun
https://github.com/CaryLandholt/
AngularFun

¡ Separate
the
business
logic
§ Controller
▪ Manipulate
DOM
in
Controller
Directives
▪ Commonly
used
functions
as
service.
▪ Use
$emit,
$broadcast
or
$on
to
communicate
with
other
controller.

¡ Separate
the
business
logic
§ Service
▪ Should
not
refer
DOM
▪ All
business
login
in
service

§ Directive
▪ DOM
manipulations
must
in
directives
▪ Use
scope
instead
of
$scope
in
link
▪ Isolated
scope
for
reusable
components.
▪ Custom
prefix
to
avoid
conflict
▪ Don’t
use
‘ng’
and
‘ui’
as
prefix.

§ Use
of
Directive
▪ Use
‘data’
prefix
for
valid
HTML
"
<div data-my-directive>
</div>

¡ Choose
the
better
one
§ Use
promises
($q)
instead
of
old
callbacks.
§ Use
ngIf
instead
of
ngShow
&
ngHide

¡ Choose
the
better
one
§ Use
ng-‐src
instead
of
src=“{{
}}”
§ Use
ng-‐href
instead
of
href=“{{
}}”

¡ Avoid
old/jQuery
habit
§ $timeout
instead
of
setTimeout
§ $interval
instead
of
setInterval
§ $window
instead
of
window
§ $document
instead
of
document
§ $http
instead
of
$.ajax

¡ https://docs.angularjs.org/
¡ https://github.com/mgechev/angularjs-‐style-‐
guide
¡ ng-‐book

Thanks,
all.
J
Drop
me
a
line
if
more
question
jquerygeek@elance-‐odesk.com

Optimizing AngularJS Application

More Related Content

What's hot

Viewers also liked

Similar to Optimizing AngularJS Application

More from Md. Ziaul Haq

Recently uploaded

Optimizing AngularJS Application