Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Using The UI-Router To Navigate In Ionic Framework

TwitterFacebookRedditLinkedInHacker News

Being that Ionic Framework relies heavily on the UI-Router for navigation, I thought I would do a write-up on how to properly use it.

We use the UI-Router to navigate between view states in our application. By view states, I mean screens composed as template files. If you’re looking for information on navigating in Ionic 2, visit my other post on the subject as it doesn’t use the UI-Router like Ionic Framework 1 does.

Let’s start by creating a new Android and iOS Ionic project:

ionic start IonicProject blank
cd IonicProject
ionic platform add android
ionic platform add ios

Note that if you’re not using a Mac, you cannot add or build for iOS.

The UI-Router operates on application states, where each state might represent a new screen in your application.

Take the following code:

var example = angular.module('starter', ['ionic'])
    .run(function($ionicPlatform) {
        $ionicPlatform.ready(function() {
            // Stuff in here
        });
    })
    .config(function($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('login', {
                url: '/login',
                templateUrl: 'templates/login.html',
                controller: 'LoginController'
            })
            .state('users', {
                url: '/users',
                templateUrl: 'templates/users.html',
                controller: 'UserController'
            })
            .state('user', {
                url: "/users/:userId",
                templateUrl: "templates/user.html",
                controller: "UserController"
            });
        $urlRouterProvider.otherwise('/users');
    });

In the above code we are going to pay attention to the .config() method. There are three states which represent three screens in our app. We have the following screens:

  • A login screen
  • A screen for showing all users. This is the default screen when the application loads
  • A screen for showing a specific user

Now lets break down what each part of the state represents.

Object KeyDescription
urlThe URL route that can be accessed via href properties
templateUrlThe path to the view template HTML file
controllerThe controller to be used in this view

Take the following chunk of code:

.state('user', {
    url: "/users/:userId",
    templateUrl: "templates/user.html",
    controller: "UserController"
})

The template we will use is found in www/templates/user.html in our project. Notice that in our URL we have :userId. This represents a parameter that will be passed into our controller.

example.controller("UserController", function($scope, $stateParams) {

    // $stateParams.userId;

});

So how might all this look from a UI perspective? Let’s start with our index.html file.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>
        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="js/app.js"></script>
        <script src="cordova.js"></script>
    </head>
    <body ng-app="digitalocean">
        <ion-side-menus>
            <ion-side-menu-content>
                <ion-nav-bar class="bar-positive"></ion-nav-bar>
                <ion-nav-view></ion-nav-view>
            </ion-side-menu-content>
        </ion-side-menus>
    </body>
</html>

The <ion-nav-view> is where the template will be injected via your UI-Router. So it is now time to create our templates:

<ion-view title="Users">
    <ion-content>
        <div class="list">
            <a ng-repeat="user in users" class="item" href="#/users/{{user.id}}">
                {{user.name}}
            </a>
        </div>
    </ion-content>
</ion-view>

The above code is suitable for our www/templates/users.html file. You’ll notice clicking on a list item will pass the user id as one of the parameters.

All your other templates will follow a similar design.

If you’d like to read more on the topic of application states and the UI-Router, you can view the official GitHub documentation.

Nic Raboy

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.

Search

Follow Us

Support This Site