Multiple layouts

This is en example where a whole application is handled by the componentManager eaven though there are multiple views being used.

Take a look at components.js to see component the setup for this example.

conditions:2components:7instances:8

var componentSettings = {
  conditions: {
    authenticated: function ()  {
      return (window.localStorage.getItem('isAuthenticated') === 'true');
    },
    'not-authenticated': function () {
      return !(window.localStorage.getItem('isAuthenticated') === 'true');
    }
  },
  components: [
    {
      id: 'app-navigation',
      src: 'app.components.NavigationComponent',
      conditions: 'authenticated'
    },
    {
      id: 'app-login',
      src: 'app.components.LoginComponent',
      conditions: 'not-authenticated'
    },
    {
      id: 'app-marquee',
      src: 'app.components.MarqueeComponent'
    },
    {
      id: 'app-profile-overview',
      src: 'app.components.ProfileOverViewComponent'
    },
    {
      id: 'app-social-media',
      src: 'app.components.SocialMediaComponent'
    },
    {
      id: 'app-list',
      src: 'app.components.ListComponent'
    },
    {
      id: 'app-banner',
      src: 'http://www.bido.com/Banner?s=20060&a=0000'
    },

  ],


  targets: {
    header: [
      {
        id: 'navigation',
        componentId: 'app-navigation',
        urlPattern: 'global'
      }
    ],

    main: [
      {
        id: 'app-login',
        componentId: 'app-login',
        urlPattern: ['', 'landing', 'logout']
      },
      {
        id: 'app-list',
        componentId: 'app-list',
        urlPattern: ['home', 'event/*path']
      }
    ],

   'below-header': [
      {
        id: 'app-marquee',
        componentId: 'app-marquee',
        urlPattern: ['home', 'event/*path']
      }
   ],

   'sidebar-top': [
      {
        id: 'app-profile-overview',
        componentId: 'app-profile-overview',
        urlPattern: ['home', 'event/*path']
      }
   ],

   'sidebar-bottom': [
      {
        id: 'app-social-media',
        componentId: 'app-social-media',
        urlPattern: ['home', 'event/*path']
      },
      {
        id: 'app-banner',
        componentId: 'app-banner',
        urlPattern: ['home', 'event/*path'],
        args: {
          iframeAttributes: {
            scrolling: 'no',
            border: 0,
            frameborder: 0,
            width: 200,
            height: 60,
            style: 'margin: 20px auto; display: block;'
          }
        }
      }
   ],

   'right-column': [
      {
        id: 'app-list-two',
        componentId: 'app-list',
        urlPattern: 'event/:id',
        reInstantiate: true
      }
   ]
  }
}