Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit 4097c67

Browse files
Foxandxsswardbell
authored andcommitted
chore: rename Elvis to safe navigation operator
closes #1139
1 parent 0e63b1f commit 4097c67

File tree

5 files changed

+74
-74
lines changed

5 files changed

+74
-74
lines changed

public/docs/_examples/template-syntax/dart/lib/app_component.html

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ <h1>Template Syntax</h1>
3434
<a href="#local-vars">Template local variables</a><br>
3535
<a href="#inputs-and-outputs">Inputs and outputs</a><br>
3636
<a href="#pipes">Pipes</a><br>
37-
<a href="#elvis">Elvis <i>?.</i></a><br>
37+
<a href="#safe-navigation-operator">Safe navigation operator <i>?.</i></a><br>
3838
<!--<a href="#enums">Enums</a><br>-->
3939

4040
<!-- Interpolation and expressions -->
@@ -738,25 +738,25 @@ <h4>Example Form</h4>
738738

739739
<a class="to-toc" href="#toc">top</a>
740740

741-
<!-- Null values and the Elvis operator -->
742-
<hr><h2 id="elvis">Elvis <i>?.</i></h2>
741+
<!-- Null values and the safe navigation operator -->
742+
<hr><h2 id="safe-navigation-operator">Safe navigation operator <i>?.</i></h2>
743743

744744
<div>
745-
<!-- #docregion elvis-1 -->
745+
<!-- #docregion safe-1 -->
746746
The title is {{ title }}
747-
<!-- #enddocregion elvis-1 -->
747+
<!-- #enddocregion safe-1 -->
748748
</div>
749749

750750
<div>
751-
<!-- #docregion elvis-2 -->
751+
<!-- #docregion safe-2 -->
752752
The current hero's name is {{currentHero?.firstName}}
753-
<!-- #enddocregion elvis-2 -->
753+
<!-- #enddocregion safe-2 -->
754754
</div>
755755

756756
<div>
757-
<!-- #docregion elvis-3 -->
757+
<!-- #docregion safe-3 -->
758758
The current hero's name is {{currentHero.firstName}}
759-
<!-- #enddocregion elvis-3 -->
759+
<!-- #enddocregion safe-3 -->
760760
</div>
761761

762762

@@ -768,18 +768,18 @@ <h4>Example Form</h4>
768768
EXCEPTION: The null object does not have a getter 'firstName'.
769769
-->
770770

771-
<!-- #docregion elvis-4 -->
771+
<!-- #docregion safe-4 -->
772772
<!--No hero, div not displayed, no error -->
773773
<div *ngIf="nullHero != null">The null hero's name is {{nullHero.firstName}}</div>
774-
<!-- #enddocregion elvis-4 -->
774+
<!-- #enddocregion safe-4 -->
775775

776-
<!-- skip docregion elvis-5 -->
776+
<!-- skip docregion safe-5 -->
777777

778778
<div>
779-
<!-- #docregion elvis-6 -->
779+
<!-- #docregion safe-6 -->
780780
<!-- No hero, no problem! -->
781781
The null hero's name is {{nullHero?.firstName}}
782-
<!-- #enddocregion elvis-6 -->
782+
<!-- #enddocregion safe-6 -->
783783
</div>
784784

785785

public/docs/_examples/template-syntax/ts/app/app.component.html

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ <h1>Template Syntax</h1>
3434
<a href="#local-vars">Template local variables</a><br>
3535
<a href="#inputs-and-outputs">Inputs and outputs</a><br>
3636
<a href="#pipes">Pipes</a><br>
37-
<a href="#elvis">Elvis <i>?.</i></a><br>
37+
<a href="#safe-navigation-operator">Safe navigation operator <i>?.</i></a><br>
3838
<a href="#enums">Enums</a><br>
3939

4040
<!-- Interpolation and expressions -->
@@ -739,25 +739,25 @@ <h4>Example Form</h4>
739739

740740
<a class="to-toc" href="#toc">top</a>
741741

742-
<!-- Null values and the Elvis operator -->
743-
<hr><h2 id="elvis">Elvis <i>?.</i></h2>
742+
<!-- Null values and the safe navigation operator -->
743+
<hr><h2 id="safe-navigation-operator">Safe navigation operator <i>?.</i></h2>
744744

