docs/tutorials/portal-sdk/your-angular-app.rst

   1 Your Angular app\r
   2 =========================\r
   3 Now that you have the existing anuglarJS application working source code, it's time to migrate to the angular latest version.\r
   4 The portal SDK application kick stated the migration process from angularJS to angular (v6) using the method angular ngUpgrade.\r
   5 \r
   6 SDK angular application\r
   7 -----------------------\r
   8 To start migration, locate the current SDK angular application in :code:`sdk/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp`.\r
   9 \r
  10 Setup Steps\r
  11 -----------\r
  12 1. Install Node.js and angularCLI. Refer https://angular.io/guide/quickstart\r
  13 2. npm install in the directory `sdk/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp`\r
  14 3. ng serve should bring you the welcome.html page in your local machine\r
  15 \r
  16 firstpage.html\r
  17 --------------\r
  18 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
  19 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
  20 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
  21 \r
  22 Boot the angularJS from angular application\r
  23 ---------------------------------------------------\r
  24 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
  25 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
  26 \r
  27 Controller\r
  28 -------------\r
  29 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
  30 Refer the usage.component.ts `sdk/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/components/usage`\r
  31 \r
  32 Data Service\r
  33 ------------\r
  34 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
  35 Refer the app-http-client.service.ts `sdk/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/services`\r
  36 \r
  37 \r
  38 Template\r
  39 -------------\r
  40 All the HTML file should be scanned and replace with angular directives. ex: "ng-if" in angular "*ngIf"\r
  41 Refer the https://angular.io/guide/ajs-quick-reference to migrate angularJs to angular directives in the static html should be scanned for\r
  42 \r
  43 \r
  44 Migrationg existing page to the SDK navigatio\r
  45 ---------------------------------------------\r
  46 TBD\r
  47 \r
  48 \r
  49 Adding your new page to the SDK navigation\r
  50 ------------------------------------------\r
  51 TBD\r
  52 \r
  53 Rollback to angularJs incase if there is blocker\r
  54 ------------------------------------------------\r
  55 TBD\r