Sunday, October 18, 2015

Three way to activate state in UI-Router Angular.js

Before some time I have written a blog post about routing - Routing with UI-Router and Angular.js I have got few questions from my reader in email. One of question is to how we can activate state of UI-Router as UI-Router works with state instead of URLs. In this blog post we are going to explain, different ways to activate state in UI-Router.

There are three ways of activating state in UI-Router.

  1. Call $State.go
  2. UI-sref directive as link
  3. Navigate to URL associated with State
We are going to learn about this three ways in details.

Call $State.Go:


It is a one of convenient method of changing state, Returns a promise representing the state of transition. It calls underlying $State.Transition method internally but automatically sets option location: true , inheritance:true, relative: $state.$current and notify:true. This allows you to set easily update parameters with passing arguments. You can find more information about that at following location.

https://github.com/angular-ui/ui-router/wiki/Quick-Reference#stategoto--toparams--options

UI-sref directive as link:


We have used this method already in previous example. It is a directive that bind a link to state. If the state has an associated URL, the directive automatically generate and update the href attribute via $State.href() method. Clicking on link will trigger a state transition with parameters.
You can use it in following way.
  • ui-sref='stateName' - Navigate to state, no params. 'stateName' can be any valid absolute or relative state, following the same syntax rules as $state.go()
  • ui-sref='stateName({param: value, param: value})' - Navigate to state, with params.
You an find more information about this at following location.

https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref

Navigate to the URL associated with State:


As we have seen in previous blog post, most of the state will have URL associated with it. Now when user access the index.html/contactus, it will activate contactus state and load the template associated with this state. You can also pass the parameters with that. Following is documentation for the same.

https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref

Hope you like it, Stay tuned for more!!.
Share:

0 comments:

Post a Comment

Your feedback is very important to me. Please provide your feedback via putting comments.

Search This Blog
Loading...
About Me
My Photo

Full Stack Developer,Blogger,Microsoft Mvp, Mentor, Life long learner, 10+ Years of Experience for JavaScript, web and Microsoft technologies. ASP.NET MVC,Web Forms,C#,AngularJs,Golang
Mvp profile
Subscribe to my blog

Enter your email address:

Follow us on facebook
Blog Archive
Total Pageviews