Your Angular app¶
Now that you have the existing anuglarJS application working source code, it’s time to migrate to the angular latest version. The portal SDK application kick stated the migration process from angularJS to angular (v6) using the method angular ngUpgrade.
SDK angular application¶
To start migration, locate the current SDK angular application in sdk/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp
.
Setup Steps¶
Install Node.js and angularCLI. Refer https://angular.io/guide/quickstart
npm install in the directory sdk/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp
ng serve should bring you the welcome.html page in your local machine
firstpage.html¶
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. 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. 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
Boot the angularJS from angular application¶
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 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
Controller¶
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 Refer the usage.component.ts sdk/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/components/usage
Data Service¶
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. Refer the app-http-client.service.ts sdk/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/services
Template¶
All the HTML file should be scanned and replace with angular directives. ex: “ng-if” in angular “*ngIf” Refer the https://angular.io/guide/ajs-quick-reference to migrate angularJs to angular directives in the static html should be scanned for
Rollback to angularJs incase if there is blocker¶
TBD