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.

Intro to angular


Published on

Angular Concepts introduction

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Intro to angular

  1. 1. Intro to Angular Zach Barnes
  2. 2. Summary How it works Data binding Scope Controllers Services Modules Routing Components
  3. 3. How it works
  4. 4. How it works Browser builds DOM Angular bootstraps Changes to model trigger updates to DOM Changes to DOM trigger updates to model
  5. 5. Data binding
  6. 6. Data binding How the model gets updated How the UI gets updated Two types One-way Two-way
  7. 7. Data binding: One way E.g. Angular 2, React Source of truth, our model, somewhere in code UI cannot update model UI triggers events -> events trigger changes to model -> model changes update the UI
  8. 8. Data binding: two-way E.g. Angular 1 Changes in UI update the model Changes to model update the UI
  9. 9. Scope
  10. 10. Scope Angular’s source of truth Can consider $scope to be the page Changes to the scope update the page Anything on the scope is tracked Anything not on the scope isn’t tracked
  11. 11. Controllers
  12. 12. Controllers Control the page Anything that directly affects the UI goes here
  13. 13. Services
  14. 14. Services Singleton Handles anything not directly related to UI
  15. 15. Modules
  16. 16. Modules Configuration for a section of a page Routing goes here Provider configuration goes here Anything that needs to happen before the page loads goes here
  17. 17. Routing
  18. 18. Routing States Views controllers
  19. 19. Components
  20. 20. Components A new way for connecting routes, templates, and controllers Creates a DOM element you can use anywhere