angular-ui-router Getting started with angular-ui-router Hello World Example

Example

STEP 1: Installation

Before you can use Angular-UI Router you must include AngularJS itself in your project. For a detailed guide on that see this documentation.

You can download Angular-UI Router either from their GitHub-Page or from NuGet, NPM, Bower respectively.

After you have included the JS file in your webpage you can inject the ui.router module inside your application. In your script file you should have something like this:

var app = angular.module('app', []);

and now we are going to inject Angular-UI Router into our own application like this:

var app = angular.module('app', ['ui.router']);

Now Angular-UI Router will be loaded with our application. The following steps will explain the basics behind Angular-UI Router and will show some of the basic functionality.

---

STEP 2: Defining simple states

You can configure the UI-Router inside the Angular config function. Use the $stateProvider to define your states. In the following example, each state has a url, controller and a template.

(function() {
  var app = angular.module('app', ['ui.router']);
  
  app.config(['$stateProvider', function($stateProvider) {
      $stateProvider
        .state('home', {
          url: "/home",
          templateUrl: "home.html",
          controller: "homeCtrl"
        })
        .state('kitchen', {
          url: "/kitchen",
          templateUrl: "kitchen.html",
          controller: "kitchenCtrl"
        })
        .state('den', {
          url: "/denCtrl",
          templateUrl: "den.html",
          controller: "denCtrl"
        })
        .state('itemDetail', {
          url: "/items/:itemName",
          templateUrl: "item.html",
          controller: "itemDetailCtrl"
        })

    }])
})();

in your HTML, you will need the ui-view directive so that the state views can be populated inside.

<div ui-view></div>

---

STEP 3: Accessing states

There are all together 3 ways to access a state that is defined in $stateProvider.

1. Via ui-sref directive

You can access states inside your HTML, by using the ui-sref directive

<li ui-sref-active="active">
    <a ui-sref="kitchen">Go to the Kitchen</a>
</li>
<li ui-sref-active="active">
    <a ui-sref="den">Enter the den</a>
</li>
<li ui-sref-active="active">
    <a ui-sref="itemDetail({itemName:'keyboard'})">Key Board</a>
</li>

2. Via $state service in the controller

you can also navigate to other states inside your controller by using the $state provided to the controller with the .go method.

.controller(function($scope, $state) {
    // ...
    $scope.navigateTo = function(stateName) {
        $state.go(stateName); // i.e. $state.go('den'); 
    };
})

3. Via the url in browser

Assuming you have a state called kitchen defined like this:

$stateProvider
  .state("kitchen", {
    url: "/kitchenUrl",
    ...
  });

Then accessing appdomain/kitchenUrl as the URL in your browser will go to your kitchen state, assuming that there are no nested states and appdomain is the server that hosts your application.

If you are still confused, here is a fully working Plnkr