Skip to content

Commit 8b56ec9

Browse files
committed
Merge remote-tracking branch 'origin/master'
2 parents bab9e67 + 4691c22 commit 8b56ec9

File tree

4 files changed

+38
-38
lines changed

4 files changed

+38
-38
lines changed

.docs/angular-meteor/client/views/steps/tutorial.step_03.html

+15-15
Original file line numberDiff line numberDiff line change
@@ -28,16 +28,16 @@ <h1>Step 3 - 3-Way data binding</h1>
2828
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.
2929
Also, we would need to create a database and functions to connect to it.
3030

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...)
3232

3333
But luckily, we use Meteor!
3434

3535

3636
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.
3737

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.
3939

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.
4141

4242

4343
That introduce us to a new concept - Reactivity.
@@ -60,13 +60,13 @@ <h1>Step 3 - 3-Way data binding</h1>
6060

6161
Now that we've created the collection, our client needs to subscribe to it's changes and bind it to our parties AngularJS collection.
6262

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.
6464

6565
We are going to replace the declaration of $scope.parties with the following command inside the PartiesListCtrl controller:
6666

6767
$scope.parties = $meteor.collection(Parties);
6868

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.
7070

7171
We also need to add the $meteor service to the controller with dependency injection.
7272

@@ -89,9 +89,9 @@ <h1>Step 3 - 3-Way data binding</h1>
8989
}
9090

9191

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!
9393

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.
9595
Let's initialize our server with the same parties we had before.
9696

9797
Add this to the bottom of app.js:
@@ -116,11 +116,11 @@ <h1>Step 3 - 3-Way data binding</h1>
116116
});
117117
}
118118

119-
As you can probably understand, this code runs only on the server, and when Meteor starts it initialize the DB with sample parties.
119+
As you can probably understand, this code runs only on the server, and when Meteor starts it initializes the DB with these sample parties.
120120

121-
Run the app and see if you see the list of parties on the screen.
121+
Run the app and you should see the list of parties on the screen.
122122

123-
In the next chapter we will see how easy it is to manipulate the data, save and publish the changes to the server and all the connected clients.
123+
In the next chapter we will see how easy it is to manipulate the data, save and publish changes to the server, and by doing so, all the connected clients will automatically get updated.
124124

125125
# Inserting parties from the console
126126

@@ -129,7 +129,7 @@ <h1>Step 3 - 3-Way data binding</h1>
129129

130130
meteor mongo
131131

132-
This opens a console into your app's local development database. Into the prompt, type:
132+
This opens a console into your app's local development database. At the prompt, type:
133133

134134
db.parties.insert({ name: "A new party", description: "From the mongo console!" });
135135

@@ -138,18 +138,18 @@ <h1>Step 3 - 3-Way data binding</h1>
138138

139139
Insert a few more parties from the database console with different text.
140140

141-
Now let's do the same but with remove. Into the prompt, type the following command to look at all the parties and their properties:
141+
Now let's do the same but with remove. At the prompt, type the following command to look at all the parties and their properties:
142142

143143
db.parties.find({});
144144

