What’s the $scope?

58
@nickheiner | github.com/nickheiner What’s the $scope? Part II | 3 June 2013

TAGS:

description

What’s the $scope? . Part II | 3 June 2013. Agenda. Overview How to watch; how watching is implemented Scope hierarchy Advanced Use Cases Events $apply, $ eval , $destroy Best Practices & Tricks. Opower today. A SaaS Customer Engagement Platform. The Company - PowerPoint PPT Presentation

Transcript of What’s the $scope?

Page 1: What’s the $scope?

@nickheiner | github.com/nickheiner

What’s the $scope?

Part II | 3 June 2013

Page 2: What’s the $scope?

@nickheiner | github.com/nickheiner

2

Agenda1. Overview

How to watch; how watching is implemented

Scope hierarchy2.Advanced Use Cases

Events$apply, $eval, $destroy

3.Best Practices & Tricks

Page 3: What’s the $scope?

@nickheiner | github.com/nickheiner

Opower today

The Company• Serving 85 utilities in 6

countries• Over 2TWh saved to date• 40% of US household data

under management totaling 100 billion reads

• 300 people in Washington, San Francisco, London, Singapore• Forbes #10 of 100 Most

Promising Companies

A SaaS Customer Engagement Platform

Page 4: What’s the $scope?

@nickheiner | github.com/nickheiner

4

Page 5: What’s the $scope?

@nickheiner | github.com/nickheiner

Controllers &

Directives

$scope points to your data model

$scope

View(angular

templates)

read write

Page 6: What’s the $scope?

@nickheiner | github.com/nickheiner

Scope in the view

Page 7: What’s the $scope?

@nickheiner | github.com/nickheiner

Scope in the view

Page 8: What’s the $scope?

@nickheiner | github.com/nickheiner

Scope in the view

Page 9: What’s the $scope?

@nickheiner | github.com/nickheiner

$watch

» Watch expression will be called many times, so it should be fast / idempotent

» Making the watch expression slow in one of the few ways to really screw yourself in angular

Page 10: What’s the $scope?

@nickheiner | github.com/nickheiner

$watch expressions

» You’re not limited to just naming variables» Parsed and evaluated with parse.js» Eval demo

https://github.com/angular/angular.js/blob/master/src/ng/parse.js?source=c
http://jsfiddle.net/GSwMm/1/
http://jsfiddle.net/GSwMm/1/
Page 11: What’s the $scope?

@nickheiner | github.com/nickheiner

$watch expressions

» Third arg specifies referential or deep equality» fiddle

http://jsfiddle.net/psCNG/
Page 12: What’s the $scope?

@nickheiner | github.com/nickheiner

$watch expressions

» Use an empty watch expression as a wildcard

Page 13: What’s the $scope?

@nickheiner | github.com/nickheiner

$watch expressions

» Coming soon: $watchCollection

Page 14: What’s the $scope?

@nickheiner | github.com/nickheiner

Fire watcher

s

Done!

Watch / digest cycle

JS event (user input, http

response, etc) yes

No

Did anythin

g change

?

Page 15: What’s the $scope?

@nickheiner | github.com/nickheiner

Dirty checking v. change listeners» Less NSFW than it sounds» Excellent SO answer from Misko» Angular uses dirty checking; Knockout and Backbone use

change listeners» Dirty checking requires more comparisons, so the

comparisons must be fast

http://stackoverflow.com/a/9693933
Page 16: What’s the $scope?

@nickheiner | github.com/nickheiner

Dirty checking v. change listeners» Less NSFW than it sounds» Excellent SO answer from Misko» Angular uses dirty checking; Knockout and Backbone use

change listeners» Dirty checking requires more comparisons, so the

comparisons must be fast

Problem with change listeners Solution in angular landMust use inheritance instead of POJOs

Use POJOs!

Excessive change events fired Minimal change events firedMany change listeners may be in progress at once

Only one change listener may be in progress at once

http://stackoverflow.com/a/9693933
Page 17: What’s the $scope?

@nickheiner | github.com/nickheiner

POJOs

Backbone

Angular

Page 18: What’s the $scope?

@nickheiner | github.com/nickheiner

Excessive Changes fired

» O(numTweets) change events fired with change listeners

» O(1) change events fired with dirty checking

Page 19: What’s the $scope?

@nickheiner | github.com/nickheiner

Simultaneous change listeners

» Both handlers will be in progress at once with change listening

» Only one handler will fire at a time with dirty checking

Page 20: What’s the $scope?

@nickheiner | github.com/nickheiner

