Update angular-in-dotnet-core.jade

rexebin · Nov 19, 2016 · Nov 20, 2016 · Nov 20, 2016 · Nov 20, 2016 · Nov 20, 2016
commit 29ac24c86a3c1c64aefc872cb151ba9c5c62ade6
diff --git a/public/docs/ts/latest/cookbook/angular-in-dotnet-core.jade b/public/docs/ts/latest/cookbook/angular-in-dotnet-core.jade
@@ -1,11 +1,11 @@
 include ../_util-fns
 
 :marked
-  This cookbook describes how to build an Angular app inside the MVC architecture in a .NET Core Web application. It does not explain how Angular or .NET Core work. However it will provide all the code snippets required. Therefore you will be able to follow through this cookbook even if you know nothing about Angular or .NET Core yet.
+  This cookbook describes how to build an Angular app inside the MVC architecture in a .NET Core Web application. It does not explain how Angular or .NET Core works. However it will provide all the code snippets required. Therefore you will be able to follow through this cookbook even if you are currently not familiar with Angular or .NET Core.
 
   It is recommended that you follow this cookbook step by step and experience the challenges in the process.
 
-  .NET Core supports cross platforms. You can develop .NET Core application on Windows, MacOS or Linux and you can choose any tools. This cookbook will use Visual Studio 2015 on Windows.
+  .NET Core supports cross platforms. You can develop .NET Core applications on Windows, macOS or Linux. This cookbook will use Visual Studio 2015 on Windows.
 
 a#toc
 :marked