145145
Now choose one party you want to remove and copy it's id property.
146-
Then, remove it like that (replace N4KzMEvtm4dYvk2TF with your party's id value):
146+
Then, remove it using that id (replace N4KzMEvtm4dYvk2TF with your party's id value):
147147

148148
db.parties.remove( {"_id": "N4KzMEvtm4dYvk2TF"});
149149

150-
Again, you will see the UI of your app immediately update to without the removed party.
150+
Again, you will see the UI of your app immediately update with that party removed.
151151

152-
Try running more actions like update an object from the console and so on..
152+
Try running more actions like updating an object from the console and so on.
153153

154154
In the next step, we'll see how to add functionality to our app's UI so that we can add parties without using the database console.
155155

.docs/angular-meteor/client/views/steps/tutorial.step_04.html

+21-21
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,11 @@ <h1>Step 4 - Adding/removing objects and Angular event handling</h1>
2525

2626
Now that we have full data binding from server to client, let's interact with the data and see the updates in action.
2727

28-
In this chapter you will add the option to add a new party and delete an existing one.
28+
In this chapter you will add the ability to insert a new party and delete an existing one from the UI.
2929

30-
First let's add a simple form with a button that will add a new party.
30+
First let's create a simple form with a button that will add a new party.
3131

32-
Add to following form inside the PartiesListCtrl div:
32+
Add the following form inside the PartiesListCtrl div:
3333

3434
<form>
3535
<label>Name</label>
@@ -40,7 +40,7 @@ <h1>Step 4 - Adding/removing objects and Angular event handling</h1>
4040
</form>
4141

4242

43-
So that index.ng.html will look like that:
43+
So that index.ng.html will look like this:
4444

4545
__`index.ng.html`:__
4646

@@ -68,9 +68,9 @@ <h1>Step 4 - Adding/removing objects and Angular event handling</h1>
6868

6969
## ng-model
7070

71-
First thing, let's bind the value of the inputs into a new party variable.
71+
First things first, let's bind the value of the inputs into a new party variable.
7272

73-
To do that we will use the simple and powerful [ng-model](https://docs.angularjs.org/api/ng/directive/ngModel) AngularJS directive.
73+
To do that we'll use the simple and powerful [ng-model](https://docs.angularjs.org/api/ng/directive/ngModel) AngularJS directive.
7474

7575
Add ng-model to the form like this:
7676

@@ -82,7 +82,7 @@ <h1>Step 4 - Adding/removing objects and Angular event handling</h1>
8282
<button>Add</button>
8383
</form>
8484

85-
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.
8686

8787
## ng-click
8888

@@ -91,8 +91,8 @@ <h1>Step 4 - Adding/removing objects and Angular event handling</h1>
9191

9292
<button ng-click="parties.push(newParty); newParty='';">Add</button>
9393

94-
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.
9696

9797
Open a different browser, click the button and see how the party is added on both clients. So simple!
9898

@@ -110,17 +110,17 @@ <h1>Step 4 - Adding/removing objects and Angular event handling</h1>
110110
</ul>
111111

112112

113-
So this time we are binding ng-click to a scope function that gets the current party as a parameter.
113+
This time we are binding ng-click to a scope function that gets the current party as a parameter.
114114

115115
Let's go into the controller and add that function.
116116

117-
Add that function inside the PartiesListCtrl in `app.js`:
117+
Add the function inside the PartiesListCtrl in `app.js`:
118118

119119
$scope.remove = function(party){
120120
$scope.parties.splice( $scope.parties.indexOf(party), 1 );
121121
};
122122

123-
And this is how the controller should look now:
123+
And this is how the controller should now look:
124124

125125
angular.module("socially").controller("PartiesListCtrl", ['$scope', '$meteor',
126126
function($scope, $meteor){
@@ -139,35 +139,35 @@ <h1>Step 4 - Adding/removing objects and Angular event handling</h1>
139139

140140
# AngularMeteorCollection functions
141141

142-
$meteor.collection's return value is a new collection from type [AngularMeteorCollection](/api/AngularMeteorCollection).
142+
$meteor.collection's return value is a new collection of type [AngularMeteorCollection](/api/AngularMeteorCollection).
143143

144144
It is not only responsible for keeping the collection updated, it also has helper functions for saving and deleting objects.
145145

146-
Let's try to use those instead of the current solution.
146+
Let's try to use these helper functions instead of the current implementation.
147147

148-
First let's replace our push to save in the add button action:
148+
First let's replace our 'push' with 'save' in the add button action:
149149

150150
<button ng-click="parties.save(newParty); newParty='';">Add</button>
151151

152-
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:
153153

154154
$scope.remove = function(party){
155155
$scope.parties.remove(party);
156156
};
157157

158-
Much nicer! and also better performance.
158+
Much nicer, and gives better performance!
159159

160-
Let's also add a button for remove all parties:
160+
Also let's add a button to remove all parties:
161161

162162
<button ng-click="removeAll()">remove all</button>
163163

164-
and add it's function in the scope:
164+
not forgetting to add this new function to the scope:
165165

166166
$scope.removeAll = function(){
167167
$scope.parties.remove();
168168
};
169169

170-
Very simple syntax.
170+
Again, very simple syntax.
171171

172172
You can read more about AngularMeteorCollection and it's helper functions in the [API reference](http://angularjs.meteor.com/api/AngularMeteorCollection).
173173

@@ -188,4 +188,4 @@ <h1>Step 4 - Adding/removing objects and Angular event handling</h1>
188188
</ul>
189189
</div>
190190
</div>
191-
</template>
191+
</template>

.docs/angular-meteor/client/views/steps/tutorial.step_09.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ <h1>Step 9 - Privacy and publish-subscribe functions</h1>
7676

7777
We have two ways of doing that:
7878

79-
1. Using the [$meteor.subscribe](/api/subscribe) service that also return a promise when the subscribing is done
79+
1. Using the [$meteor.subscribe](/api/subscribe) service that also returns a promise when the subscribing is done
8080
2. Using [AngularMeteorCollection's](/api/AngularMeteorCollection) subscribe function which is exactly the same but it's
8181
here just for syntactic sugar doesn't return a promise.
8282

README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
- [Example application](https://github.com/Urigo/meteor-angular-socially) (Final version of the tutorial)
1717
- [angular-meteor University](https://github.com/Urigo/meteor-angular-socially#angular-meteor-university-)
1818
- Questions and help - [stack-overflow `angular-meteor` tag](http://stackoverflow.com/questions/tagged/angular-meteor)
19-
- Discussions - [Meteor Forums](https://forums.meteor.com/) and [![Join the chat at https://gitter.im/Urigo/angular-meteor](https://badges.gitter.im/Join%20Chat.svg)](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 [![Join the chat at https://gitter.im/Urigo/angular-meteor](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/Urigo/angular-meteor?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
2020
- [Report issues](https://github.com/Urigo/angular-meteor/issues)
2121
- [Change Log, updates and breaking changes](https://github.com/Urigo/angular-meteor/releases)
2222
- [Roadmap - Trello board](https://trello.com/b/Wj9U0ulk/angular-meteor)

0 commit comments

Comments
 (0)