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: .docs/angular-meteor/client/views/steps/tutorial.step_03.html
+15-15
Original file line number
Diff line number
Diff line change
@@ -28,16 +28,16 @@ <h1>Step 3 - 3-Way data binding</h1>
28
28
So, if we were in any Framework other than Meteor, we would start implementing a series of REST end points to connect the server to the client.
29
29
Also, we would need to create a database and functions to connect to it.
30
30
31
-
And we haven't talked about realtime, so then we need to add sockets, and a local DB for cache and handle latency compensation (or just ignore those features and create a not - so - good and modern app...)
31
+
And we haven't talked about realtime, in which case we would need to add sockets, and a local DB for cache and handle latency compensation (or just ignore those features and create a not - so - good and modern app...)
32
32
33
33
But luckily, we use Meteor!
34
34
35
35
36
36
Meteor makes writing distributed client code as simple as talking to a local database. It's a clean, simple, and secure approach that obviates the need to implement individual RPC endpoints, manually cache data on the client to avoid slow roundtrips to the server, and carefully orchestrate invalidation messages to every client as data changes.
37
37
38
-
In Meteor, the client and server share the same database API. The same exact application code — like validators and computed properties — can often run in both places. But while code running on the server has direct access to the database, code running on the client does not. This distinction is the basis for Meteor's data security model.
38
+
In Meteor, the client and server share the same database API. The exact same application code — like validators and computed properties — can often run in both places. But while code running on the server has direct access to the database, code running on the client does not. This distinction is the basis for Meteor's data security model.
39
39
40
-
Every Meteor client includes an in-memory database cache. To manage the client cache, the server publishes sets of JSON documents, and the client subscribes to those sets. As documents in a set change, the server patches each client's cache.
40
+
Every Meteor client includes an in-memory database cache. To manage the client cache, the server publishes sets of JSON documents, and the client subscribes to these sets. As documents in a set change, the server patches each client's cache.
41
41
42
42
43
43
That introduce us to a new concept - Reactivity.
@@ -60,13 +60,13 @@ <h1>Step 3 - 3-Way data binding</h1>
60
60
61
61
Now that we've created the collection, our client needs to subscribe to it's changes and bind it to our parties AngularJS collection.
62
62
63
-
To bind them we are going to use angular-meteor built-in [service](https://docs.angularjs.org/guide/services) called $meteor.collection.
63
+
To bind them we are going to use the built-in angular-meteor [service](https://docs.angularjs.org/guide/services) called $meteor.collection.
64
64
65
65
We are going to replace the declaration of $scope.parties with the following command inside the PartiesListCtrl controller:
66
66
67
67
$scope.parties = $meteor.collection(Parties);
68
68
69
-
That line declares a new $scope.parties variable so we don't need to do something like $scope.parties = []; and then bind it to the Parties Mongo collection.
69
+
This line declares a new $scope.parties variable so we don't need to do something like $scope.parties = []; and then bind it to the Parties Mongo collection.
70
70
71
71
We also need to add the $meteor service to the controller with dependency injection.
72
72
@@ -89,9 +89,9 @@ <h1>Step 3 - 3-Way data binding</h1>
89
89
}
90
90
91
91
92
-
Now every change that will happen to the $scope.parties variable will automatically be saved to the local minimongo and synced to the MongoDB server DB and all the other clients in realtime!
92
+
Now every change that happens to the $scope.parties variable will automatically be saved to the local minimongo and synced to the MongoDB server DB and all the other clients in realtime!
93
93
94
-
But we still don't have information so let's add some.
94
+
But we still don't have data in that collection, so let's add some.
95
95
Let's initialize our server with the same parties we had before.
96
96
97
97
Add this to the bottom of app.js:
@@ -116,11 +116,11 @@ <h1>Step 3 - 3-Way data binding</h1>
Now each time the user types inside those inputs, the value of the newParty scope variable will be automatically updated. Conversely, if $scope.newParty is changed outside of the HTML, the input values will be updated accordingly.
85
+
Now each time the user types inside these inputs, the value of the newParty scope variable will be automatically updated. Conversely, if $scope.newParty is changed outside of the HTML, the input values will be updated accordingly.
ng-click binds the click event into an expression.
95
-
So we take the parties scope array (when accessing scope variables in the HTML, there is no need to add $scope. before) and push the newParty variable into it.
94
+
ng-click binds the click event to an expression.
95
+
So we take the parties scope array (when accessing scope variables in the HTML, there is no need to add $scope. before them) and push the newParty variable into it.
96
96
97
97
Open a different browser, click the button and see how the party is added on both clients. So simple!
There isn't a lot of difference here except a little bit of performance, but now let's change our remove function:
152
+
There isn't much difference here except a small performance improvement, but now let's change our remove function:
153
153
154
154
$scope.remove = function(party){
155
155
$scope.parties.remove(party);
156
156
};
157
157
158
-
Much nicer! and also better performance.
158
+
Much nicer, and gives better performance!
159
159
160
-
Let's also add a button for remove all parties:
160
+
Also let's add a button to remove all parties:
161
161
162
162
<buttonng-click="removeAll()">remove all</button>
163
163
164
-
and add it's function in the scope:
164
+
not forgetting to add this new function to the scope:
165
165
166
166
$scope.removeAll = function(){
167
167
$scope.parties.remove();
168
168
};
169
169
170
-
Very simple syntax.
170
+
Again, very simple syntax.
171
171
172
172
You can read more about AngularMeteorCollection and it's helper functions in the [API reference](http://angularjs.meteor.com/api/AngularMeteorCollection).
- Questions and help - [stack-overflow `angular-meteor` tag](http://stackoverflow.com/questions/tagged/angular-meteor)
19
-
- Discussions - [Meteor Forums](https://forums.meteor.com/) and [](https://gitter.im/Urigo/angular-meteor?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
19
+
- Discussions - [Angular category on the Meteor Forum](https://forums.meteor.com/c/angular) and [](https://gitter.im/Urigo/angular-meteor?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
0 commit comments