745745
<div>
746-
<!-- #docregion elvis-1 -->
746+
<!-- #docregion safe-1 -->
747747
The title is {{ title }}
748-
<!-- #enddocregion elvis-1 -->
748+
<!-- #enddocregion safe-1 -->
749749
</div>
750750

751751
<div>
752-
<!-- #docregion elvis-2 -->
752+
<!-- #docregion safe-2 -->
753753
The current hero's name is {{currentHero?.firstName}}
754-
<!-- #enddocregion elvis-2 -->
754+
<!-- #enddocregion safe-2 -->
755755
</div>
756756

757757
<div>
758-
<!-- #docregion elvis-3 -->
758+
<!-- #docregion safe-3 -->
759759
The current hero's name is {{currentHero.firstName}}
760-
<!-- #enddocregion elvis-3 -->
760+
<!-- #enddocregion safe-3 -->
761761
</div>
762762

763763

@@ -768,22 +768,22 @@ <h4>Example Form</h4>
768768
TypeError: Cannot read property 'firstName' of null in [null]
769769
-->
770770

771-
<!-- #docregion elvis-4 -->
771+
<!-- #docregion safe-4 -->
772772
<!--No hero, div not displayed, no error -->
773773
<div *ngIf="nullHero">The null hero's name is {{nullHero.firstName}}</div>
774-
<!-- #enddocregion elvis-4 -->
774+
<!-- #enddocregion safe-4 -->
775775

776776
<div>
777-
<!-- #docregion elvis-5 -->
777+
<!-- #docregion safe-5 -->
778778
The null hero's name is {{nullHero && nullHero.firstName}}
779-
<!-- #enddocregion elvis-5 -->
779+
<!-- #enddocregion safe-5 -->
780780
</div>
781781

782782
<div>
783-
<!-- #docregion elvis-6 -->
783+
<!-- #docregion safe-6 -->
784784
<!-- No hero, no problem! -->
785785
The null hero's name is {{nullHero?.firstName}}
786-
<!-- #enddocregion elvis-6 -->
786+
<!-- #enddocregion safe-6 -->
787787
</div>
788788

789789

public/docs/dart/latest/guide/template-syntax.jade

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -366,11 +366,11 @@ table
366366
:marked
367367
## Template expression operators
368368
The template expression language employs a subset of Dart syntax supplemented with a few special operators
369-
for specific scenarios. We'll cover two of these operators: _pipe_ and _Elvis_.
369+
for specific scenarios. We'll cover two of these operators: _pipe_ and _safe navigation operator_.
370370
.callout.is-helpful
371371
header Dart difference: ?. is a Dart operator
372372
:marked
373-
The Elvis operator (`?.`) is part of the Dart language.
373+
The safe navigation operator (`?.`) is part of the Dart language.
374374
It's considered a template expression operator because
375375
Angular 2 supports `?.` even in TypeScript and JavaScript apps.
376376
+includeShared('{ts}', 'expression-operators-pipe-1')
@@ -383,28 +383,28 @@ table
383383
NOTE: Intentionally omit discussion of the json pipe.
384384
+includeShared('{ts}', 'expression-operators-pipe-4')
385385
+makeExample('template-syntax/dart/lib/app_component.html', 'pipes-json')(format=".")
386-
+includeShared('{ts}', 'expression-operators-elvis-1')
387-
+makeExample('template-syntax/dart/lib/app_component.html', 'elvis-2')(format=".")
388-
+includeShared('{ts}', 'expression-operators-elvis-2')
389-
+makeExample('template-syntax/dart/lib/app_component.html', 'elvis-1')(format=".")
390-
+includeShared('{ts}', 'expression-operators-elvis-3')
391-
// +includeShared('{ts}', 'expression-operators-elvis-4')
386+
+includeShared('{ts}', 'expression-operators-safe-1')
387+
+makeExample('template-syntax/dart/lib/app_component.html', 'safe-2')(format=".")
388+
+includeShared('{ts}', 'expression-operators-safe-2')
389+
+makeExample('template-syntax/dart/lib/app_component.html', 'safe-1')(format=".")
390+
+includeShared('{ts}', 'expression-operators-safe-3')
391+
// +includeShared('{ts}', 'expression-operators-safe-4')
392392
:marked
393393
Dart throws an exception, and so does Angular:
394394
code-example(format="" language="html").
395395
EXCEPTION: The null object does not have a getter 'firstName'.
396-
+includeShared('{ts}', 'expression-operators-elvis-5')
397-
+makeExample('template-syntax/dart/lib/app_component.html', 'elvis-4')(format=".")
396+
+includeShared('{ts}', 'expression-operators-safe-5')
397+
+makeExample('template-syntax/dart/lib/app_component.html', 'safe-4')(format=".")
398398

