This is the first in a series of blog posts about the AngularJS UI Router.
Part of the AngularJS library is a router, named ngRoute. The ngRoute library allowed you to show different views of your Angular application based on the URL in the browser. This works great for simple applications; however it has some distinct limitations. Only a single view can be displayed per URL and nested views are not supported. Applications often have multiple views, such as a header, footer, and some main content. Main content is often split up into multiple sections. The ngRoute directive can only bring us so far.
The AngularUI team has created an alternate router, uiRouter, to addresses some of the limitations of the ngRoute. The ngRoute directive approaches an application as a collection of URLs, each one displaying a different view. The uiRouter looks at an application as a collection of states, and it allows multiple, nested states. This is a series of blog posts about using the uiRouter within an AngularJS application.
Switching Between Two States
The first sample will show you how to switch between two separate states.
Create the Application Skeleton
First, import the Angular library and the ui-router library:
I reference both libraries from hosted CDN instead of copying them locally as part of my application. Next, create an Angular app in a script block:
Configure the UI Router
A single configuration argument is passed into the Angular module, ui.router. This tells the Angular Module--routerTestApp--to load the uiRouter code and make it available to the application. This sample will create two UI States, state1 and state2. The router configuration is done in an Angular config block.
templateUrl : 'states/state1.html'
templateUrl : 'states/state2.html'
A service named $stateProvider is passed into the config block using the Angular dependency injection syntax. The $stateProvider service is part of the UI-router and is analogous to the $routeProvider used as part of ngRoute. The $stateProvider is used to define the two states of the application. In this case, a URL is defined. This is the value that will display in the URL when the state is displayed. A templateURL is used to refer to an HTML page that contains the view code that will be displayed when the state is active.
Create the HTML
First, we'll create the two HTML templates. The first is state1.html:
<a ui-sref="state2">Go to State 2</a>
This template is very simple. It includes a header with simple text stating 'State 1'. The anchor link is a bit more interesting. It includes an Angular directive named uiSref. This directive tells the uiRouter library to load a new state and change the URL whenever that link is clicked. The value of the uiSref directive is the name of the state that should be loaded. If the state doesn't exist, the anchor is immediately disabled and does not present the user with a link.
The state2.html template is almost identical to state1.html:
<a ui-sref="state1">Go to State 1</a>
The header says 'State 2' instead of 'State 1'. The link goes back to state1 instead of state2. The main index needs some HTML to make this work too. First, add the ngApp directive to the body tag:
Then, add the ui-view:
The uiView directive tells the uiRouter directive to put the view here.
Test the App
Load the app in a browser, be sure to specify the current state with a URL like '/Index.html#/state1'. You should see the first state:
Click the link to open state 2. State2 should open:
The URL should change and state2 is displayed on the screen.
The Plunker is a bit tricky to work with given the current codebase, because no default state is specified for the initial load of the application. Without a default state, neither state1 or state2 will be displayed unless you specify the state in the URL when you load the application.
The next article in this series will address that.