Updated guidance to the latest version of SPFx (SharePoint#920)

* Updated tutorial on building web parts using AngularJS

* Updated tutorial on migrating AngularJS applications

* Updated localization guidance

Author: waldekmastykarz

docs/images/ng-migration-angular-ngofficeuifabric-config.png

@@ -1,15 +1,15 @@
 ---
-title: Build SharePoint Framework client-side web parts with Angular v1.x
+title: Build SharePoint Framework client-side web parts with AngularJS
 ms.date: 09/25/2017
 ms.prod: sharepoint
 ---
 
 
-# Build SharePoint Framework client-side web parts with Angular v1.x
+# Build SharePoint Framework client-side web parts with AngularJS
 
-If you are familiar with Angular, you can also use this extremely popular framework to build client-side web parts. Thanks to its modularity, it can be used for anything ranging from complex multi-view Single Page Applications to smaller components such as web parts. Many organizations have been using Angular for building SharePoint solutions in the past. This article shows how to use Angular v1.x to build a SharePoint Framework client-side web part and have it styled using [Office UI Fabric](http://dev.office.com/fabric). During this tutorial you will build a simple web part that manages to do items.
+If you are familiar with AngularJS, you can also use this extremely popular framework to build client-side web parts. Thanks to its modularity, it can be used for anything ranging from complex multi-view Single Page Applications to smaller components such as web parts. Many organizations have been using AngularJS for building SharePoint solutions in the past. This article shows how to use AngularJS to build a SharePoint Framework client-side web part and have it styled using [Office UI Fabric](http://dev.office.com/fabric). During this tutorial you will build a simple web part that manages to do items.
 
-![SharePoint Framework client-side web part built using Angular displayed in SharePoint workbench](../../../images/ng-intro-hide-finished-tasks.png)
+![SharePoint Framework client-side web part built using AngularJS displayed in SharePoint workbench](../../../images/ng-intro-hide-finished-tasks.png)
 
 The source of the working web part is available on GitHub at [https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/angular-todo](https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/angular-todo).
 
@@ -48,30 +48,30 @@ Once the scaffolding completes, open your project folder in your code editor. In
 
 ![SharePoint Framework project open in Visual Studio Code](../../../images/ng-intro-project-visual-studio-code.png)
 
-## Add Angular
+## Add AngularJS
 
-In this tutorial you will load Angular from CDN. To do that, in the code editor, open the **config/config.json** file and in the **externals** property add the following lines:
+In this tutorial you will load AngularJS from CDN. To do that, in the code editor, open the **config/config.json** file and in the **externals** property add the following lines:
 
 ```json
 "angular": {
-  "path": "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js",
+  "path": "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js",
   "globalName": "angular"
 }
 ```
 
-![Angular added to the config.json file](../../../images/ng-intro-angular-config.png)
+![AngularJS added to the config.json file](../../../images/ng-intro-angular-config.png)
 
-## Add Angular typings for TypeScript
+## Add AngularJS typings for TypeScript
 
-Because you will be referencing Angular in your web part's code, you also need Angular typings for TypeScript. To install them run in the command line:
+Because you will be referencing AngularJS in your web part's code, you also need AngularJS typings for TypeScript. To install them run in the command line:
 
 ```sh
 npm install @types/angular --save-dev
 ```
 
-## Implement Angular application
+## Implement AngularJS application
 
-With all prerequisites in place you can start implementing the sample Angular application. Because it will consist of a few files, create a separate folder for it called **app**.
+With all prerequisites in place you can start implementing the sample AngularJS application. Because it will consist of a few files, create a separate folder for it called **app**.
 
 ![The app folder highlighted in Visual Studio Code](../../../images/ng-intro-app-folder.png)
 
@@ -307,7 +307,7 @@ export default class HomeController {
 
 ![The HomeController.ts file opened in Visual Studio Code](../../../images/ng-intro-homecontroller.png)
 
-You start by loading the previously implemented data service. The controller needs it in order to get the list of items and modify items as requested by the user. Using Angular's dependency injection the service is injected into the controller. The controller implements a number of functions that are exposed to the view model and will be called from the template. Using these functions users will be able to add new items, mark items as finished, to do, or delete items.
+You start by loading the previously implemented data service. The controller needs it in order to get the list of items and modify items as requested by the user. Using AngularJS's dependency injection the service is injected into the controller. The controller implements a number of functions that are exposed to the view model and will be called from the template. Using these functions users will be able to add new items, mark items as finished, to do, or delete items.
 
 ### Implement the main module
 
@@ -327,13 +327,13 @@ todoapp
 
 ![The app-module.ts file opened in Visual Studio Code](../../../images/ng-intro-app-module.png)
 
-You start by referencing Angular and by loading previously implemented controller and data service. Next, you define the module for your application. Finally, you register the controller and data service with your application.
+You start by referencing AngularJS and by loading previously implemented controller and data service. Next, you define the module for your application. Finally, you register the controller and data service with your application.
 
-Now you've built an Angular application for your web part. In the following steps you will register the Angular application with the web part and make it configurable using web part properties.
+Now you've built an AngularJS application for your web part. In the following steps you will register the AngularJS application with the web part and make it configurable using web part properties.
 
-## Register Angular application with web part
+## Register AngularJS application with web part
 
-Next step is to add Angular application to the web part. In the code editor open the **ToDoWebPart.ts** file.
+Next step is to add AngularJS application to the web part. In the code editor open the **ToDoWebPart.ts** file.
 
 Just before the class declaration, add the following lines:
 
@@ -344,15 +344,15 @@ import './app/app-module';
 
 ![Import statements in the ToDoWebPart.ts file highlighted in Visual Studio Code](../../../images/ng-intro-web-part-import-angular.png)
 
-This allows us to load a reference to Angular and your application, both of which you need to bootstrap your Angular application.
+This allows us to load a reference to AngularJS and your application, both of which you need to bootstrap your AngularJS application.
 
 Change the web part's **render** function to:
 
 ```ts
 public render(): void {
   if (this.renderedOnce === false) {
     this.domElement.innerHTML = `
-<div class="${styles.toDoWebPart}">
+<div class="${styles.toDo}">
   <div data-ng-controller="HomeController as vm">
     <div class="${styles.loading}" ng-show="vm.isLoading">
       <div class="${styles.spinner}">
@@ -398,12 +398,12 @@ public render(): void {
 
 ![Web part's render function in Visual Studio Code](../../../images/ng-intro-web-part-render-angular.png)
 
-The code first assigns the template of your application directly to the web part's DOM element. On the root element you specify the name of the controller that will handle events and data binding in the template. Then, you bootstrap your application using the **todoapp** name you used previously when declaring the main module. Using the **renderedOnce** web part property you ensure that your Angular application is bootstrapped only once. Without it, if you changed one of the web part's properties, the **render** function would be invoked again bootstrapping the Angular application again, which would lead to an error.
+The code first assigns the template of your application directly to the web part's DOM element. On the root element you specify the name of the controller that will handle events and data binding in the template. Then, you bootstrap your application using the **todoapp** name you used previously when declaring the main module. Using the **renderedOnce** web part property you ensure that your AngularJS application is bootstrapped only once. Without it, if you changed one of the web part's properties, the **render** function would be invoked again bootstrapping the AngularJS application again, which would lead to an error.
 
 You also need to implement CSS styles that you are using the template. In the code editor open the **ToDo.module.scss** file and replace its contents with:
 
 ```css
-.toDoWebPart {
+.toDo {
   .loading {
     margin: 0 auto;
     width: 6em;
@@ -674,7 +674,7 @@ Start by adding configuration property in the web part manifest. In the code edi
 
 Next, update the signature of the web part properties interface.
 
-In the code editor open the **IToDoWebPartProps.ts** file and replace its contents with the following:
+In the code editor open the **ToDoWebPart.ts** file and update the `IToDoWebPartProps` interface to the following:
 
 ```ts
 export interface IToDoWebPartProps {
@@ -729,14 +729,14 @@ protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
 To fix the missing string references you first need to change the signature of your strings. In the code editor open the **loc/mystrings.d.ts** file and change its contents to:
 
 ```ts
-declare interface IToDoStrings {
+declare interface IToDoWebPartStrings {
   PropertyPaneDescription: string;
-  ViewGroupName: string;
+  BasicGroupName: string;
   HideFinishedTasksFieldLabel: string;
 }
 
-declare module 'toDoStrings' {
-  const strings: IToDoStrings;
+declare module 'ToDoWebPartStrings' {
+  const strings: IToDoWebPartStrings;
   export = strings;
 }
 ```
@@ -767,13 +767,13 @@ In the web part property pane you should see a toggle button for your newly defi
 
 ![Toggle button displayed on the web part property pane](../../../images/ng-intro-property-pane-toggle-browser.png)
 
-At this point clicking the toggle button doesn't have any effect on your web part as it hasn't been connected to Angular. You will do that in the next step.
+At this point clicking the toggle button doesn't have any effect on your web part as it hasn't been connected to AngularJS. You will do that in the next step.
 
-### Make the Angular application configurable using web part properties
+### Make the AngularJS application configurable using web part properties
 
-In the previous step you defined a web part property that allows users to choose whether to show completed tasks or not. Next you will pass the value selected by the user into the Angular application so that it can load items accordingly.
+In the previous step you defined a web part property that allows users to choose whether to show completed tasks or not. Next you will pass the value selected by the user into the AngularJS application so that it can load items accordingly.
 
-#### Broadcast Angular event on web part property change
+#### Broadcast AngularJS event on web part property change
 
 In the code editor open the **ToDoWebPart.ts** file. Right before web part's constructor add the following line:
 
@@ -789,7 +789,7 @@ Next, change the web part's **render** function to the following:
 public render(): void {
   if (this.renderedOnce === false) {
     this.domElement.innerHTML = `
-<div class="${styles.toDoWebPart}">
+<div class="${styles.toDo}">
   <div data-ng-controller="HomeController as vm">
     <div class="${styles.loading}" ng-show="vm.isLoading">
       <div class="${styles.spinner}">
@@ -837,9 +837,9 @@ public render(): void {
 }
 ```
 
-In the above code sample, every time the web part property is changed, it will broadcast an Angular event to which the Angular application will subscribe it. When event is received by the Angular application, it will then handle that accordingly.
+In the above code sample, every time the web part property is changed, it will broadcast an AngularJS event to which the AngularJS application will subscribe it. When event is received by the AngularJS application, it will then handle that accordingly.
 
-#### Subscribe to web part property change event in Angular
+#### Subscribe to web part property change event in AngularJS
 
 In the code editor open the **app/HomeController.ts** file. Extend the constructor as follows:
 
@@ -856,7 +856,7 @@ constructor(private dataService: IDataService, private $window: angular.IWindowS
 
 ![Constructor definition in the HomeController.ts file highlighted in Visual Studio Code](../../../images/ng-intro-homecontroller-event.png)
 
-To verify that the Angular application is working as expected and correctly responds to property changed, in the command line run:
+To verify that the AngularJS application is working as expected and correctly responds to property changed, in the command line run:
 
 ```sh
 gulp serve