gillesgw / dna-router

An advance Angular's ui-router style router provider for Polymer.

dna-router

Note: on-auth and on-no-auth attributes changed to with-auth and with-no-auth due to on-* conflicts with current update of Polymer. Thanks to jom

ui-router is an advance Angular's ui-router style all html router provider for Polymer. It has auth status which enables user to show different views for same state. Inspired by ui-router: https://github.com/angular-ui/ui-router

Install using bower:

bower install dna-router

Update: Added Vulcanize support. Use: Add 'manual-load' attribute in 'dna-config' tag and then import the vulcanized templates in your project.

Download starter kit at : https://github.com/Saquib764/starter-kit-dna-router

Import all element:

<link rel="import" href="./bower_components/dna-router/dna.html">

1. Define states and routes:

   <dna-new-state state='home' route='/home'></dna-new-state>
   <dna-new-state state='user' route='/user/:id/'></dna-new-state>

2. Defining views. You can have multiple views for a single state.

   <dna-view
   	state='home'
   	element='home-template'></dna-view>

   By default, dna-view converts element name into camel case and imports file named so in base directory. This file must contain home-template element. Example, above imports \homeTemplate.html.

   All params is available in home-template polymer properties params.

   To import file from different directory:

   <dna-view
   	state='home'
   	template='\templates'
   	element='home-template'></dna-view>

   NOTE: Set global template path using dna-config.

   If states requires authentication.

   <dna-view
   	state='home'
   	with-auth
   	element='auth-home-template'
   	else-element='home-template'></dna-view>

   If user is not authenticated, home-template will be shown. To redirect to a different state. Example, login.

   <dna-view
   	state='home'
   	with-auth
   	element='auth-home-template'
   	else-state='login'></dna-view>

   Show some page only to 'unauthenticated' users

   <dna-view
   	state='home'
   	with-no-auth
   	element='login-template'
   	else-state='dashboard'></dna-view>

3. Configure dna-router:

   <dna-config
   	id='conf'
   	home='some state'
   	auth  // authorise
   	template='\templates'> </dna-config>

   By default home is state named home and auth is false.

   To authosrise on fly using javascript:

   var conf = document.querySelector('#conf');
   // Sending login context to views.
   // Access it using '$state' global variable.
   conf.context = {
   	author: 'Saquib Alam',
   	message: 'Star me :)'
   };
   conf.auth = true

4. S-ref element:

   • With goto and params property

      <a is='s-ref' goto='["users"]' params='{"user_id":"56"}'>To state users</a>

   You can use a Polymer variable in your params : html <a is='s-ref' goto='["users"]' params='{"user_id":"{{userId}}"}'>To state users</a>

   • With goto property only (backward compatibility)

     goto takes an array as input. First is state name and second item is object with params. Its similar to ui-router s-ref.

      <a is='s-ref' goto='["users",{"user_id":"56"}]'>To state users</a>

     However you can't use Polymer variables that way.

   Use $state.params.user_id to access params.

5. dna-many-view element. This element is visible only if any dna-view inside this element or any of it's state is active.

   <dna-many-view state='abc xyz'>
   	This Example
   	<dna-view state='home' ....></dna-view>
   </dna-many-view>

   In above example, many view is visible for states abc, xyz and home. For any other state none of its content is visible. "This Example" is not visible for some state, i.e login.

6. Go to state programmatically

   You can use DNA.go(state, params); in your elements.

Executing a function on page load

dna-router provides a DNA object.

DNA.run = function(){
	// Do your stuff
}

Enjoy :)