build your own angularjs

Download Build Your Own Angularjs

Post on 23-Dec-2015

58 views

Category:

Documents

4 download

Embed Size (px)

DESCRIPTION

Angular Js

TRANSCRIPT

  • BUILD YOUR OWNANGULARJS

  • Build Your Own Angular

    2 2015 Tero Parviainen Errata / Submit

    https://github.com/teropa/build-your-own-angularjs/issueshttps://github.com/teropa/build-your-own-angularjs/issues/new?title=P2

  • Build Your Own AngularJS

    Tero Parviainen

    ISBN 978-952-93-3544-2

  • Contents

    Introduction i

    How To Read This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . iiSource Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iiContributors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iiEarly Access: Errata & Contributing . . . . . . . . . . . . . . . . . . . . . iiiContact . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iiiVersion History . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iii

    Project Setup vii

    Install The Required Tools . . . . . . . . . . . . . . . . . . . . . . . . . . viiCreate The Project Directories . . . . . . . . . . . . . . . . . . . . . . . . viiiCreate package.json for NPM . . . . . . . . . . . . . . . . . . . . . . . . . viiiCreate Gruntfile.js for Grunt . . . . . . . . . . . . . . . . . . . . . . . . . ixHello, World! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ixEnable Static Analysis With JSHint . . . . . . . . . . . . . . . . . . . . . ixEnable Unit Testing With Jasmine And Testem . . . . . . . . . . . . . . . xiInclude Lo-Dash And jQuery . . . . . . . . . . . . . . . . . . . . . . . . . xiiiDefine The Default Grunt Task . . . . . . . . . . . . . . . . . . . . . . . . xvSummary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv

    I Scopes 1

    1 Scopes And Digest 5

    Scope Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

    3

  • Build Your Own Angular Contents

    Watching Object Properties: $watch And $digest . . . . . . . . . . . . . . 6

    Checking for Dirty Values . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

    Initializing Watch Values . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

    Getting Notified Of Digests . . . . . . . . . . . . . . . . . . . . . . . . . . 13

    Keep Digesting While Dirty . . . . . . . . . . . . . . . . . . . . . . . . . . 14

    Giving Up On An Unstable Digest . . . . . . . . . . . . . . . . . . . . . . 16

    Short-Circuiting The Digest When The Last Watch Is Clean . . . . . . . 18

    Value-Based Dirty-Checking . . . . . . . . . . . . . . . . . . . . . . . . . . 21

    NaNs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

    $eval - Evaluating Code In The Context of A Scope . . . . . . . . . . . . 25

    $apply - Integrating External Code With The Digest Cycle . . . . . . . . 26

    $evalAsync - Deferred Execution . . . . . . . . . . . . . . . . . . . . . . . 27

    Scheduling $evalAsync from Watch Functions . . . . . . . . . . . . . . . . 29

    Scope Phases . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

    Coalescing $apply Invocations - $applyAsync . . . . . . . . . . . . . . . . 36

    Running Code After A Digest - $$postDigest . . . . . . . . . . . . . . . . 42

    Handling Exceptions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

    Destroying A Watch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

    Watching Several Changes With One Listener: $watchGroup . . . . . . . 55

    Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

    2 Scope Inheritance 67

    The Root Scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

    Making A Child Scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

    Attribute Shadowing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

    Separated Watches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

    Recursive Digestion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

    Digesting The Whole Tree from $apply, $evalAsync, and $applyAsync . . 78

    Isolated Scopes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82

    Substituting The Parent Scope . . . . . . . . . . . . . . . . . . . . . . . . 89

    Destroying Scopes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

    Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

    4 2015 Tero Parviainen Errata / Submit

    https://github.com/teropa/build-your-own-angularjs/issueshttps://github.com/teropa/build-your-own-angularjs/issues/new?title=P4

  • Build Your Own Angular Contents

    3 Watching Collections 95Setting Up The Infrastructure . . . . . . . . . . . . . . . . . . . . . . . . . 95Detecting Non-Collection Changes . . . . . . . . . . . . . . . . . . . . . . 97Detecting New Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101Detecting New Or Removed Items in Arrays . . . . . . . . . . . . . . . . . 103Detecting Replaced or Reordered Items in Arrays . . . . . . . . . . . . . . 105Array-Like Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108Detecting New Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112Detecting New Or Replaced Attributes in Objects . . . . . . . . . . . . . 113Detecting Removed Attributes in Objects . . . . . . . . . . . . . . . . . . 117Preventing Unnecessary Object Iteration . . . . . . . . . . . . . . . . . . . 119Dealing with Objects that Have A length . . . . . . . . . . . . . . . . . . 121Handing The Old Collection Value To Listeners . . . . . . . . . . . . . . . 122Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126

    4 Scope Events 127Publish-Subscribe Messaging . . . . . . . . . . . . . . . . . . . . . . . . . 127Setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128Registering Event Listeners: $on . . . . . . . . . . . . . . . . . . . . . . . 128The basics of $emit and $broadcast . . . . . . . . . . . . . . . . . . . . . . 131Dealing with Duplication . . . . . . . . . . . . . . . . . . . . . . . . . . . 132Event Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134Additional Listener Arguments . . . . . . . . . . . . . . . . . . . . . . . . 135Returning The Event Object . . . . . . . . . . . . . . . . . . . . . . . . . 136Deregistering Event Listeners . . . . . . . . . . . . . . . . . . . . . . . . . 137Emitting Up The Scope Hierarchy . . . . . . . . . . . . . . . . . . . . . . 139Broadcasting Down The Scope Hierarchy . . . . . . . . . . . . . . . . . . 141Including The Current And Target Scopes in The Event Object . . . . . . 143Stopping Event Propagation . . . . . . . . . . . . . . . . . . . . . . . . . . 148Preventing Default Event Behavior . . . . . . . . . . . . . . . . . . . . . . 149Broadcasting Scope Removal . . . . . . . . . . . . . . . . . . . . . . . . . 151Handling Exceptions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153

    5 2015 Tero Parviainen Errata / Submit

    https://github.com/teropa/build-your-own-angularjs/issueshttps://github.com/teropa/build-your-own-angularjs/issues/new?title=P5

  • Build Your Own Angular Contents

    II Expressions And Filters 155A Whole New Language . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157What We Will Skip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159

    5 Literal Expressions 161

    Setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161Parsing Integers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163Marking Literals And Constants . . . . . . . . . . . . . . . . . . . . . . . 167Parsing Floating Point Numbers . . . . . . . . . . . . . . . . . . . . . . . 169Parsing Scientific Notation . . . . . . . . . . . . . . . . . . . . . . . . . . . 171Parsing Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174Parsing true, false, and null . . . . . . . . . . . . . . . . . . . . . . . . 184Parsing Whitespace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187Parsing Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189Parsing Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203

    6 Lookup And Function Call Expressions 205

    Simple Attribute Lookup . . . . . . . . . . . . . . . . . . . . . . . . . . . 205Nested Attribute Lookup . . . . . . . . . . . . . . . . . . . . . . . . . . . 207Arbitrarily Nested Attribute Lookup . . . . . . . . . . . . . . . . . . . . . 209Getter Caching . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211Locals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211Square Bracket Property Access . . . . . . . . . . . . . . . . . . . . . . . . 214Field Access . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218Function Calls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221Ensuring Safety In Member Access . . . . . . . . . . . . . . . . . . . . . . 226Method Calls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229Ensuring Safe Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238Ensuring Safe Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243Assigning Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245Arrays And Objects Revisited . . . . . . . . . . . . . . . . . . . . . . . . . 253Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259

    6 2015 Tero Parviainen Errata / Submit

    https://g