blob: cc967121bd8436ce8191f5cddddf9147358b922e (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
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 :code:`sdk/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp`.
Setup Steps
-----------
1. Install Node.js and angularCLI. Refer https://angular.io/guide/quickstart
2. npm install in the directory `sdk/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp`
3. 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
Migrationg existing page to the SDK navigatio
---------------------------------------------
TBD
Adding your new page to the SDK navigation
------------------------------------------
TBD
Rollback to angularJs incase if there is blocker
------------------------------------------------
TBD
|
