Routing In AngularJS using ui-router

Question

I am using ui-router but it is not working. Here is my code:

In my index.html

   <li> <a ui-sref="day2">Day 2</a> </li>
    <li><a ui-sref="day3">Day 3</a></li>
    <li><a ui-sref="day4">Day 4</a></li>

My main.js

    var myModule = angular.module('myApp', ['ngMessages', 'ui.router']);
myModule.config(function($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise("/day1");

      $stateProvider

        .state('day1', {
          url: '/day1',
          templateUrl: 'index.html'
        })
        .state('day1.example', {
          url: '/theview',
          template: '<h3>I am a routed view</h3>'
        })

      .state('day2', {
        url: '/day2',
        views: {

          // the main template will be placed here (relatively named)
          '': {
            templateUrl: 'day2.html'
          }
        }
      })

      .state('day3', {
        url: '/day3',
        views: {

          // the main template will be placed here (relatively named)
          '': {
            templateUrl: 'day3.html'
          },

          // the child views will be defined here (absolutely named)
          'directives@day3': {
            templateUrl: 'directives.html'
          },

          // for column two, we'll define a separate controller
          'services@day3': {
            templateUrl: 'service.html'
          }
        }

      })

      .state('day4', {
        url: '/day4',
        views: {
          '': {
            templateUrl: 'day3.html'
          }
        }

      });
    });

When I click on the links day 2, day 3 and day 4 in the browser its not working. Even the day1.example is not working yet I have called it like this in my index.html

<div>
  <a ui-sref=".example" class="save button">Example</a>
</div>
<div ui-view> </div>
</div>

I am not sure what the problem is. I have already downloaded the ui-router minified file so that is not the problem. It is actually detecting the day1 route in the browser file:///Users/Projects/AngularJs/index.html#/day1 I was following the scotch tutorial.

My problem is with the templateUrl: 'day2.html when I change it to template: '<h1> Check if it Works </h1> the link for day 2 works well.

Answer 1

Don't give any state to your index.html page, if you want add any content then add child states or use child pages.
Try this:-

var myModule = angular.module('myApp', ['ngMessages', 'ui.router']);
myModule.config(function($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise("/day1");

     $stateProvider

        .state('main', {
          url: '',
          abstract: true,
          templateUrl: 'main.html'
        })

        .state('main.day1', {
          url: '/day1',
          templateUrl: 'main.html'
        })
        .state('main.day1.example', {
          url: '/theview',
          template: '<h3>I am a routed view</h3>'
        })

        .state('main.day2', {
          url: '/day2',
          templateUrl: 'day2.html'
        })

       .state('main.day3', {
          url: '/day3',
          templateUrl: 'day3.html'
       })

       .state('main.day4', {
          url: '/day4',
          templateUrl: 'day3.html'        
       });
    });