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
Recommended
