5 angularjs features


Published on

5 AngularJS features with

Published in: Technology
  • Nice Article. To know more about AngularJS 4 features, please check this article - http://correctmyerror.com/Topic/6/AngularJS-4-Features-with-Examples
    Are you sure you want to  Yes  No
    Your message goes here

5 angularjs features

  1. 1. ngularJS features by Alexey Migutsky all links are on the last slide …and related gotchas
  2. 2. 1. SCOPE In scope we trust [1]
  3. 3. Scope is created $rootScope (always there) ng-repeat (for each iteration, inherits) ng-include (inherits) ng-switch (inherits) ng-if (when creating element) ng-controller (inherits) ng-model (inherits, thro implicit controller) ng-view (inherits, thro controller) directive with scope:true (inherits) directive with transclude:true (inherits, sibling) directive with scope: {} (does not inherit)
  4. 4. Scope is not created directive with scope: false (default value) All directives, not mentioned on the previous slide
  5. 5. Angular always tracks child-parent relationships, even without inheritance but $parent referencing is bad!
  6. 6. There can be only 1 scope per 1 element [2] Directives are not mixins  Isolated scope can isolate non-isolated scopes on the same element
  7. 7. Transcluded scope is sibling to directive’s scope $parent directive’s scope transcluded $scope
  8. 8. 2. DIGESTING Run, $digest, run! [3]
  9. 9. Do not use $digest, use $apply in directives. $digest is a single run, not the full cycle
  10. 10. $watch expression is called in $scope’s context! In the expression this will refer to the $scope! Do not use $watch with property getters without binding.
  11. 11. $digest event propagates inside isolated scopes! The change in parent scope will trigger isolated watchers
  12. 12. Use events to handle ‘model changes’ sparingly [4] Use $watch instead. Digest cycle is fast… …until you write bloated $watch exressions. Watchtower [5] comes to the rescue!
  13. 13. 3. DATABINDING My name is Bind, Data Bind [6]
  14. 14. Expressions are JavaScript-like code In case of emergency use $eval() and not eval()
  15. 15. Expressions have no flow control Great decision for templates!
  16. 16. Expressions are evaluated against current scope. Remember the $watch gotcha?
  17. 17. Expressions can have function call reference You can specify parameters to be passed upon the call. “someMethodCall( param1, param2 )” Not very common, is it? It should be called like this in JS: someMethodCall( { param1 : ‘value’, param2: ‘value2’ })
  18. 18. 4. DEPENDENCY INJECTION Injections are the best thing ever invented ... [7]
  19. 19. The only orthodoxal way to establish relationships between components is DI.
  20. 20. Remember the ‘minification problem’[8] Use array-based declarations. Or just use ngmin [9].
  21. 21. AngularJS ‘runtime’ is an IoC container. Read it like this: you should wrap 3rd party components, which are not integrated with angular, into directives/services. You can’t inject (use) them as is!
  22. 22. 5. MODULARITY True independence and freedom can only exist in doing what's right. [10]
  23. 23. Always use angular.module syntax It is good for testing. It is good for decoupling. It helps manage dependencies.
  24. 24. Prefer module-per-feature approach [11] It is good for testing. It is good for refactoring and maintenance.
  25. 25. Using Angular with module loaders can be tricky Angular ‘modules’ has a different nature. Need some handcrafting to make modules and ‘modules’ play nicely.
  26. 26. Keep services/directives/modules as independent as possible. This is #1 priority. Use isolated scope for main directives. Keep shared state in services. Keep constructors in factories.
  27. 27. [1] In scope we trust [2] 1 scope per 1 element [3] Run, $digest, run! [4] Why dirty checkings and not events? [5] Project 'Watchtower' [6] My name is Bind, Data Bind! [7] Injections are the best things... [8] Minification problem in Angular [9] ngmin [10] True independence and freedom can only exist in doing what's right. [11] module-per-feature architecture Links @mr_mig_by Alexey Migutsky