Tweet
Tweet

Slide 1

Slide 1 text

AngularJS

Slide 2

Slide 2 text

Features : Two Way Data-Binding Templates MVC Dependency Injection Directives Testing

Slide 3

Slide 3 text

Hello World Text

Slide 4

Slide 4 text

Internals

Slide 5

Slide 5 text

Startup 1. Browser parses HTML to DOM

Slide 6

Slide 6 text

Startup 2. angular.js is loaded

Slide 7

Slide 7 text

Startup 3. waiting for DOMContentLoaded event

Slide 8

Slide 8 text

Startup 4. Angular looks for ng-app directive

Slide 9

Slide 9 text

Startup 5. cofiguring $injector

Slide 10

Slide 10 text

Startup 6. creating $compile and $rootScope

Slide 11

Slide 11 text

Startup 7. compiling DOM and linking with scope

Slide 12

Slide 12 text

Startup 8. ng-init assigns 'World' to name model

Slide 13

Slide 13 text

Startup 9. {{name}} interpolates expression

Slide 14

Slide 14 text

Runtime 1. event calls scope.$apply(stimulusFn)

Slide 15

Slide 15 text

Runtime 2. executing stimulusFn

Slide 16

Slide 16 text

Runtime 3. entering $digest loop

Slide 17

Slide 17 text

Runtime 4. scheduling work via $evalAsync

Slide 18

Slide 18 text

Runtime 5. calling $watch

Slide 19

Slide 19 text

Runtime 6. browser re-renders DOM

Slide 20

Slide 20 text

Hello World #2 Text

Slide 21

Slide 21 text

View DOM, not string

Slide 22

Slide 22 text

View Demo Text

Slide 23

Slide 23 text

Model Any data: primitive, array, object

Slide 24

Slide 24 text

Controller Demo Text

Slide 25

Slide 25 text

Scope Glues Controller and View

Slide 26

Slide 26 text

Scope Demo Text

Slide 27

Slide 27 text

Directives Demo Text

Slide 28

Slide 28 text

Filters Demo Text

Slide 29

Slide 29 text

Dependency Injection $injector

Slide 30

Slide 30 text

DI : Creating Module $injector

Slide 31

Slide 31 text

DI : Types Instantiation $injector

Slide 32

Slide 32 text

DI Demo Text

Slide 33

Slide 33 text

Testing Demo Text

Slide 34

Slide 34 text

Thank you ! angularjs.org github.com/angular/angular-seed meetup.com/AngularJS-London