merge master

cleanWeather-vue/1.md

@@ -60,6 +60,6 @@ One of the biggest benefits of using NativeScript is the fast development workfl
 
 > **TIP**:
 > * You can save your current Playground work by clicking the **Save** button at the top. This will generate a URL that you can bookmark for future use.
-> * If you want to continue developing this app locally, you can use the **Download** button at the top of the screen. After you download the app you can continue developing using [NativeScript Sidekick](https://www.nativescript.org/nativescript-sidekick) or the [NativeScript command-line interface](https://docs.nativescript.org/start/quick-setup).
+> * If you want to continue developing this app locally, you can use the **Download** button at the top of the screen. After you download the app, you should install the NativeScript CLI by running the `npm i nativescript -g` command, and then execute the `tns preview` command to preview your work - just as you do in Playground.
 
 And with that, you’re running your first NativeScript app on your device! Now that you have your app up and running, let’s proceed to build our CleanWeather app.

cleanWeather-vue/success.md

@@ -1 +1,26 @@
-If you are interested in learning more about this integration, please visit the #vue channel on NativeScript Community Slack, read the [docs](http://www.nativescript-vue.org) and read more about it on our [blog](http://www.nativescript.org/blog).
+Now that you have learned the basics, you’re ready to set up a local development environment to build your apps. All you need to do is:
+
+* **Step 1. Install the NativeScript CLI**
+
+Run the following command in a Command Prompt or Terminal to install the NativeScript CLI.
+
+```
+npm install nativescript -g
+```
+
+* **Step 2. Create a new app**
+
+Next, run the following command to create a new NativeScript app.
+
+```
+tns create MyApp
+cd MyApp
+```
+
+* **Step 3. Preview your app**
+
+Finally, use the `tns preview` command to preview your new app on your device.
+
+```
+tns preview
+```

getting-started-ng/1.md

@@ -78,7 +78,7 @@ One of the biggest benefits of using NativeScript is the fast development workfl
 
 > **TIP**:
 > * You can save your current Playground work by clicking the **Save** button at the top. This will generate a URL that you can bookmark for future use.
-> * If you want to continue developing this app locally, you can use the **Download** button at the top of the screen. After you download the app you can continue developing using [NativeScript Sidekick](https://www.nativescript.org/nativescript-sidekick) or the [NativeScript command-line interface](https://docs.nativescript.org/start/quick-setup).
+> * If you want to continue developing this app locally, you can use the **Download** button at the top of the screen. After you download the app, you should install the NativeScript CLI by running the `npm i nativescript -g` command, and then execute the `tns preview` command to preview your work - just as you do in Playground.
 
 In NativeScript you use native iOS and Android user interface components to build your app; NativeScript does not use a WebView or web browser in any way. This isn’t obvious when using a simple `<Label>`, so let’s make one more change so you can get a sense of just what NativeScript makes possible.
 

getting-started-ng/success.md

@@ -1,7 +1,16 @@
-Now that you’ve learned the NativeScript basics, you’re ready to move on to our next tutorial, which has you built a complete iOS and Android app from scratch.
+Now that you’ve learned the NativeScript basics, you’re ready to move on to our next tutorial, in which you'll see how to build a complete iOS and Android app from scratch. To continue you can:
 
-You can complete that tutorial in Playground, or, if you prefer to work in a local development environment, you can continue in [NativeScript Sidekick](https://www.nativescript.org/nativescript-sidekick) or the [NativeScript command-line interface](https://docs.nativescript.org/angular/tutorial/ng-chapter-1).
+* **Option 1. Complete the next tutorial in Playground**
 
-As always, if you get stuck, feel free to reach for help on [**Stack Overflow**](https://stackoverflow.com/questions/tagged/nativescript) or ask our experts in [**NativeScript community Slack channel**](http://developer.telerik.com/wp-login.php?action=slack-invitation). Have fun building with NativeScript!
+<a id="btn-next-tutorial" href="/?template=groceries-ng&tutorial=groceries-ng">Complete the&nbsp;<strong>Build a Full App</strong>&nbsp;tutorial in Playground</a>
 
-<a id="btn-next-tutorial" href="/?template=groceries-ng&tutorial=groceries-ng">Start the&nbsp;<strong>Build a Full App</strong>&nbsp;tutorial</a>
+* **Option 2. Start working in a local environment with the NativeScript CLI**
+
+If you’re comfortable working with a command-line interface, you can [install the NativeScript CLI and start developing apps locally](https://docs.nativescript.org/angular/start/quick-setup).
+
+```
+npm install -g nativescript
+tns create MyApp
+cd MyApp
+tns preview
+```

groceries-js/2.md

@@ -272,7 +272,7 @@ The second way is to point at an image that lives within your app's `app` folder
 <Image src="~/images/logo.png"/>
 ```
 
-The third way is to use platform-specific image resources, which you can [learn more about on the NativeScript documentation](https://docs.nativescript.org/ui/images#load-images-from-a-resource). Let’s add a logo images to the Groceries app so you can see how this works.
+The third way is to use platform-specific image resources, which you can [learn more about on the NativeScript documentation](https://docs.nativescript.org/ui/images#load-images-from-a-resource). Let’s add a logo image to the Groceries app so you can see how this works.
 
 <hr data-action="start" />
 

groceries-js/success.md

@@ -1,11 +1,26 @@
-Now that you’ve learned the NativeScript basics, you’re ready to set up a professional development environment to build your apps.
+Now that you have learned the basics, you’re ready to set up a local development environment to build your apps. All you need to do is:
 
-* **[Option 1. Download NativeScript Sidekick](https://www.nativescript.org/nativescript-sidekick)**  
-NativeScript Sidekick is a desktop development tool for building NativeScript apps. Sidekick offers starter templates to help you get started,as well as tooling for more advanced NativeScript functionality, such as plugins, builds, and debugging.
+* **Step 1. Install the NativeScript CLI**
 
-* **[Option 2. Install the NativeScript CLI](https://docs.nativescript.org/angular/tutorial/ng-chapter-1)**  
-If you’re comfortable working with a command-line interface, you can install and work with the NativeScript CLI. The NativeScript CLI lets you build full iOS and Android apps locally on your development machine.
+Run the following command in a Command Prompt or Terminal to install the NativeScript CLI.
 
-As always, if you get stuck, feel free to reach for help on [**Stack Overflow**](https://stackoverflow.com/questions/tagged/nativescript) or ask our experts in [**NativeScript community Slack channel**](http://developer.telerik.com/wp-login.php?action=slack-invitation). Have fun building with NativeScript!
+```
+npm install nativescript -g
+```
 
+* **Step 2. Create a new app**
 
+Next, run the following command to create a new NativeScript app.
+
+```
+tns create MyApp
+cd MyApp
+```
+
+* **Step 3. Preview your app**
+
+Finally, use the `tns preview` command to preview your new app on your device.
+
+```
+tns preview
+```

groceries-ng/1.md

@@ -23,7 +23,7 @@ If you follow this tutorial to the end you’ll have an app that looks like this
 ![](images/android-final-2.png)
 ![](images/android-final-3.png)
 
-> **TIP**: The final state of this tutorial is available [here](https://play.nativescript.org/?id=WhQU5V&v=4), and you can refer to it at any time if you get stuck.
+> **TIP**: The final state of this tutorial is available [here](https://play.nativescript.org/?id=WhQU5V&v=341), and you can refer to it at any time if you get stuck.
 
 > **TIP**: If you’re a video learner, the third-party site NativeScripting has a [free video course](https://nativescripting.com/course/nativescript-with-angular-getting-started-guide/) on getting started with NativeScript and Angular.
 
@@ -166,7 +166,7 @@ Let’s add one more layout example to your app and then discuss how all this wo
 
 > **WARNING**: Take special care to properly close all your UI elements and **not** use self-closing declarations.  `<Button text="Sign in"></Button>` = good.  `<Button text="Sign in" />` = bad.
 
-Let’s break down what’s happening in this example, starting with the `<StackLayout>` component. The `<StackLayout>` is the simplest NativeScript layout, as all it does is stack user interface components—vertically by default, and horizontally if you give the component a `orientation="horizontal"` attribute. In this example, the `<StackLayout>` is why the two `<TextField>` and `<Button>` components are verically stacked.
+Let’s break down what’s happening in this example, starting with the `<StackLayout>` component. The `<StackLayout>` is the simplest NativeScript layout, as all it does is stack user interface components—vertically by default, and horizontally if you give the component a `orientation="horizontal"` attribute. In this example, the `<StackLayout>` is why the two `<TextField>` and `<Button>` components are vertically stacked.
 
 The other layout component in this example is the `<FlexboxLayout>` control. With a `<FlexboxLayout>` you have the ability to align components using the same flexbox syntax you would use to align `<div>` in a web app. Flexbox is commonly used for vertical centering, and that’s exactly what you’re going to use it for in this tutorial.
 
@@ -272,7 +272,7 @@ ActionBar {
 
 > **TIP**:
 > * In NativeScript, the `app.css` is a global stylesheet. Any rules you apply in `app.css` apply to all components in your app.
-> * The `<ActionBar>` colors look a little odd on this page at the moment; don’t worry though, you’ll fix this display later in this tutorial. You can [learn more about using the `<ActionBar>` component its documentation page](https://docs.nativescript.org/angular/ui/action-bar).
+> * The `<ActionBar>` colors look a little odd on this page at the moment; don’t worry though, you’ll fix this display later in this tutorial. You can [learn more about using the `<ActionBar>` component on its documentation page](https://docs.nativescript.org/angular/ui/action-bar).
 
 * **b.** Open your `app/login/login.component.html` file and replace its contents with the following code, which adds a new `class` attribute to several of the UI components.
 

groceries-ng/2.md

@@ -2,7 +2,7 @@
 
 In this lesson you’ll learn how to add TypeScript logic to your app, how to create services that talk to backend endpoints, and how to architect an app to share code with Angular web apps. There’s a lot to cover, so let’s start by discussing how to handle events and data binding.
 
-> **TIP**: The final state of this tutorial is available [here](https://play.nativescript.org/?id=WhQU5V&v=4), and you can refer to it at any time if you get stuck.
+> **TIP**: The final state of this tutorial is available [here](https://play.nativescript.org/?id=WhQU5V&v=341), and you can refer to it at any time if you get stuck.
 
 ### Step 6. Handling events
 
@@ -36,7 +36,7 @@ The `(eventName)="functionName()"` syntax is part of [Angular’s event binding
 
 > **TIP**:
 > * You can find a list of events available for each UI element on its API documentation page. For instance, the [button element’s API documentation](http://docs.nativescript.org/api-reference/classes/_ui_button_.button.html) lists its `tap` event.
-> * The Angular docs have a helpful [cheat sheet](https://angular.io/docs/ts/latest/guide/cheatsheet.html) that includes the various syntaxes available when building templates. Don’t worry too much about knowing how all these work at the moment; you’ll the most common syntaxes as you complete this guide.
+> * The Angular docs have a helpful [cheat sheet](https://angular.io/docs/ts/latest/guide/cheatsheet.html) that includes the various syntaxes available when building templates. Don’t worry too much about knowing how all these work at the moment; you’ll use the most common syntaxes as you complete this guide.
 
 With the `tap` event in place, you now have a way of tying the UI elements in your template to your TypeScript code. To make a login page actually work though, we need to introduce one other way of connecting a template to code: data binding.
 
@@ -250,7 +250,7 @@ Instead of storing data on the `AppComponent` directly, you’re now using the `
   [(ngModel)]="user.password" class="input input-border"></TextField>
 ```
 
-* **e.** When your app updates, ensure the app still works as expects. You didn’t add any new functionality in this step, but you now have a modular structure to move forward with.
+* **e.** When your app updates, ensure the app still works as expected. You didn’t add any new functionality in this step, but you now have a modular structure to move forward with.
 
 <hr data-action="end" />
 
@@ -368,7 +368,7 @@ Let’s return to our example and make the registration process actually work.
 ``` JavaScript
 import { Injectable } from "@angular/core";
 import { Http, Headers, Response } from "@angular/http";
-import { Observable } from "rxjs";
+import { Observable, throwError } from "rxjs";
 import { catchError, map, tap } from "rxjs/operators";
 
 import { User } from "./user.model";
@@ -379,6 +379,10 @@ export class UserService {
     constructor(private http: Http) { }
 
     register(user: User) {
+        if (!user.email || !user.password) {
+            return throwError("Please provide both an email address and password.");
+        }
+
         return this.http.post(
             Config.apiUrl + "user/" + Config.appKey,
             JSON.stringify({
@@ -612,8 +616,6 @@ enableProdMode();
 platformNativeScriptDynamic().bootstrapModule(AppModule);
 ```
 
-* **h.** After your app updates on your device, ensure the login page continues to load as expected.
-
 > **NOTE**: You can read more about the `createFrameOnBootstrap` option [here](https://github.com/NativeScript/nativescript-angular/blob/master/CHANGELOG.md#nativescript-40-compatible-bootstrap-and-navigation), but for apps with routing you’re safe to ignore the option altogether.
 
 * **h.** Save your files.
@@ -685,7 +687,7 @@ export const navigatableComponents = [
 
 <hr data-action="end" />
 
-Angular now knows about the list page, but we still need to navigate the user to that page at the appropriate time. Your last task for this lesson is to allow to log into their accounts, and then to navigate them to the new list page after they have successfully authenticated.
+Angular now knows about the list page, but we still need to navigate the user to that page at the appropriate time. Your last task for this lesson is to allow users to log into their accounts, and then to navigate them to the new list page after they have successfully authenticated.
 
 <hr data-action="start" />
 
@@ -759,4 +761,4 @@ The power of NativeScript is you have the ability to use the same Angular conven
 
 > **TIP**: There are other ways to share code between native and web apps besides the `shared` folder convention Groceries uses. For an approach that places web and native code in the same codebase, that also provides some additional tooling around testing and internationalization, check out [one of the popular Angular NativeScript seed projects on GitHub](https://github.com/TeamMaestro/angular-native-seed).
 
-Now that we’ve discussed how NativeScript apps and Angular web apps are similar, let’s move onto how they’re different. When you’re building with NativeScript you have access to the entirety of iOS and Android, as well as the highly capable devices they run on—enabling you to build rich experiences that go above and beyond what the web can offer.
+Now that we’ve discussed how NativeScript apps and Angular web apps are similar, let’s move on to how they’re different. When you’re building with NativeScript you have access to the entirety of iOS and Android, as well as the highly capable devices they run on—enabling you to build rich experiences that go above and beyond what the web can offer.

groceries-ng/3.md

@@ -4,7 +4,7 @@ In this chapter you'll learn how to use several NativeScript features that let y
 
 In the process you’ll complete the Groceries app, and have a functioning list-based app that you can share with your friends. Let’s get started by looking at some things you can do to customize NativeScript UI components.
 
-> **TIP**: The final state of this tutorial is available [here](https://play.nativescript.org/?id=WhQU5V&v=4), and you can refer to it at any time if you get stuck.
+> **TIP**: The final state of this tutorial is available [here](https://play.nativescript.org/?id=WhQU5V&v=341), and you can refer to it at any time if you get stuck.
 
 ### Step 11. Customizing UI components
 
@@ -18,7 +18,7 @@ The source code for the NativeScript modules lives on GitHub in the [NativeScrip
 
 #### End Background
 
-In the next example you’re going to hide the `<ActionBar>` on the login page, but before doing that there are two piece of background knowledge you need to know.
+In the next example you’re going to hide the `<ActionBar>` on the login page, but before doing that there are two pieces of background knowledge you need to know.
 
 First, in NativeScript a single `<Page>` UI element wraps the `template` of every page-level Angular component. You don’t see this component, but it’s there, and it’s a UI component you can customize.
 
@@ -68,7 +68,7 @@ constructor(private router: Router, private userService: UserService, private pa
 
 * **f.** And finally, open your `app/login/login.component.html` file and **remove** the entire `<ActionBar>` component.
 
-* **f.** Save your files. When your app refreshes the bar that previously appeared at the top of the screen on Android should now be hidden.
+* **g.** Save your files. When your app refreshes the bar that previously appeared at the top of the screen on Android should now be hidden.
 
 ![](images/ios-15.png)
 ![](images/android-15.png)
@@ -375,7 +375,7 @@ export class ListComponent implements OnInit {
 }
 ```
 
-* **g.** Save your files.
+* **h.** Save your files.
 
 <hr data-action="end" />
 
@@ -445,7 +445,7 @@ Let’s break down how this layout works, starting with the outer structure of t
 ``` XML
 <GridLayout rows="auto, *">
   <GridLayout row="0" class="add-bar">...</GridLayout>
-  <ListView row="1">...</ListView>
+  <RadListView row="1">...</RadListView>
 </GridLayout>
 ```
 
@@ -653,7 +653,7 @@ delete(args: ListViewEventData) {
 }
 ```
 
- * **d.** Finally, open your `app/shared/grocery/grocery.service.ts` and add the following method to the `GroceryService` class, which hits this tutorial’s backend endpoint to delete grocery items.
+ * **e.** Finally, open your `app/shared/grocery/grocery.service.ts` and add the following method to the `GroceryService` class, which hits this tutorial’s backend endpoint to delete grocery items.
 
 ``` JavaScript
 delete(id: string) {
@@ -667,7 +667,7 @@ delete(id: string) {
 }
 ```
 
-* **e.** Save your files. When your device updates with these changes, you should now be able to swipe on individual items on your list and tap a button to delete them.
+* **f.** Save your files. When your device updates with these changes, you should now be able to swipe on individual items on your list and tap a button to delete them.
 
 ![](images/ios-20.gif)
 ![](images/android-20.gif)