Watch / digest cycle example

Page 21: What’s the $scope?

@nickheiner | github.com/nickheiner

Watch / digest cycle example$id expression old val new val0 auth.loggedIn false false

Page 22: What’s the $scope?

@nickheiner | github.com/nickheiner

Watch / digest cycle example$id expression old val new val0 auth.loggedIn undefined undefined0 auth.loggedInCo

untundefined undefined

$id expression old val new val0 auth.loggedIn false false0 auth.loggedInCount 0 0

Page 23: What’s the $scope?

@nickheiner | github.com/nickheiner

Watch / digest cycle example$id expression old val new val0 auth.loggedIn false false0 auth.loggedInCount 0 01 mostRecentServerUpdate null null

auth.loggedIn

auth.loggedInCount

mostRecentServerUpdate

Page 24: What’s the $scope?

@nickheiner | github.com/nickheiner

Watch / digest cycle example$id expression old val new val0 auth.loggedIn false false0 auth.loggedInCount 0 01 mostRecentServerUpdate null null

Page 25: What’s the $scope?

@nickheiner | github.com/nickheiner

Watch / digest cycle example$id expression old val new val0 auth.loggedIn false true0 auth.loggedInCount 0 01 mostRecentServerUpdate null null

» Digest iteration count: 0

Page 26: What’s the $scope?

@nickheiner | github.com/nickheiner

Watch / digest cycle example$id expression old val new val0 auth.loggedIn true true0 auth.loggedInCount 0 11 mostRecentServerUpdate null null

» Digest iteration count: 1

Page 27: What’s the $scope?

@nickheiner | github.com/nickheiner

Watch / digest cycle example$id expression old val new val0 auth.loggedIn true true0 auth.loggedInCount 1 11 mostRecentServerUpdate null null

» Digest iteration count: 2

Page 28: What’s the $scope?

@nickheiner | github.com/nickheiner

Watch / digest cycle example$id expression old val new val0 auth.loggedIn true true0 auth.loggedInCount 1 11 mostRecentServerUpdate null null

» Digest iteration count: Done!

Page 29: What’s the $scope?

@nickheiner | github.com/nickheiner

Watch / digest cycle example$id expression old val new val0 auth.loggedIn true true0 auth.loggedInCount 1 11 mostRecentServerUpdate null 1370273731

» Digest iteration count: 0

Page 30: What’s the $scope?

@nickheiner | github.com/nickheiner

Watch / digest cycle example$id expression old val new val0 auth.loggedIn true true0 auth.loggedInCount 1 11 mostRecentServerUpdate 1370273731 1370273731

» Digest iteration count: 1

Page 31: What’s the $scope?

@nickheiner | github.com/nickheiner

$scopes are arranged in a hierarchy

Page 32: What’s the $scope?

@nickheiner | github.com/nickheiner

$scopes are arranged in a hierarchy

$rootScope

trending-tweets ng-repeat-0 ng-repeat-n…

tweet tweet

Linked list

Page 33: What’s the $scope?

@nickheiner | github.com/nickheiner

$scopes are arranged in a hierarchy

Main

Content

Subsection

Inheritance works with controller scopes, too.

Page 34: What’s the $scope?

@nickheiner | github.com/nickheiner

Prototypes$rootScope

top-tweets

Child scopes prototypically inherit from their parents

Page 35: What’s the $scope?

@nickheiner | github.com/nickheiner

Prototypes$rootScope

top-tweets

Child scopes prototypically inherit from their parentsunless the child is an isolate scope

Page 36: What’s the $scope?

@nickheiner | github.com/nickheiner

Prototypes $rootScope

trending-tweets

Transcluded scopes inherit from their parents

Transcluded and isolated scopes are siblings

ng-transclude

Page 37: What’s the $scope?

@nickheiner | github.com/nickheiner

Prototypes

Page 38: What’s the $scope?

@nickheiner | github.com/nickheiner

Scopes and directives

Page 39: What’s the $scope?

@nickheiner | github.com/nickheiner

Scopes and directives

Page 40: What’s the $scope?

@nickheiner | github.com/nickheiner

Scopes and directives

Page 41: What’s the $scope?

@nickheiner | github.com/nickheiner

41

Agenda1. Overview

How to watch; how watching is implemented

Scope hierarchy2.Advanced Use Cases

Events$apply, $eval, $destroy

3.Best Practices & Tricks

Page 42: What’s the $scope?

@nickheiner | github.com/nickheiner

Firing a watch/digest yourself

