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">
-
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>
-
Defining views. You can have multiple views for a single state.
<dna-view state='home' element='home-template'></dna-view>
By default,
dna-view
convertselement
name into camel case and imports file named so in base directory. This file must containhome-template
element. Example, above imports\homeTemplate.html
.All params is available in
home-template
polymer propertiesparams
.To import file from different directory:
<dna-view state='home' template='\templates' element='home-template'></dna-view>
NOTE:
Set global template path usingdna-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>
-
Configure
dna-router
:<dna-config id='conf' home='some state' auth // authorise template='\templates'> </dna-config>
By default
home
is state namedhome
andauth
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
-
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 toui-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. - With goto and params property
-
dna-many-view
element. This element is visible only if anydna-view
inside this element or any of it'sstate
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.elogin
. -
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 :)