AngularJS UI Router Full Tutorial

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

 

In this post I will explain in detail all you need to know to master the angular-ui router. We will learn the how the angular-ui router functions and and also create states.

So what is angular-ui router, well it is a routing framework specifically designed for AngularJS. Instead of dealing with views directly, angular-ui router organizes them in to states. It allows us to create more powerful nested views.

So what is a state, well it is just a way to define your view. An angular-ui router state  has the following characteristics

  • Each state must have a unique name.
  • A state must have a URL, this identifies the state but it does not refer to any physical content.
  • A state has a template or a templateUrl, this URL needs to point to physical content which is called a HTML partial.
  • States can also optionally have controller associated with them.

We start of by prepping our folder structure. It is as follows

 

First we start off by creating out index.html file and linking the angular and angular ui router scripts to it.So we get the following file

Notice the <ui-view> tag this is were all the states will be displayed.

 

Here is an example of a state that we will create in our app.js

Or you can specify the template as HTML rather than linking to is as a template. However using the above method is preferred as is keeps the the distinction between views and controllers.

 

So to work with the UI router first we need to inject $stateProvider and $urlRouterProvider to our config method. $stateProvider  allows us to configure different states while $urlRouterProvider allows us to configure a default route that will be used when the app loads as well as when the user navigates to a state that does not exists.

So the final code to configure states in the UI router is as follows in our app.js file

 

There are three ways in which we can navigate  to a state.

In the index.html we can either use the url of the state that we defined with the href attribute or we can use name of the state with the ui-sref attribute

the third way is the javascript way where you can programmatically navigate to a state as follows

When using the third way do not forget to inject $state into your controller.

 

GitHub Link: https://github.com/pointdeveloper/Angular-ui-router-tutorial

Direct Download: Click Here

 

Got A Question?

Hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

 

 

 

 

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)