This document provides an introduction to key concepts in Angular including how Angular works, data binding, scope, controllers, services, modules, and routing. It explains that Angular bootstraps the browser to build the DOM and any changes to the model or DOM trigger updates between each other. It describes one-way and two-way data binding and how scope acts as the source of truth and tracks changes. Controllers control the page UI, services handle non-UI logic, and modules configure sections and routing. Components connect routes, templates, and controllers to create reusable DOM elements.

1. Intro to Angular
Zach Barnes

2. Summary
How it works
Data binding
Scope
Controllers
Services
Modules
Routing
Components

3. How it works

4. How it works
Browser builds DOM
Angular bootstraps
Changes to model trigger updates to DOM
Changes to DOM trigger updates to model

5. Data binding

6. Data binding
How the model gets updated
How the UI gets updated
Two types
One-way
Two-way

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. Data binding: two-way
E.g. Angular 1
Changes in UI update the model
Changes to model update the UI

9. Scope

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. Controllers

12. Controllers
Control the page
Anything that directly affects the UI goes here

13. Services

14. Services
Singleton
Handles anything not directly related to UI

15. Modules

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. Routing

18. Routing
States
Views
controllers

19. Components

20. Components
A new way for connecting routes, templates, and controllers
Creates a DOM element you can use anywhere