» Want to start a cycle on scope change» Angular gives you this for free

» $timeout v. setTimeout» $http» $q» Controllers, directives, etc

» Start it manually to integrate with non-angular code

Page 43: What’s the $scope?

@nickheiner | github.com/nickheiner

Firing a watch/digest yourself

Fire watcher

s

Done!

JS event (user input, http

response, etc) yes

No

Did anythin

g change

?

Page 44: What’s the $scope?

@nickheiner | github.com/nickheiner

Firing a watch/digest yourself

Fire watcher

s

Done!

JS event (user input, http

response, etc) yes

No

Did anythin

g change

?

$rootScope.$apply()

Page 45: What’s the $scope?

@nickheiner | github.com/nickheiner

Firing a watch/digest yourself

Page 46: What’s the $scope?

@nickheiner | github.com/nickheiner

Events!

$rootScope

ng-repeat-0

tweet

Page 47: What’s the $scope?

@nickheiner | github.com/nickheiner

Events!

$rootScope

ng-repeat-0

tweet

Page 48: What’s the $scope?

@nickheiner | github.com/nickheiner

Events!

$rootScope

ng-repeat-0

tweet

Page 49: What’s the $scope?

@nickheiner | github.com/nickheiner

$eval

» Manually evaluate an expression against the scope

Page 50: What’s the $scope?

@nickheiner | github.com/nickheiner

$destroy

» Removing a DOM node doesn’t remove the associated scope» Do it yourself with $destroy» Broadcasts a $destroy event» Fiddle» ng-repeat calls $destroy:

http://jsfiddle.net/a92pe/5/
Page 51: What’s the $scope?

@nickheiner | github.com/nickheiner

Deregister

» $watch returns a deregistration function

Page 52: What’s the $scope?

@nickheiner | github.com/nickheiner

52

Agenda1. Overview

How to watch; how watching is implemented

Scope hierarchy2.Advanced Use Cases

Events$apply, $eval, $destroy

3.Best Practices & Tricks

Page 53: What’s the $scope?

@nickheiner | github.com/nickheiner

Only put objects on the scope

» Good

» Bad

Misko: “Scope isn’t your model; scope points to your model.

More detailed discussion

https://github.com/angular/angular.js/wiki/Understanding-Scopes
https://github.com/angular/angular.js/wiki/Understanding-Scopes
Page 54: What’s the $scope?

@nickheiner | github.com/nickheiner

Use $rootScope for sharing state» Good

» Bad

Page 55: What’s the $scope?

@nickheiner | github.com/nickheiner

Be careful with $scope.$parent.$parent

» Use $rootScope or events instead

Page 56: What’s the $scope?

@nickheiner | github.com/nickheiner

Debug with angular.element().scope()

Page 57: What’s the $scope?

@nickheiner | github.com/nickheiner

Questions?

Scope source code

https://github.com/angular/angular.js/blob/master/src/ng/rootScope.js?source=c
Page 58: What’s the $scope?

@nickheiner | github.com/nickheiner

We’re Hiring! (Shameless Plug)» Come be part of a company that’s saving the world one line of

code at a time!• JavaScript Engineer – Web• Senior Software Engineer• Front End Developer/Designer• And many many more: Opower.com/careers

» Why Work at Opower?• You’ll be challenged by some of the smartest people you’ve ever

met to do your best and have fun doing it!• Feel free to ask me anything about working at Opower


What’s New with AIXM 5. Explaining AIXM 5 Mission and Objectives Coverage of the AIXM 5 data model –Scope of aeronautical information –Emerging “partner”

What’s New with AIXM 5. Explaining AIXM 5 Mission and Objectives Coverage of the AIXM 5 data model –Scope of aeronautical information –Emerging “partner”

Leica EZ4D Scope Training · 2020. 2. 5. · Leica EZ4D Scope Training Fine tuning your photographic skills, and taking pictures of what’s important By: Ryan S. Davis Arthropod

Leica EZ4D Scope Training · 2020. 2. 5. · Leica EZ4D Scope Training Fine tuning your photographic skills, and taking pictures of what’s important By: Ryan S. Davis Arthropod

What’s The Problem…. …What’s The Solution

What’s The Problem…. …What’s The Solution

Introduction to Child Health Nursing - University of · PDF fileIntroduction to Child Health Nursing . ... Describe the evolution and scope of child health nursing 3. ... What’s

Introduction to Child Health Nursing - University of · PDF fileIntroduction to Child Health Nursing . ... Describe the evolution and scope of child health nursing 3. ... What’s

