Adding tutorial for Angular upgrade

Issue-ID: PORTAL-356
Change-Id: I3251916a18537d6abedcada139286ee97a4dc7ad
Signed-off-by: Manoop Talasila <talasila@research.att.com>

diff --git a/docs/tutorials/portal-sdk/index.rst b/docs/tutorials/portal-sdk/index.rst
index 4d20ffd..d12257d 100644 (file)
--- a/docs/tutorials/portal-sdk/index.rst
+++ b/docs/tutorials/portal-sdk/index.rst
@@ -16,6 +16,7 @@ Building ONAP Portal SDK Web Applications
        creating
        setting-up-db
        your-angularjs-app
+       your-angular-app
        pulling-db-data
        google-charts
        dynamic-content

diff --git a/docs/tutorials/portal-sdk/your-angular-app.rst b/docs/tutorials/portal-sdk/your-angular-app.rst
new file mode 100644 (file)
index 0000000..cc96712
--- /dev/null
+++ b/docs/tutorials/portal-sdk/your-angular-app.rst
@@ -0,0 +1,55 @@
+Your Angular app\r
+=========================\r
+Now that you have the existing anuglarJS application working source code, it's time to migrate to the angular latest version.\r
+The portal SDK application kick stated the migration process from angularJS to angular (v6) using the method angular ngUpgrade.\r
+\r
+SDK angular application\r
+-----------------------\r
+To start migration, locate the current SDK angular application in :code:`sdk/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp`.\r
+\r
+Setup Steps\r
+-----------\r
+1. Install Node.js and angularCLI. Refer https://angular.io/guide/quickstart\r
+2. npm install in the directory `sdk/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp`\r
+3. ng serve should bring you the welcome.html page in your local machine\r
+\r
+firstpage.html\r
+--------------\r
+1. template: the existing welcome.html in `sdk/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models` is the landing page which will be migrated first.\r
+The content of this file will be copied to angular landling page (index.html) in `sdk/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src`. But in SDK the default page name index.html renamed to welcome.html, refer the file angular.json in ngapp.\r
+2. style: the existing css content will be copied to the styles.css in `sdk/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src`\r
+\r
+Boot the angularJS from angular application\r
+---------------------------------------------------\r
+Each of the menu module (ex: admin, report) can separate angularJS application, so scan the entire *.html files in angularJS source for "ng-app" directive and remove them since the angularJS will be booted from angular application\r
+Refer the https://angular.io/guide/ajs-quick-reference to bootstrap steps. ex: SDK ngapp `this.upgrade.bootstrap(document.body, ['abs']);` in app.component.ts\r
+\r
+Controller\r
+-------------\r
+The controller controller.js will be migrated to Type Script. When you create a angular component, by default the controller.ts will be created. So need to copy the content of existing controller.js function to controller.ts\r
+Refer the usage.component.ts `sdk/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/components/usage`\r
+\r
+Data Service\r
+------------\r
+The existing data service data-service.js will be migrated to Type Script. When you create a angular service, the data-service.ts will be created.\r
+Refer the app-http-client.service.ts `sdk/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/services`\r
+\r
+\r
+Template\r
+-------------\r
+All the HTML file should be scanned and replace with angular directives. ex: "ng-if" in angular "*ngIf"\r
+Refer the https://angular.io/guide/ajs-quick-reference to migrate angularJs to angular directives in the static html should be scanned for\r
+\r
+\r
+Migrationg existing page to the SDK navigatio\r
+---------------------------------------------\r
+TBD\r
+\r
+\r
+Adding your new page to the SDK navigation\r
+------------------------------------------\r
+TBD\r
+\r
+Rollback to angularJs incase if there is blocker\r
+------------------------------------------------\r
+TBD\r