Initializing Your App

back to top

Here we will show you how to build up you app config options and initialize your app. This will be the entry point for you ActiveJS application.

Your Config Options

back to top

These options are what helps ActiveJS understand the nature of your application. For example, the name of your app or the version. See below what options are avaliable to you.

const configOptions = {
  "name": "ActiveJS Project",
  "version": "1.0.0",
  "environment": "Development",
  "description": "This is a test application",
  "systemTheme": "project-theme",
  "systemStyles": [],
  "componentStyles": [],
  "interfaces": [],
  "store": {},
  // these debug options are here for info about
  // key points in the rendering life cycle
  "debugOptions": {
    ROUTER: false,
    BREADCRUMBS: false,
    ERRORS: false,
    VM_LOADED: false,
    VIEW_TEMPLATE_LOADED: false,
    VM_LOADED_ONTO_WINDOW: false,
    VM_BUILT: false,
    VM_IS_OBSERVED: false,
    VM_ACCESSED_UNDER_SCOPE: false,
    COMPUTED_PROPS_BUILT: false,
    MOUNTED_LIFECYCLE: false,
    RENDER_LIFECYCLE: false,
    RENDER_BEGIN: false,
    RENDER_COMPLETE: false,
    PASSED_PROPS_GENERATED: false,
    TIME_TO_RENDER: false,
    INLINE_ROUTES_CHECKED: false,
    DOM_MINIPULATION: false,
  },
  "routes": []
}

Defining A Route

back to top

A route is a page in with your application can go to. You need to define a route before your application can understand that it can go there. See below how to create a route.

const route = {
  path: '/yourPage', 
  handler: 'theSingleFileView.html', 
  animate: ''
};

Passing Data To A View

back to top

if you want your view to accept some parameters/props you would do so inside the 'path' property of your route. Using a colon after your path URL you can define a property that needs to be passed to you view.

const singleProp = {
  path: `/yourPage
            :customData`, 

  handler: 'theSingleFileView.html', 
  animate: ''
};

You can define multiple props to pass by just putting another colon after your first param.

const multiProp = {
  path: `/yourPage
            :customData1
            :cunstomData2`,

  handler: 'theSingleFileView.html', 
  animate: ''
};

If you want to default your property you are want to to accept to a custom value. Just put a '=' after the param name and then your value.

const defaultValProp = {
  path: `/yourPage
            :customData1=false
            :cunstomData2=Hello World`,

  handler: 'theSingleFileView.html', 
  animate: ''
};