From 5bead046179e8e00c2cc4681992a6ffe24e4b97e Mon Sep 17 00:00:00 2001 From: wangyuerg Date: Fri, 8 Jan 2021 12:23:31 +0800 Subject: feat: embedding vue framwork in angular Signed-off-by: wangyuerg Change-Id: Ib065f7d3e1b7533161f880b5093ee9b829d2e46d Issue-ID: USECASEUI-444 --- usecaseui-portal/src/app/app-routing.module.ts | 10 ++- usecaseui-portal/src/app/app.component.html | 7 ++ usecaseui-portal/src/app/app.component.ts | 6 ++ usecaseui-portal/src/app/const/address.ts | 10 +++ usecaseui-portal/src/app/const/index.ts | 7 ++ usecaseui-portal/src/app/const/menu-item.ts | 90 ++++++++++++++++++++++++++ usecaseui-portal/src/app/guard/jump.guard.ts | 46 +++++++++++++ 7 files changed, 173 insertions(+), 3 deletions(-) create mode 100644 usecaseui-portal/src/app/const/address.ts create mode 100644 usecaseui-portal/src/app/const/index.ts create mode 100644 usecaseui-portal/src/app/const/menu-item.ts create mode 100644 usecaseui-portal/src/app/guard/jump.guard.ts (limited to 'usecaseui-portal/src/app') diff --git a/usecaseui-portal/src/app/app-routing.module.ts b/usecaseui-portal/src/app/app-routing.module.ts index 6a6d414d..4c1deb7d 100644 --- a/usecaseui-portal/src/app/app-routing.module.ts +++ b/usecaseui-portal/src/app/app-routing.module.ts @@ -15,6 +15,7 @@ */ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; +import { JumpGuard } from "./guard/jump.guard"; import { HomeComponent } from './views/home/home.component'; @@ -40,6 +41,8 @@ import { TestComponent } from './test/test.component'; // import { DetailsComponent } from './details/details.component'; +// all routes including other projects must be recorded here + const ServicesChildRoutes: Routes = [ { path: 'services-list', component: ServicesListComponent }, { path: 'onboard-vnf-vm', component: OnboardVnfVmComponent }, @@ -47,7 +50,7 @@ const ServicesChildRoutes: Routes = [ ] const routes: Routes = [ - { path: 'text', component: TestComponent }, + { path: 'test', component: TestComponent, canActivate:[JumpGuard]}, // this is used for vue, All non angular items must be added with routing guard to decide the jump { path: 'home', component: HomeComponent }, { path: 'management', component: ManagementComponent }, { path: 'fcaps', component: FcapsComponent }, @@ -65,11 +68,12 @@ const routes: Routes = [ { path: 'performance/performance-vm', component: PerformanceVmComponent }, { path: 'network/ccvpn-network', component: CcvpnNetworkComponent }, { path: 'network/mdons-network', component: MdonsNetworkComponent }, - { path: '**', redirectTo: 'home', pathMatch: 'full' } + { path: '**', redirectTo: 'home', pathMatch: 'full' }, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], - exports: [RouterModule] + exports: [RouterModule], + providers:[JumpGuard] }) export class AppRoutingModule { } diff --git a/usecaseui-portal/src/app/app.component.html b/usecaseui-portal/src/app/app.component.html index c8240a7d..4ed44ea6 100644 --- a/usecaseui-portal/src/app/app.component.html +++ b/usecaseui-portal/src/app/app.component.html @@ -122,6 +122,13 @@ +
  • + + + {{"i18nTextDefine_Test" | translate}} + + +
    • diff --git a/usecaseui-portal/src/app/app.component.ts b/usecaseui-portal/src/app/app.component.ts index 7abec444..c839519c 100644 --- a/usecaseui-portal/src/app/app.component.ts +++ b/usecaseui-portal/src/app/app.component.ts @@ -19,6 +19,7 @@ import { ServiceListService } from "./core/services/serviceList.service"; import { HomesService } from "./core/services/homes.service"; import { NavigationEnd, Router } from '@angular/router'; import 'rxjs/add/operator/map'; +import { menu } from './const/index' @Component({ selector: 'app-root', @@ -28,10 +29,15 @@ import 'rxjs/add/operator/map'; export class AppComponent { public url: string = 'home'; + menuItem: Object = menu.MENU_ITEM; + constructor(private translate: TranslateService, private myhttp: HomesService, private router: Router, ) { this.currentLanguageGet(); this.getUrl(); } + ngOnInit () { + console.log(this.menuItem) + } // Get the current routing path getUrl() { diff --git a/usecaseui-portal/src/app/const/address.ts b/usecaseui-portal/src/app/const/address.ts new file mode 100644 index 00000000..cedeb73a --- /dev/null +++ b/usecaseui-portal/src/app/const/address.ts @@ -0,0 +1,10 @@ +enum ADDRESS { + vue = 'http://localhost:8089/', + Angular = 'http://localhost:4200/' +} +const SELF_SOURCE: string = 'Angular' + +export default { + ADDRESS, + SELF_SOURCE, +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/const/index.ts b/usecaseui-portal/src/app/const/index.ts new file mode 100644 index 00000000..ad09de2c --- /dev/null +++ b/usecaseui-portal/src/app/const/index.ts @@ -0,0 +1,7 @@ +import address from './address' +import menu from './menu-item' + +export { + address, + menu +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/const/menu-item.ts b/usecaseui-portal/src/app/const/menu-item.ts new file mode 100644 index 00000000..70933a85 --- /dev/null +++ b/usecaseui-portal/src/app/const/menu-item.ts @@ -0,0 +1,90 @@ +// route table + +const MENU_ITEM = [ + { + name: '0', // Angular + title: 'Home', + children: [], + path: '/home', + source: 'Angular' + }, + { + name: '1', // Angular + title: 'Customer', + children: [], + path: '/management', + source: 'Angular' + }, + { + name: '2', // Angular + title: 'Services', + children: [ + { + name: '2-0', + title: 'Lifecycle Management', + path: '/services/services-list', + source: 'Angular' + }, + { + name: '2-1', + title: 'SOTN Eline', + path: '/services/sotn-management', + source: 'Angular' + }, + { + name: '2-2', + title: '5G Sclicing Management', + path: '/services/slicing-management', + source: 'Angular' + }, + ] + }, + { + name: '3', // Angular + title: 'Package Managemeny', + children: [], + path: '/onboard-vnf-vm', + source: 'Angular' + }, + { + name: '4', // Angular + title: 'Network Topology', + children: [ + { + name: '4-0', + title: 'CCVPN network', + path: '/network/ccvpn-network', + source: 'Angular' + }, + { + name: '4-1', + title: 'MDONS Network', + path: '/network/mdons-network', + source: 'Angular' + } + ] + }, + { + name: '5', // Angular + title: 'Monitor', + children: [ + { + name: '5-0', + title: '5G Slicing', + path: '/fcaps/5gslicing', + source: 'Angular' + } + ] + }, + { + name: '6', // vue + title: 'Test', + children: [], + path: '/test', + source: 'vue' + } +] + +export default { + MENU_ITEM +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/guard/jump.guard.ts b/usecaseui-portal/src/app/guard/jump.guard.ts new file mode 100644 index 00000000..27892115 --- /dev/null +++ b/usecaseui-portal/src/app/guard/jump.guard.ts @@ -0,0 +1,46 @@ +import {CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot} from "@angular/router"; +import { Route } from "@angular/compiler/src/core"; +import { menu, address } from "../const/index" +import { environment } from '../../environments/environment' + + +export class JumpGuard implements CanActivate { + + canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { + let next: boolean = true + console.log(state.url) + const target: string = state.url + console.log('不在该框架') + // looking for the source of this path + const menuList: Array = menu.MENU_ITEM + let source: string = null + for (let item of menuList) { + if (item.path === target) { + source = item.source + } else { + for (let val of item.children) { // If you can't find it, recurse deeper + if (val.path === target) { + source = val.source + } + } + } + } + if (source === null) { // The source of the path is not recorded in the routing table + console.log('The source of the path is not recorded in the routing table') + } else { + const targetServer = address.ADDRESS[source] + console.log(targetServer, environment) + let newUrl: string = '' + if (environment.production === false) { + newUrl = `${targetServer}#${target}` + console.log(newUrl) + } else { // production + let baseUrl = window.location.href.split('#')[0] + newUrl = `${baseUrl}${source}/#${target}` + } + next = false + window.location.href = newUrl + } + return next; + } +} \ No newline at end of file -- cgit 1.2.3-korg