399399
//
400400
NOTE: Intentionally skip ugly null checking you wouldn't do in Dart.
401-
That means skipping the shared sections 'expression-operators-elvis-6' & 7,
402-
plus the example 'elvis-5'.
401+
That means skipping the shared sections 'expression-operators-safe-6' & 7,
402+
plus the example 'safe-5'.
403403
:marked
404404
This approach has merit but can be cumbersome, especially if the property path is long.
405405
Imagine guarding against a null somewhere in a long property path such as `a.b.c.d`.
406-
+includeShared('{ts}', 'expression-operators-elvis-8')
407-
+makeExample('template-syntax/dart/lib/app_component.html', 'elvis-6')(format=".")
408-
+includeShared('{ts}', 'expression-operators-elvis-9')
406+
+includeShared('{ts}', 'expression-operators-safe-8')
407+
+makeExample('template-syntax/dart/lib/app_component.html', 'safe-6')(format=".")
408+
+includeShared('{ts}', 'expression-operators-safe-9')
409409

410410
+includeShared('{ts}', 'summary')

public/docs/ts/latest/guide/template-syntax.jade

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ include ../_util-fns
2828
* [Input and output properties](#inputs-outputs)
2929
* [Template expression operators](#expression-operators)
3030
* [pipe](#pipe)
31-
* ["elvis" (?.)](#elvis)
31+
* ["safe navigation operator" (?.)](#safe-navigation-operator)
3232
// #enddocregion intro
3333
.l-sub-section
3434
:marked
@@ -1576,7 +1576,7 @@ figure.image-display
15761576
:marked
15771577
## Template expression operators
15781578
The template expression language employs a subset of JavaScript syntax supplemented with a few special operators
1579-
for specific scenarios. We'll cover two of these operators: _pipe_ and _Elvis_.
1579+
for specific scenarios. We'll cover two of these operators: _pipe_ and _safe navigation operator_.
15801580
// #enddocregion expression-operators
15811581
15821582
// #docregion expression-operators-pipe-1
@@ -1608,23 +1608,23 @@ figure.image-display
16081608
// #enddocregion expression-operators-pipe-4
16091609
+makeExample('template-syntax/ts/app/app.component.html', 'pipes-json')(format=".")
16101610

1611-
// #docregion expression-operators-elvis-1
1611+
// #docregion expression-operators-safe-1
16121612
:marked
1613-
<a id="elvis"></a>
1614-
### The Elvis operator ( ?. ) and null property paths
1613+
<a id="safe-navigation-operator"></a>
1614+
### The safe navigation operator ( ?. ) and null property paths
16151615

1616-
The Angular **Elvis operator (`?.`)** &mdash; perhaps better described as the "safe navigation operator" &mdash; is a fluent and convenient way to guard against null and undefined values in property paths.
1616+
The Angular **safe navigation operator (`?.`)** is a fluent and convenient way to guard against null and undefined values in property paths.
16171617
Here it is, protecting against a view render failure if the `currentHero` is null.
1618-
// #enddocregion expression-operators-elvis-1
1619-
+makeExample('template-syntax/ts/app/app.component.html', 'elvis-2')(format=".")
1620-
// #docregion expression-operators-elvis-2
1618+
// #enddocregion expression-operators-safe-1
1619+
+makeExample('template-syntax/ts/app/app.component.html', 'safe-2')(format=".")
1620+
// #docregion expression-operators-safe-2
16211621
:marked
16221622
Let’s elaborate on the problem and this particular solution.
16231623

16241624
What happens when the following data bound `title` property is null?
1625-
// #enddocregion expression-operators-elvis-2
1626-
+makeExample('template-syntax/ts/app/app.component.html', 'elvis-1')(format=".")
1627-
// #docregion expression-operators-elvis-3
1625+
// #enddocregion expression-operators-safe-2
1626+
+makeExample('template-syntax/ts/app/app.component.html', 'safe-1')(format=".")
1627+
// #docregion expression-operators-safe-3
16281628
:marked
16291629
The view still renders but the displayed value is blank; we see only "The title is" with nothing after it.
16301630
That is reasonable behavior. At least the app doesn't crash.
@@ -1634,14 +1634,14 @@ figure.image-display
16341634

16351635
code-example(format="" language="html").
16361636
The null hero's name is {{nullHero.firstName}}
1637-
// #enddocregion expression-operators-elvis-3
1638-
// #docregion expression-operators-elvis-4
1637+
// #enddocregion expression-operators-safe-3
1638+
// #docregion expression-operators-safe-4
16391639
:marked
16401640
JavaScript throws a null reference error, and so does Angular:
16411641
code-example(format="" language="html").
16421642
TypeError: Cannot read property 'firstName' of null in [null]
1643-
// #enddocregion expression-operators-elvis-4
1644-
// #docregion expression-operators-elvis-5
1643+
// #enddocregion expression-operators-safe-4
1644+
// #docregion expression-operators-safe-5
16451645
:marked
16461646
Worse, the *entire view disappears*.
16471647

@@ -1659,30 +1659,30 @@ code-example(format="" language="html").
16591659
Unfortunately, our app crashes when the `currentHero` is null.
16601660

16611661
We could code around that problem with [NgIf](#ngIf).
1662-
// #enddocregion expression-operators-elvis-5
1663-
+makeExample('template-syntax/ts/app/app.component.html', 'elvis-4')(format=".")
1664-
// #docregion expression-operators-elvis-6
1662+
// #enddocregion expression-operators-safe-5
1663+
+makeExample('template-syntax/ts/app/app.component.html', 'safe-4')(format=".")
1664+
// #docregion expression-operators-safe-6
16651665
:marked
16661666
Or we could try to chain parts of the property path with `&&`, knowing that the expression bails out
16671667
when it encounters the first null.
1668-
// #enddocregion expression-operators-elvis-6
1669-
+makeExample('template-syntax/ts/app/app.component.html', 'elvis-5')(format=".")
1670-
// #docregion expression-operators-elvis-7
1668+
// #enddocregion expression-operators-safe-6
1669+
+makeExample('template-syntax/ts/app/app.component.html', 'safe-5')(format=".")
1670+
// #docregion expression-operators-safe-7
16711671
:marked
16721672
These approaches have merit but can be cumbersome, especially if the property path is long.
16731673
Imagine guarding against a null somewhere in a long property path such as `a.b.c.d`.
1674-
// #enddocregion expression-operators-elvis-7
1675-
// #docregion expression-operators-elvis-8
1674+
// #enddocregion expression-operators-safe-7
1675+
// #docregion expression-operators-safe-8
16761676
:marked
1677-
The Angular Elvis operator (`?.`) is a more fluent and convenient way to guard against nulls in property paths.
1677+
The Angular safe navigation operator (`?.`) is a more fluent and convenient way to guard against nulls in property paths.
16781678
The expression bails out when it hits the first null value.
16791679
The display is blank, but the app keeps rolling without errors.
1680-
// #enddocregion expression-operators-elvis-8
1681-
+makeExample('template-syntax/ts/app/app.component.html', 'elvis-6')(format=".")
1682-
// #docregion expression-operators-elvis-9
1680+
// #enddocregion expression-operators-safe-8
1681+
+makeExample('template-syntax/ts/app/app.component.html', 'safe-6')(format=".")
1682+
// #docregion expression-operators-safe-9
16831683
:marked
16841684
It works perfectly with long property paths such as `a?.b?.c?.d`.
1685-
// #enddocregion expression-operators-elvis-9
1685+
// #enddocregion expression-operators-safe-9
16861686
16871687
// #docregion summary
16881688
.l-main-section

public/docs/ts/latest/guide/upgrade.jade

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1655,7 +1655,7 @@ code-example(format="").
16551655
a property expression, as opposed to a literal string.
16561656
* We've replaced `ng-repeat`s with `*ngFor`s.
16571657
* We've replaced `ng-click` with an event binding for the standard `click`.
1658-
* In all references to `phone`, we're using the elvis operator `?.` for
1658+
* In all references to `phone`, we're using the safe navigation operator `?.` for
16591659
safe property navigation. We need it because when the component first loads,
16601660
we don't have `phone` yet and the expressions will refer to a non-existing
16611661
value. Unlike in Angular 1, Angular 2 expressions do not fail silently when

0 commit comments

Comments
 (0)