EvanRoutingService¶

Source	routing

Angular 5 routing wrapper service.

Be aware: We are doing fancy stuff to handle dynamic routing over cross Angular applications. We cant use the Ionic router for the app view routing, because its to restricted. Ionic router is only used for internal services like alerts, toasts and so on.

This service overwrite some original Router functions to replace the normale angular “routing” call with an window.location.hash = “…”, so each router change, in each angular instance, gets triggered.

getRoute¶

initializedModule.getRoute(path, parent);

Lookup the current route configuration or it’s parent, to find an route where the path exists.

Parameters¶

path - string: Route path to find
parent - any: A route configuration where the child should be searched.

Returns¶

any: The loaded route

Example¶

.. code-block:: typescript

// current route configuration // [ // { // path: ‘’, // component: DAppListComponent, // data: { // state: ‘dapplist’ // } // }, // { // path: ‘dapp-add’, // component: DAppAddComponent, // data: { // state: ‘dappadd’, // navigateBack : ‘..’ // } // }, // ]

const route = routingService.getRoute(‘dapp-add’) // will return route instance of second children ‘dapp-add’ instance

getRouteFromUrl¶

routingService.getRouteFromUrl(routeUrl);

Takes an routeUrl, removes #, /#, #/ and returns the original hash value without query params

Parameters¶

routeUrl - string: RouteUrl like the following : #/dapp/dapp1?param1=est

Returns¶

Will transform #/dapp/dapp1?param1=est to dapp/dapps

Promise returns void: resolved when done

Example¶

routingService.getRouteFromUrl('#/dapp/dapp1?param1=est')
routingService.getRouteFromUrl(window.location.hash);

activeRouteName¶

routingService.activeRouteName();

Watches the current router url and splits out the last hash param that represents the module id.

Don’t forget to unsubscribe on component destroy.

Returns¶

Observable returns string: an Observable that resolves url updates.

Example¶

// https://dashboard.test.evan.network/#/taskboard.evan will return => taskboard
const subscription = routingService
  .activeRouteName()
  .subscribe(async (value) => {
    console.log(value);
  });

ngOnDestroy() {
  subscription();
}

activeRootRouteName¶

routingService.activeRootRouteName();

Watches the current router url and splits out the last hash param that represents the module id.

Don’t forget to unsubscribe on component destroy.

Returns¶

Observable returns string: an Observable that resolves url updates.

Example¶

// https://dashboard.test.evan.network/#/dashboard.evan/favorites.evan will return => dashboard
const subscription = this.routing
  .activeRouteName()
  .subscribe(async (value) => {
    console.log(value);
  });

ngOnDestroy() {
  subscription();
}

getActiveChild¶

routingService.getActiveChild(route, deep, childPath);

Returns the deepest activedRoute of the current parent activatedRoute. This one will be the active route. Used to consume route data.

Parameters¶

route - ActivatedRoute: The activatedRoute or one of it’s children
deep - number: Recursion deep, cancel after 20 recursion to prevent dead lock
childPath - string: Check for an additional childPath to return innerst active route

Returns¶

ActivatedRoute: deepest ActivatedRoute

Example¶

console.log(this.getActiveChild(this.activeRoute).params)

setNavigateBackStatus¶

routingService.setNavigateBackStatus();

Search for the current active route and set the current navigateBackStatus. This is used by “canNavigateBack” and “goBack” function to handle display of back button or to go to a specific route.

Have a look at |source route_configuration|_.

Example¶

routingService.setNavigateBackStatus();

getActiveRoot¶

routingService.getActiveRoot();

Returns the current root component.

return this.activeRoute.firstChild;

Returns¶

Promise returns void: resolved when done

Example¶

Navigate relative to the current route to an other sub dapp.

routingService.getActiveRoot();

getDAppNameFromRoutePath¶

routingService.getDAppNameFromRoutePath(routePath);

Get the DApp name from an route

Parameters¶

routePath - string: route path to parse the dapp from

Returns¶

string: dappName

Example¶

routingService.getDAppNameFromRoutePath('#/dashboard.evan/favorites.evan') // => 'favorites'

getDAppNameFromCurrRoutePath¶

routingService.getDAppNameFromCurrRoutePath();

Get the DApp name from an route

Returns¶

string: dapp name from current route

Example¶

// current url: '#/dashboard.evan/favorites.evan'

routingService.getDAppNameFromCurrRoutePath() // => 'favorites'

canNavigateBack¶

routingService.canNavigateBack();

Returns an Oberservable that updates triggers when a route was changed and returns if a back navigation should be available.

Don’t forget to unsubscribe on component destroy. Have a look at |source route_configuration|_.

Returns¶

Observable returns boolean: True if able to navigate back, False otherwise.

Example¶

// https://dashboard.test.evan.network/#/dashboard.evan/favorites.evan will return => dashboard
const subscription = routingService
  .canNavigateBack()
  .subscribe(async (value) => {
    console.log(value);
  });

ngOnDestroy() {
  subscription();
}

goBack¶

initializedModule.goBack(arguments);

Goes back. If this.navigateBackStatus contains an route string, navigate to this route else trigger location.back().

Have a look at |source route_configuration|_.

Example¶

routingService.goBack();

goToProfile¶

routingService.goToProfile();

Navigates to the dappprofile relative to the active dashboard.

=> e.g. https://dashboard.test.evan.network/#/dashboard.evan/profile.evan

Example¶

routingService.goToProfile();

goToQueue¶

routingService.goToQueue();

Navigates to the dapp queue relative to the active dashboard

=> e.g. https://dashboard.test.evan.network/#/dashboard.evan/queue.evan

Example¶

routingService.goToQueue();

goToMails¶