THE PHILIPPINE ADR REVIEW...THE PHILIPPINE ADR REVIEW Broadening its scope of arbitration advocacy OCTOBER 2018 WHAT’S INSIDE 3/F, Commerce and Industry Plaza 1030 Campus Avenue

THE PHILIPPINE ADR REVIEW...THE PHILIPPINE ADR REVIEW Broadening its scope of arbitration advocacy OCTOBER 2018 WHAT’S INSIDE 3/F, Commerce and Industry Plaza 1030 Campus Avenue

WEATHER What’s the weather like today? What’s the weather like in Poland/the UK What’s the weather like in winter/summer/ automn/spring What’s your favourite.

WEATHER What’s the weather like today? What’s the weather like in Poland/the UK What’s the weather like in winter/summer/ automn/spring What’s your favourite.

What’s in Scope? - Bula Intelligence...— Search with an asterisk at the end of a word to search wildcards (ex.: contracept*) • Your searched keywords are highlighted in the items’

What’s in Scope? - Bula Intelligence...— Search with an asterisk at the end of a word to search wildcards (ex.: contracept*) • Your searched keywords are highlighted in the items’

What’s the Volume? - K-5 Math Teaching Resources · What’s the Volume? Materials: What’s the Volume? cards _____ 1. Choose four different What’s the Volume cards. 2. Calculate

What’s the Volume? - K-5 Math Teaching Resources · What’s the Volume? Materials: What’s the Volume? cards _____ 1. Choose four different What’s the Volume cards. 2. Calculate

Unit 2 What’s the matter? Section B Section B Inquire What’s the matter with you? What’s wrong with you? What’s the trouble with you? I have a cold.

Unit 2 What’s the matter? Section B Section B Inquire What’s the matter with you? What’s wrong with you? What’s the trouble with you? I have a cold.

Day Two: What’s the Problem? What’s the Plan?€¦ · Day Two: What’s the Problem? What’s the Plan? Explore (20 minutes) Children will practice identifying problems and create

Day Two: What’s the Problem? What’s the Plan?€¦ · Day Two: What’s the Problem? What’s the Plan? Explore (20 minutes) Children will practice identifying problems and create

What’s Hot & What’s Not in the Core Measure Field

What’s Hot & What’s Not in the Core Measure Field

Colorectal Cancer: What’s New and What’s on the Horizon

Colorectal Cancer: What’s New and What’s on the Horizon

1. WHAT’S THE WEATHER LIKE ? What’s the weather the ...ekladata.com/AzywrO9guI1MipmoHel9SzwnpIc.pdf · WHAT’S THE WEATHER LIKE ? What’s the weather the weather? What’s the

1. WHAT’S THE WEATHER LIKE ? What’s the weather the ...ekladata.com/AzywrO9guI1MipmoHel9SzwnpIc.pdf · WHAT’S THE WEATHER LIKE ? What’s the weather the weather? What’s the

WHAT’S KNOWN WHAT’S NEW WHAT’S NEXT - DCRI · WHAT’S KNOWN WHAT’S NEW WHAT’S NEXT ANNUAL REPORT ... fewer adults would be taking the drug than if they ... pros and cons

WHAT’S KNOWN WHAT’S NEW WHAT’S NEXT - DCRI · WHAT’S KNOWN WHAT’S NEW WHAT’S NEXT ANNUAL REPORT ... fewer adults would be taking the drug than if they ... pros and cons

PEI Regulations Overview: What’s Different and What’s the Same?

PEI Regulations Overview: What’s Different and What’s the Same?

Review: What’s the Object? What’s the Object? Motive? Motive? Circumstances? Circumstances?

Review: What’s the Object? What’s the Object? Motive? Motive? Circumstances? Circumstances?

17 December 2013 Classwork. What’s the date today? What’s the day today? What’s the weather like today?

17 December 2013 Classwork. What’s the date today? What’s the day today? What’s the weather like today?

WHAT’S WRONG WITH THE MARKET? AND WHAT’S THE ANTIDOTE?

WHAT’S WRONG WITH THE MARKET? AND WHAT’S THE ANTIDOTE?

Scope Management Plan - s7629.pcdn.co · Controlling project scope is the process of monitoring the status of the project scope and managing changes to the scope baseline. ... Scope

Scope Management Plan - s7629.pcdn.co · Controlling project scope is the process of monitoring the status of the project scope and managing changes to the scope baseline. ... Scope

What’s the parking rule?. What’s the rule? Blue curb.

What’s the parking rule?. What’s the rule? Blue curb.