Phillo Peters Phillo Peters - 3 months ago 18
AngularJS Question

Routing In AngularJS using ui-router

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

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'        
       });
    });
Comments