Hello World

Definitions of components and inctances of components are parsed and then filtered on the componentManager. Whenever the refresh method is called any instance that matches the passed filters will be instantiated and added to the target, all instances that doesn't match the passed filter be disposed.

In this example the hello-world-component is set to match the urlPattern "add-hello-world" and the router will refresh the componentManager with the current url on any url change. Click the links below to see the result, and take a look at the js files to see the setup.

var componentSettings = {
  components: [{
    id: 'hello-world-component',
    src: 'ExampleComponent' // ExampleComponent.js in the examples directory - exposed on window
  }],
  targets: {
    main: [
      {
        id: 'hello-world-instance',
        componentId: 'hello-world-component',
        urlPattern: 'add-hello-world', // #add-hello-world
        args: {
          id: 'hello-world-instance',
          urlPattern: 'add-hello-world'
          background: '#F6FFBA'
        }
      }
    ]
  }
}