Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Superheroic JavaScript MVW Framework
Table of contents 
•Short about AngularJS 
•AngularJS Best practices 
•AngularJS 1.3 
•AngularJS 2.0
• Modularity 
• Dependency injection 
• Two – way binding 
• Directives 
• Filters 
• Templating 
• Services 
• Testing re...
Best Practices
Directory structure
Templates 
When angular still loading 
Use 
• Use ng-bind only for index.html or ng-cloak 
• For rest use {{ }} 
• When yo...
Now we have powerful templates
Directive 
• Name your directives with lowerCamelCase. 
• Use the dash-delimited format e.g ng-bind 
• Use prefixed names ...
Business logic 
• Controllers 
oShould not do DOM manipulations 
oShould have view behavior 
• Services 
o Should not cont...
• Scope is read-only in view 
- Scope must refer to the model not to be a 
model (model is javascript object) 
• Scope is ...
General 
• Use promises ($q) instead of callbacks. 
• Use $resource or RestAngular instead of $http when 
working in REST ...
Cool, What about performance ?
Optimizing angular 
• Guaranteed watchers count is 2.000, link to count 
watchers 
• Limit DOM filters (Angular 1.2.x) 
• ...
Optimizing angular 
• Don’t write crazy things in $watch callback it will kill your 
app 
• $watch has two comparison mode...
Optimizing angular 
• ng-repeat - track by $index 
• By default, ng-repeat creates a dom node for each item and 
destroys ...
Angular 1.3
Angular 1.3 
• Performance (3-4x faster) 
• DOM manipulation 
• Dirty checking 
• Memory usage 
• Animations 
• Forms 
• F...
Performance
Performance
Performance 
• $httpProvider.useApplyAsync(true); 
• one-time binding
form - ngModel 
• ngModel.$validators 
• $parsers + $formatters 
• ngModel.$asyncValidators 
• ngModel.ngModelOptions
form - ngModel.$validators
form - ngModel.$validators
form - ngModel.$asyncValidators
form - ngModel.ngModelOptions.debounce
form - ngModel.ngModelOptions-getter/settter
form - ngModel.ngModelOptions.updateOn
form - ngMessages
form - ngMessages
form - ngMessages
form - ngMessages
Other - composable SVG
Other - allOrNothing
Other - $watchGroup
Other - strictDI 
ng-europe 2014 
video | follow-up post
Angular 2.0
Angular 2.0 
controllers 
DDO 
$scope 
angular.module 
jqLite 
generic binding syntax 
DI query mechanism 
benchpress 
WTF...
References 
AngularJS blog post 
AngularJS style guide 
ng-europe 
Ben Nadel’s blog 
Todd Motto’s blog 
ng-newsletter 
ang...
Q&A
Narek Mamikonyan 
@nmamikonyan 
narekmamikonyan@gmail.com
AngularJS Best Practices
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
Angularjs Performance
Next
Download to read offline and view in fullscreen.

18

Share

Download to read offline

AngularJS Best Practices

Download to read offline

AngularJS Best Practices
- Templates
-Directives
-Businesses logic
-$scope
-Performance optimization tips
AngularJS 1.3

Related Books

Free with a 30 day trial from Scribd

See all

AngularJS Best Practices

  1. 1. Superheroic JavaScript MVW Framework
  2. 2. Table of contents •Short about AngularJS •AngularJS Best practices •AngularJS 1.3 •AngularJS 2.0
  3. 3. • Modularity • Dependency injection • Two – way binding • Directives • Filters • Templating • Services • Testing ready …. Etc. Why angular is powerful
  4. 4. Best Practices
  5. 5. Directory structure
  6. 6. 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)
  7. 7. Now we have powerful templates
  8. 8. 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.
  9. 9. 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)
  10. 10. • 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
  11. 11. 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
  12. 12. Cool, What about performance ?
  13. 13. 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
  14. 14. 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
  15. 15. 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 ?
  16. 16. Angular 1.3
  17. 17. Angular 1.3 • Performance (3-4x faster) • DOM manipulation • Dirty checking • Memory usage • Animations • Forms • Flexible validation • Debouncing • Error reporting • Other • $watchGroup • templateNamespace
  18. 18. Performance
  19. 19. Performance
  20. 20. Performance • $httpProvider.useApplyAsync(true); • one-time binding
  21. 21. form - ngModel • ngModel.$validators • $parsers + $formatters • ngModel.$asyncValidators • ngModel.ngModelOptions
  22. 22. form - ngModel.$validators
  23. 23. form - ngModel.$validators
  24. 24. form - ngModel.$asyncValidators
  25. 25. form - ngModel.ngModelOptions.debounce
  26. 26. form - ngModel.ngModelOptions-getter/settter
  27. 27. form - ngModel.ngModelOptions.updateOn
  28. 28. form - ngMessages
  29. 29. form - ngMessages
  30. 30. form - ngMessages
  31. 31. form - ngMessages
  32. 32. Other - composable SVG
  33. 33. Other - allOrNothing
  34. 34. Other - $watchGroup
  35. 35. Other - strictDI ng-europe 2014 video | follow-up post
  36. 36. Angular 2.0
  37. 37. Angular 2.0 controllers DDO $scope angular.module jqLite generic binding syntax DI query mechanism benchpress WTF instrumentation ng-europe 2014 video | follow-up post
  38. 38. References AngularJS blog post AngularJS style guide ng-europe Ben Nadel’s blog Todd Motto’s blog ng-newsletter angular-test-patterns
  39. 39. Q&A
  40. 40. Narek Mamikonyan @nmamikonyan narekmamikonyan@gmail.com
  • theaccordance

    May. 26, 2016
  • ssuser4a734e

    Dec. 25, 2015
  • AlanCezarSilva

    Jun. 1, 2015
  • toahmedshah

    May. 30, 2015
  • debop

    May. 21, 2015
  • takanoriishikawa

    May. 18, 2015
  • SrinivasanKK1

    Apr. 19, 2015
  • JonathanMajorCondon

    Mar. 21, 2015
  • MauricioVeranoMerino

    Mar. 17, 2015
  • RockYou1

    Feb. 24, 2015
  • ice5050

    Feb. 6, 2015
  • RakeshB

    Jan. 15, 2015
  • micheleprands

    Jan. 2, 2015
  • StephenTang5

    Dec. 22, 2014
  • seveniruby

    Dec. 16, 2014
  • kuysengchhoeun1

    Dec. 16, 2014
  • fasoulas

    Dec. 2, 2014
  • vigen10

    Nov. 22, 2014

AngularJS Best Practices - Templates -Directives -Businesses logic -$scope -Performance optimization tips AngularJS 1.3

Views

Total views

4,672

On Slideshare

0

From embeds

0

Number of embeds

89

Actions

Downloads

281

Shares

0

Comments

0

Likes

18

×