@@ -25,10 +25,10 @@ a#prerequisite
   If you do not have them in your system, download and install the following items:
 
   1. [Visual studio 2015 Update 3](https://go.microsoft.com/fwlink/?LinkId=691129)
-  1. [.NET Core Tools for visual studio 2015](https://go.microsoft.com/fwlink/?LinkId=691978)
+  1. [.NET Core Tools for Vvisual Studio 2015](https://go.microsoft.com/fwlink/?LinkId=691978)
   1. [.Net Core SDK](https://go.microsoft.com/fwlink/?LinkID=835014)
-  1. [Typescript 2 for visual studio 2015](http://download.microsoft.com/download/6/D/8/6D8381B0-03C1-4BD2-AE65-30FF0A4C62DA/TS2.0.3-TS-release20-nightly-20160921.1/TypeScript_Dev14Full.exe)
-  1. [Node.js Tools for visual studio 2015](https://aka.ms/getntvs) (optional)
+  1. [Typescript 2 for Visual Studio 2015](http://download.microsoft.com/download/6/D/8/6D8381B0-03C1-4BD2-AE65-30FF0A4C62DA/TS2.0.3-TS-release20-nightly-20160921.1/TypeScript_Dev14Full.exe)
+  1. [Node.js Tools for Visual Studio 2015](https://aka.ms/getntvs) (optional)
 
 a#create-dotnet-core-application
 .l-main-section
@@ -40,9 +40,9 @@ a#create-dotnet-core-application
   1. Select `File` | `New` | `Project` from the menu
   1. In the `New Project` dialog, select `Templates` | `Visual C#` | `.NET Core`
   1. Select `ASP.NET Core Web Application (.NET Core)` template.
-  1. Enter a name (for example `AngularWithDotnetCore`) for the project and Click OK.
+  1. Enter a name (for example `AngularWithDotnetCore`) for the project and click OK.
   1. Select `Web Application` and click OK.
-  1. Wait for visual studio to restore packages.
+  1. Wait for Visual Studio to restore packages.
 
 a#create-angular-app
 .l-main-section
@@ -61,7 +61,7 @@ a#create-angular-app
    tsconfig.json`
 )(format='.')
 :marked
-  When Visual Studio sees `package.json` file, it will install all specified npm packages automatically. You can also right click `package.json` file and select `Restore Packages`.
+  When `package.json` is created, the Visual Studio will automatically install all specified npm packages. You can also right click the `package.json` file and select `Restore Packages`.
 
   ### Create your Angular app
 
@@ -84,7 +84,7 @@ a#create-angular-app
 :marked
   ### Edit `Views/shared/_layout.cshtml` to host the Angular app
 
-  For a quick start, open `Views/shared/_layout.cshtml` file and insert Angular app’s libraries and `systemjs.config.js` script into the `<head>` section:
+  For a quick start, open `Views/shared/_layout.cshtml` and insert Angular app’s libraries and `systemjs.config.js` script into the `<head>` section:
 
 +makeExample('angular-in-dotnet-core/ts/lib.html', null, 'Views/shared/_layout.cshtml')(format='.')
 
@@ -102,19 +102,19 @@ a#create-angular-app
 
   These 404 errors indicate that the browser could not find files in `app` and `node_modules` folders. But we have an `app` folder and a `node_modules` folder in the root directory, why the browser can not find it?
 
-  It is because .NET Core only exposes the `wwwroot` folder to browsers. All other contents in the project are private by default. It's by design so that you know exactly which part of the project is public. If the app asks for `/app` in a request, .NET Core looks for a physical `app` folder in the `wwwroot` folder.
+  It is because .NET Core only exposes the `wwwroot` folder to browsers. All other contents in the project are private by default. It is by design so that you know exactly which part of the project is public. If the app asks for `/app` in a request, .NET Core looks for a physical `app` folder in the `wwwroot` folder.
 
-  In this case, the browser is searching for physical `app` and `node_modules` folders in `wwwroot` folder. You do not want to move `app` or `node_modules` folder into the `wwwroot` folder, because:
+  In this case, the browser is searching for physical `app` and `node_modules` folders in `wwwroot` folder. You do not want to move the `app` or the `node_modules` folder into the `wwwroot` folder, because:
 
-  1. You would have to work exclusively inside the `wwwroot` folder for the angular app.
+  1. You would have to work exclusively inside the `wwwroot` folder for the Angular app.
 
   1. You would have to manage npm packages outside of Visual Studio 2015. Because Visual Studio’s npm package manager only works when there is a `package.json` file in the root directory and it will only install npm packages into a `node_modules` folder in root directory.
 
   Fortunately, you can redirect the incoming requests to any chosen physical folders within the project.
 
   #### Redirect request path to physical folder
 
-  Open your `startup.cs` file and insert the following code under line `app.UseStaticFiles();`.
+  Open your `startup.cs` file and insert the following code under the line `app.UseStaticFiles();`.
 
 +makeExample('angular-in-dotnet-core/ts/startup.ts', 'redirect', 'startup.cs')(format='.')
 
@@ -133,7 +133,7 @@ a#move-app
 :marked
   ## Move Angular app to its own MVC Controller and View
 
-  Now, you have a working Angular app. However, By bootstrapping the app inside `Views/Shared/_layout.cshtml`, you will find that every MVC page bootstraps the app. Let's move your Angular app into its own MVC Controller and View.
+  Now, you have a working Angular app. However, by bootstrapping the app inside `Views/Shared/_layout.cshtml`, you will find that every MVC page bootstraps the app. Let's move your Angular app into its own MVC Controller and View.
 
   ### Create MVC Controller and View for the Angular app
 
@@ -145,7 +145,7 @@ a#move-app
     1. In the `Add New Item` dialog, choose `ASP.NET` on the left and then `MVC Controller Class` on the right.
     1. Enter `AppController.cs` in the name box below and click `Add` button.
 
-    Angular app will use the generated `Index` action of `AppController` class. Therefore you do not need to change anything in the `AppController` class.
+    Angular app will use the generated `Index` action of the `AppController` class. Therefore you do not need to change anything in the `AppController` class.
 
   1. Create a View for the `Index` action
 
@@ -154,7 +154,7 @@ a#move-app
     1. In the `Add New Item` dialog, choose `ASP.NET` on the left and then `MVC View page` on the right
     1. Leave the default name as `Index.cshtml` and click `Add` button.
 
-    Now let's populate above generated `Views/App/Index.cshtml`:
+    Now let's populate the above generated `Views/App/Index.cshtml`:
 
     Open `Views/Shared/_layout.cshtml`, cut and paste the following code into `Views/App/Index.cshtml`
       ```
@@ -186,7 +186,7 @@ a#move-app
 
   If your Angular app has only one page, this would be the end of this cookbook. However, a typical Angular app has many pages and modules. It would also lazy load modules via Angular router.
 
-  In the following sections, you will replace the above basic Angular app with the live example in [Router & Navigation](../guide/router.html) chapter and make it work inside .NET Core environment.
+  In the following sections, we will replace the above basic Angular app with the live example in [Router & Navigation](../guide/router.html) chapter and make it work inside the .NET Core environment.
 
 a#angular-app-with-routes
 .l-main-section
@@ -199,15 +199,15 @@ a#angular-app-with-routes
 
   1. Unzip the downloaded zip file to a folder and do the following:
     * Open the extracted folder, you will find an `app` folder. Open it and copy everything to clipboard.
-    * In Visual Studio, right click the `app` folder in the root directory and select `Open folder in File Explorer`. Then paste the above copied files. When promoted, select `Replace the files in the destination`.
+    * In Visual Studio, right click the `app` folder in the root directory and select `Open folder in File Explorer`. Then paste the above copied files. When prompted, select `Replace the files in the destination`.
 
     Your `app` folder in the .NET Core project should contain everything in the downloaded `app` folder and `systemjs.config.js` file created previously.
 
   1. Repeat the above steps, copy `styles.css` from the extracted folder to `wwwroot/css` folder in your .NET Core project.
 
   ### Add Styles
 
-  To style your Angular app the same way as the live example, open `Views/Shared/_layout.cshtml` and insert the following `<link>` tag next to `<title>` tag in the `<head>` section:
+  To style your Angular app the same way as the live example, open `Views/Shared/_layout.cshtml` and insert the following `<link>` tag next to the `<title>` tag in the `<head>` section:
 
 +makeExample('angular-in-dotnet-core/ts/styles.html', null, 'Views/Shared/_layout.cshtml')(format='.')
 
@@ -216,15 +216,15 @@ a#angular-app-with-routes
 
   `Base href` is required by Angular Router. Because the Angular app is served by `AppController` and it uses .NET Core's `App` route, you need to set the `base href` to `/app/`. Open `Views/Shared/_layout.cshtml` and insert `<base href="/app/"/>` inside the `<head>` section as the first child.
 
-  If you build and run the application and navigate to Angular app, you will find that your angular app is broken and there is an error in the console: `GET http://localhost:55771/app/app/main.js 404 (Not Found)`. Note the double `/app/app`. It is because `base href` is set to `/app/` and as a result all JavaScript requests are prefixed with `/app/`.
+  If you build and run the application and navigate to Angular app, you will find that your Angular app is broken and there is an error in the console: `GET http://localhost:55771/app/app/main.js 404 (Not Found)`. Note the double `/app/app`. It is because `base href` is set to `/app/` and as a result all JavaScript requests are prefixed with `/app/`.
 
-  To fix the above error, open `/app/Systemjs.config.js` file, find `main: './app/main.js'` and change it to `main: './main.js'`.
+  To fix the above error, open `/app/Systemjs.config.js`, find `main: './app/main.js'` and change it to `main: './main.js'`.
 
   Now, if you build and run the project and navigate to the Angular app, you will see that the app is bootstrapped but stopped due to errors. In the console tab, Angular is complaining that it `Cannot match any routes. URL Segment: 'App'`.
 
   ### .NET Core's Pascal Case Urls
 
-  .NET Core parses urls in Pascale case by default. As you saw above, it did not work well with JavaScript framework like Angular.
+  .NET Core parses urls in Pascal case by default. As you have seen above, it does not work well with JavaScript framework like Angular.
 
   Fortunately, you can configure .NET Core to parse urls in lower case.
 
@@ -236,11 +236,11 @@ a#angular-app-with-routes
 
 +makeExample('angular-in-dotnet-core/ts/startup.ts', 'lowercaseurls-using', 'startup.cs')(format='.')
 :marked
-  Now rebuild and run your application, the above error goes away. However only `Heroes` and `login` links work as intended. The lazy loaded modules `Crisis Center` and `Admin` are broken. In the console tab, the browser reports: `GET http://localhost:55771/crisis-center/crisis-center.module 404 (Not Found)`. Note the absence of `/app/` in the path.
+  Now rebuild and run your application and you will find the above error goes away. However only `Heroes` and `login` links work as intended. The lazy loaded modules `Crisis Center` and `Admin` are broken. In the console tab, the browser reports: `GET http://localhost:55771/crisis-center/crisis-center.module 404 (Not Found)`. Note the absence of `/app/` in the path.
 
   ### Fix Lazy Loaded Modules
 
-  The problem is that Angular could not find the lazy loaded modules because their paths were wrong. Let's check out `app-routing.module.ts` file in `app` folder, you can see the following:
+  The problem is that Angular could not find the lazy loaded modules because their paths were wrong. Let's check out the `app-routing.module.ts` file in the `app` folder. You can see the following:
 
 +makeExample('angular-in-dotnet-core/ts/app/app-routing.module.ts', 'absolute', 'app/app-routing.module.ts')(format='.')
 :marked
@@ -252,13 +252,13 @@ a#angular-app-with-routes
 
 +makeExample('angular-in-dotnet-core/ts/app/app-routing.module.ts', 'relative', 'app/app-routing.module.ts')(format='.')
 :marked
-  Now, build and run, you will see that the Angular app is running without errors, until you refresh the browser.
+  Now, build and run. You will see that the Angular app is running without errors, until you refresh the browser.
 
   ## Configure .NET Core routes for Angular app
 
-  The Angular app has deep links, such as `/app/heroes` and `/app/heroes/11`. When you navigate inside the Angular app, it does not send any requests to the .NET Core server. The Angular Router handles the routing on its own. However, when you refresh the browser with deep links, the browser send request to .NET Core server and expect .NET Core to response.
+  The Angular app has deep links, such as `/app/heroes` and `/app/heroes/11`. When you navigate inside the Angular app, it does not send any requests to the .NET Core server. The Angular Router handles routing on its own. However, when you refresh the browser with deep links, the browser send requests to .NET Core server and expect .NET Core to respond.
 
-  When .NET Core receive a request url, it tries to match with its route configuration. The current route configuration in the `startup.cs` file is as follow:
+  When .NET Core receives a request url, it tries to match with its route configuration. The current route configuration in the `startup.cs` file is as follow:
 
 +makeExample('angular-in-dotnet-core/ts/startup.ts', 'route-default', 'startup.cs')(format='.')
 
@@ -272,16 +272,16 @@ a#angular-app-with-routes
 :marked
   Note the second `MapRoute`, it will ask .NET Core to execute `AppController`'s `Index` action for all urls starting with `/app`.
 
-  If you build and run the application and navigate to the Angular app, then refresh the browser, you will find that the Angular app is now working as intended.
+  If you build and run the application，navigate to the Angular app, and refresh the browser, you will find that the Angular app is now working as intended.
 
 a#summary
 .l-main-section
 :marked
   ## Summary
 
-  Angular app can live inside the MVC architecture in a larger .NET Core web application. This cookbook has overcome the following challenges:
+  Angular app can live inside the MVC architecture in a larger .NET Core web application. This cookbook has overcomed the following challenges:
 
-  1. .NET Core only exposes `wwwroot` to the client. This cookbook teaches you how to configure .NET Core to redirect request paths to physical paths in the root directory. It enables visual studio to manage npm packages for you. It also allows you to use any folder inside the project for your Angular app.
+  1. .NET Core only exposes `wwwroot` to the client. This cookbook teaches you how to configure .NET Core to redirect request paths to physical paths in the root directory. It enables the Visual Studio to manage npm packages for you. It also allows you to use any folder inside the project for your Angular app.
 
   1. .NET Core uses Pascal case to parse urls, which does not play well with Angular Router. You can configure .NET Core to parse lower case urls.