Why is my simple Angular ui.router not working?


I have the simplest ui.router example which doesn’t seem to work.

See below:

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

routerApp.config(function($stateProvider, $urlRouterProvider) {   

    //$urlRouterProvider.otherwise('/home'); When I uncomment this, it loads /home without a problem but why is it going to the "otherwise" condition?

    .state('home', {
        url: '/home',
        templateUrl: 'main.html'

My index file.

<!DOCTYPE html>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
    <script src="/angular/angularApp.js"></script>

<body ng-app="mainApp">

<div class="container">
    <div ui-view></div>


I have been going on and on into this but I think I now have tunnel vision. Someone please help me out here. Thanks in advance!


I do not see any issue except you having the same controller for both, can you check the example below

app.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider.state('top', {
      url: "",
      templateUrl: "header.html",
      controller: 'topCtrl'
    .state('top.side', {
      url: '/app',
      templateUrl: "side.html",
      controller: 'filterCtrl'
    .state('top.side.list', {
      url: "/items?query",
      templateUrl: "items.html",
      controller: 'listCtrl'
    .state('top.side.item', {
      url: "/:id",
      templateUrl: "item.html",
      controller: 'itemCtrl'


Answered By – Sajeetharan

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published