1

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.

shklsw
  • 11
  • 2

1 Answers1

1

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

TrazeK
  • 838
  • 1
  • 8
  • 18
  • 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 02:01
  • here's what I currently have on [PLunker](http://plnkr.co/edit/OsRs2PxgoUPxUR246nwQ?p=preview/ "Plunker") – shklsw Sep 10 '14 at 02:45
  • I notice in your Plunker, you have `ng-app="myApp"` both in `` and ``. You only need one and I'd personally use the one in the tag. (remove the one in the ). Also, remember to be sure the controller for each view is defined. – TrazeK Sep 10 '14 at 04: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
  • I made some corrections to the Plunker you created [here](http://plnkr.co/edit/uCwjBOFomXvStAJEl4Sr?p=preview). Please review and if you still have problems, we can take this discussion outside the thread and into the chat. – TrazeK Sep 10 '14 at 22:19
  • You'll notice I left `template: 'views/section1.html'` in there, but it's working. You can change it to `templateUrl` and give the path to your template file in your local project. I hope this helps. – TrazeK Sep 10 '14 at 22:23
  • Tried your code and still the problem persists...it's ok, really appreciate your effort. Also I can't join the chat because I don't have enough points... Have a wonderful day Trazek! – shklsw Sep 11 '14 at 00:56
  • Sorry it didn't work. The Plunker I created in the above comment worked as is. I'll post the entire `app.js` file in the answer. – TrazeK Sep 11 '14 at 02:41