routingService.goToMails();

Navigates to the dapp mailbox relative to the active dashboard

=> e.g. https://dashboard.test.evan.network/#/dashboard.evan/mailbox.evan

Example¶

routingService.goToMails();

goToLogging¶

routingService.goToLogging();

Navigates to the dapp logging relative to the active dashboard.

=> e.g. https://dashboard.test.evan.network/#/dashboard.evan/logging.evan

Example¶

routingService.goToLogging();

goToDashboard¶

routingService.goToDashboard();

Navigates to the dapp dashboard relative to the active dashboard

=> e.g. https://dashboard.test.evan.network/#/dashboard.evan

Example¶

routingService.goToDashboard();

navigate¶

initializedModule.navigate(arguments);

Use special “this.router.navigate” properties

Parameters¶

route - string: route name to navigate to
relativeToRoot - boolean: navigate relative to current parent route or use only the route string
queryParams - any (optional): query params that should be applied to the navigated routes(?param1=…&param2=…)

Example¶

this.routing.navigate(`./${ dapp.ensAddress }`, true);

openENS¶

routingService.openENS(ensAddress, relativeTo, queryParams);

Open an ENS path

Parameters¶

ensAddress - string: ENS Address to open
relativeTo - string: get the route with the specific name and use the ensAddress relative to the specified route
queryParams - any: query params that should be applied to the navigated routes(?param1=…&param2=…)

Example¶

let queryParams = this.getOnboardingQueryParams();

this.routingService.openENS(
  this.definitions.getEvanENSAddress('onboarding'),
  '',
  queryParams
);

getDataParam¶

routingService.getDataParam(param);

Get a parameter value from the current active route.

Parameters¶

param - string: Parameter to get from the current route state.

Returns¶

any: data parameter value

Example¶

// current route configuration
// [
//   {
//     path: '',
//     component: DAppListComponent,
//     data: {
//       state: 'dapplist'
//     }
//   }
// ]

routingService.getDataParam('state') // => dapplist

getHashParam¶

getHashParam.getHashParam(param);

Returns an parameter from the current route or it’s children

Parameters¶

param - any: param key

Returns¶

any: hash parameter value

Example¶

// {
//   path: ':address',
//   component: TaskDetailComponent,
//   data: {
//     state: 'task-detail',
//     navigateBack : true,
//     reload: [ 'contracts' ]
//   },
// }

// on url "https://dashboard.test.evan.network/#/taskboard.evan/0x280a9e533b6EF9e6B96aa35DEBA35A1A012B1e1c"

routingService.getHashParam('address') // => '0x280a9e533b6EF9e6B96aa35DEBA35A1A012B1e1c'

getQueryparams¶

routingService.getQueryparams();

Return all query params as object.

Returns¶

any: deep copy of the current query params

Example¶

// on url https://dashboard.test.evan.network/#/dashboard.evan?param1=qwe&param2=asd

routingService.getQueryParams() // => { param1: 'qwe', param2: 'asd' }

getRouteConfigParam¶

routingSErvice.getRouteConfigParam(param);

Get a data parameter value from the current active route. (similar to getDataParam, but only for getActiveRoot())

Parameters¶

string - param: Parameter to get from the current route state.

Returns¶

any: The root route configuration parameter.

Example¶

Have a look at getDataParam.

reloadCurrentContent¶

routingService.reloadCurrentContent();

Triggers an loading of the current split pane content. (navigates to evan-reload route)

Example¶

routingService.reloadCurrentContent();

windowLocationReload¶

routingService.windowLocationReload();

window.location.reload(); wrapper

Example¶

routingService.windowLocationReload();

subscribeRouteChange¶

routingService.subscribeRouteChange(callback);

Register for an route change event.

Don’t forget to unsubscribe on component destroy.

Parameters¶

callback - Function: Function to call if an route change ends

Returns¶

Function: function to unsubscribe

Example¶

const subscription = routingService.subscribeRouteChange(() => console.log('navigated!'))

ngOnDestroy() {
  subscription();
}

onceNavigated¶

routingService.onceNavigated(arguments);

Watching one time for a route change.

Returns¶

Observable returns void: called on after the first route change

Example¶

routingService
  .onceNavigated()
  subscribe(() => console.log('navigated'));

getActiveRootEns¶

routingService.getActiveRootEns();

Return the current active route ENS (if no one is opened, it returns routing.defaultDAppENS)

Returns¶

https://…/dashboard.evan/dapp1.evan/dapp2.evan => dashboard.evan

string: The active root ens.

Example¶

routing.getActiveRootEns();

getContractAddress¶

.getContractAddress(arguments);

return this.getHashParam(‘address’) or Split the current url hash and return the latest path.

Returns¶

string: The stand alone contract identifier.

Example¶

// https://dashboard.test.evan.network/#/taskboard.evan/0x280a9e533b6EF9e6B96aa35DEBA35A1A012B1e1c
// https://dashboard.test.evan.network/#/taskboard.evan/0x280a9e533b6EF9e6B96aa35DEBA35A1A012B1e1c/edit-contract
getContractAddress() // will return 0x280a9e533b6EF9e6B96aa35DEBA35A1A012B1e1c, even when the ":address" parameter within the path is not defined

forceUrlNavigation¶

routingService.forceUrlNavigation(hash);

Uses an hash value and replaces the current hash with the new one. But it will use href = to force parent dapp router handling, if we only set the hash, the navigation will stuck within the current child DApp.

e.g. dashboard/favorites goes back to dashboard with empty history stack but nothing will happen because the favorites capured the navigation event and stops bubbling

Parameters¶

hash - string: new window.location.hash value

Example¶

this.forceUrlNavigation('dashboard.evan');