Embed Size (px)
DESCRIPTION
Optimizing AngularJS Application, that include with some useful best practices to in AngularJS. The best practices defined here is well stablished in Angular team itself and developers in community.
Citation preview
Md. Ziaul Haq Sr. JavaScript Developer oDesk Inc. @jquerygeek
¡ What && Why
¡ 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/
¡ Repeating manipulation
¡ 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: [email protected]
} $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-‐funhttps://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
