current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.3 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 1 down vote favorite

I'm trying to create a SPA using the UI-Router's multiple views functionality but cannot figure it out why my sections are not displayed into the page.

Here's my app setup:

    angular
    .module('myApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ui-router'
    'ngSanitize',
    'ngTouch'
    ])
    .config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $urlRouterProvider.otherwise('/main');
    $stateProvider
    .state('/', {
    url: 'main',

    views: {
        'v1': {
            templateUrl: 'views/v1.html',
            controller: 'V1Ctrl'
        },

        'v2': {
            templateUrl: 'views/v2.html',
            controller: 'V2Ctrl'
        },
        'v3': {
            templateUrl: 'views/v3.html',
            controller: 'V3Ctrl'
        },
        'v4': {
            templateUrl: 'views/V4.html',
            controller: 'V4Ctrl'
        },
        'v5': {
            templateUrl: 'views/v5.html',
            controller: 'V5Ctrl'
        },
        'V6': {
            templateUrl: 'views/V6.html',
            controller: 'V6Ctrl'
        }
      }
     });
     $locationProvider.html5Mode(true);
     });

And on my main.html:

     <section ui-view="v1" id="v1"></section>
     <section ui-view="v2" id="v2 ></section>
     <section ui-view="v3" id="v3" ></section>
     <section ui-view="v4" id="v4" ></section>
     <section ui-view="v5" id="v5" ></section>
     <section id="v6" ui-view="v6" ></section>

I've been stuck on this issue for days and cannot find an explanation.

share|improve this question
up vote 1 down vote

I have created a Plunker demoing what you are trying to do. I took out the extras (ngAnimate, ngCookie, etc) for ease of making the Plunker.

Make sure only one ng-app declaration exists in your markup. (This is usually put in the <html> but can be in the <body> as well)

I am not sure if you have this in another file, but the controllers need to be actually defined: 

  angular
  .module('myApp', ['ui.router'])
  .config(function($stateProvider, $urlRouterProvider, $locationProvider) {

    /*********************** 
      Note the use of "template:" is just ease of creating the Plunker. You can use 
      "templateUrl:" and enter the path of your template file, and it will 
       work
    **********************/

    $stateProvider
      .state('main', {
        url: '/',
        views: {
          'v1': {
            template: 'V1',
            controller: 'V1Ctrl'
          },
          'v2': {
            template: 'V2',
            controller: 'V2Ctrl'
          },
          'v3': {
            template: 'V3',
            controller: 'V3Ctrl'
          },
          'v4': {
            template: 'V4',
            controller: 'V4Ctrl'
          },
          'v5': {
            template: 'V5',
            controller: 'V5Ctrl'
          },
          'v6': {
            template: 'V6',
            controller: 'V6Ctrl'
          }
        }
      });
    $urlRouterProvider.otherwise("/");

     $locationProvider.html5Mode(true);
  })
  .controller("V1Ctrl", function($scope) {
    $scope.foo = "bar";
  })
  .controller("V2Ctrl", function($scope) {
    $scope.foo = "bar";
  })
  .controller("V3Ctrl", function($scope) {
    $scope.foo = "bar";
  })
  .controller("V4Ctrl", function($scope) {
    $scope.foo = "bar";
  })
  .controller("V5Ctrl", function($scope) {
    $scope.foo = "bar";
  })
  .controller("V6Ctrl", function($scope) {
    $scope.foo = "bar";
  });

Also, generator-angular might be different but when referencing ui-router as a dependency, I believe you need to refer to it as ui.router.

Lastly, I think you have your state and url switched:

.state('main', {
        url: '/',

The url property is what will be used to navigate to that particular state. (Don't put a template url there)

Everything else you had looked ok. Please review my Plunker and hopefully you get things worked out. Good luck.

EDIT Fixed Plunker link

share|improve this answer
    
TrazeK, thanks a lot I did exactly what you said without any luck, switched generator to angular-fullstack but still cannot understand what's the problem. In my web inspector I'm getting: Error: [$injector:modulerr] Failed to instantiate module myApp due to: State 'main'' is already defined... – shklsw Sep 10 '14 at 2:01
    
here's what I currently have on PLunker – shklsw Sep 10 '14 at 2:45
    
I notice in your Plunker, you have ng-app="myApp" both in <html ng-app="myApp"> and <body ng-app="myApp" id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">. You only need one and I'd personally use the one in the <html> tag. (remove the one in the <body>). Also, remember to be sure the controller for each view is defined. – TrazeK Sep 10 '14 at 4:33
    
Your plunker also refers to main.html in the URL property. You should change that to whatever URL will be used to navigate to the state. (Like "/" for example) – TrazeK Sep 10 '14 at 13:08
    
no, tried everything with no luck, my sections aren't displayed, tried a lot of forums and solutions for the ui-router and cannot find a good answer. I really don't know what else should I try, nothing gets displayed. – shklsw Sep 10 '14 at 19:52

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.