v0.8

navig

object navig → file: core/lib/navig.js

The navigation library to change app URL. It's a container for current and previous URL state.

Instance

Instance created in the lib/navig.js file so no need to make instance with "new" keyword.

Properties

Methods

GETTERS

getPreviousURI() :string

Get the previous URI. The uri is path + query string, without hash, for example: /page1.html?q=12

getCurrentURI() :string

Get the current URI. The uri is path + query string, without hash, for example: /page1.html?q=12

NAVIGATION

goto(url, state, title) :void

Navigates to a new view by changing URL and controller.
- The URL in the browser address bar is changed with window.history.pushState(state, title, url). More at ...Web/API/History/pushState
- The pushstate event emitted in the eventEmitter. This event will change controller.

ARGUMENTS:
• url :string - absolute URL path, for example: '/customer/product/25'
• state :string - The state data. Fetch it with event.detail.
• title :string - Not used in major browsers.

goblind(url, state, title) :void

Change URL but without changing the controller and view.
This is useful when app needs to change parameter in the URL without changing anything else. For example: /product/egg → /product/milk

ARGUMENTS:
• url :string - absolute URL path, for example: '/customer/product/25'
• state :string - The state data. Fetch it with event.detail.
• title :string - Not used in major browsers.

forward() :void

Go forward like forward browser button is clicked.

back() :void

Go back like back browser button is clicked.

reload() :void

Reloads the page like refresh button is clicked.

EVENT LISTENERS

onPushstate(listener) :void

Listen for the pushstate event, for example when dd-href is clicked or when goto() is used.

ARGUMENTS:
• listener :Function - callback function which will be executed on 'pushstate' event ,for example pevent => { ... } where pevent is pushstate or popstate event

onPopstate(listener) :void

Listen for the popstate event, for example when BACK,FORWARD browser button is clicked or when back(),forward() is used.

ARGUMENTS:
• listener :Function - callback function which will be executed on 'pushstate' event ,for example pevent => { ... } where pevent is pushstate or popstate event

onUrlChange(listener) :void

Listen for the URL change i.e. 'popstate' or 'pushstate' event. The URL change includes any URL change even hash part modification.

ARGUMENTS:
• listener :Function - callback function which will be executed on 'pushstate' event ,for example pevent => { ... } where pevent is pushstate or popstate event

onHashchange(listener) :void

Listen for the hashchange event. This happens when window.location.hash is changed. For example /product#image --> /product#description

ARGUMENTS:
• listener :Function - callback function which will be executed on 'pushstate' event ,for example pevent => { ... } where pevent is pushstate or popstate event

Example

        const { Controller, corelib } = require('@mikosoft/dodo');

        class MyCtrl extends Controller {
          async runGOTO() {
            corelib.navig.goto('/admin/products/list');
          }
        }
          

Stackblitz Examples

• navig - test navig library methods