You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/chapters/chapter3.md
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -98,17 +98,18 @@ In `app/app.component.ts`, find the find the first `<TextField>`, and replace it
98
98
99
99
<divclass="exercise-end"></div>
100
100
101
-
At first glance the `[(ngModel)]` syntax looks more than a little odd, as it’s essentially a combination of the event and attribute binding syntax that you used in earlier examples. In the case of this example, `[(ngModel)]="email"` is shorthand for `[text]="email" (emailChange)="email=$event"`, which binds the email element’s `text` attribute to an `email` property, as well as adds a `change` event handler that updates the `email` property’s value whenever the user makes a change.
101
+
At first glance the `[(ngModel)]` syntax looks more than a little odd, as it’s essentially a combination of the event and attribute binding syntax that you used in earlier examples. In the case of this example, `[(ngModel)]="email"` is shorthand for `[text]="email" (emailChange)="email=$event"`, which binds the email element’s `text` attribute to an `email` property and adds a `change` event handler that updates the `email` property’s value whenever the user makes a change.
102
102
103
-
Don’t worry too much about the details here while we’re still getting started. In your head you can think of `[(ngModel)]` as the way to implement two-way data binding when you need it on form controls. And to show that it works, if you again modify your app’s email address and click the “Sign In” button, you’ll see the updated value in the alert as expected:
103
+
Don’t worry too much about the details here while we’re still getting started. In your head you can think of `[(ngModel)]` as the way to implement two-way data binding when you need it on form controls. To show that it works, if you again modify your app’s email address and click the “Sign In” button, you’ll see the updated value in the alert as expected:
104
104
105
105

106
106
107
107
At this point, you have a basic login screen setup with two-way data binding—not bad for 20 some lines of code of TypeScript. (Think about how much code you’d have to write in Android Studio _and_ Xcode to accomplish the same task.) To this point though you’ve been placing all of your logic in a single TypeScript file, which doesn’t scale all that well for real-world applications.
108
108
109
-
TODO: Transition
109
+
Before we tie this app to a backend and make this login screen fully functional, let’s take a step back and setup a structure that can scale.
110
110
111
-
<h4class="exercise-start">
111
+
<!--commenting this out as I don't think it belongs here. We just said we're going to move code out of the single file, then we start talking about more stuff to add to the single file...confuzzled-->
112
+
<!--<h4 class="exercise-start">
112
113
<b>Exercise</b>: ???
113
114
</h4>
114
115
@@ -138,11 +139,10 @@ export class AppComponent {
138
139
<div class="exercise-end"></div>
139
140
140
141
TODO: Transition
142
+
-->
141
143
142
144
143
145
144
-
Before we tie this app to a backend and make this login screen fully functional, let’s take a step back and setup a structure that can scale.
145
-
146
146
### Structuring your app
147
147
148
148
There are many reasons to segment any application into modular units, and you can [read about the various benefits on Wikipedia](https://en.wikipedia.org/wiki/Modular_programming). However, keeping NativeScript apps modular has one unique benefit: the ability to share the code you write between Angular-2-built web apps, and Angular-2-built native apps.
0 commit comments