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.

Don't set the state template to use index.html.

Phil
– Phil

2016-08-25 06:33:30 +00:00
Commented Aug 25, 2016 at 6:33 — Phil
– Phil, Commented Aug 25, 2016 at 6:33

ojus kulkarni · Accepted Answer · 2016-08-25 09:07:58Z

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

edited Aug 25, 2016 at 9:07

answered Aug 25, 2016 at 6:46

ojus kulkarni

1,9073 gold badges27 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Phillis Peters Over a year ago

Opening the file directly causes a problem with templateUrl. When I load file:///Users/Projects/AngularJs/index.html it detects the url as file:///Users/Projects/AngularJs/index.html#/day1 so when I click the link for day 2 it is translated as file:///day2 which does not exist. My solution was to use a server, I normally use nginx so I ran my VM, started my nginx server and now when I load localhost:8080 it runs the url localhost:8080/#/day1 with my homepage(day 1 code) and for the day 2 link localhost:8080/#/day2 with code for day 2(day2.html) and everything works fine.

Collectives™ on Stack Overflow

Routing In AngularJS using ui-router

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related