0

I have 2 states in my app currently. Each app has multiple views. I want on state to be activated on app start up. Right now, when the app starts, I only get the links. Then I have to click on any link to activate any state. How do I make a state opened by default?

states conf

var app = angular.module('dategenie', ['ui.router', 'ui.bootstrap', 'geolocation', 'ngIdle', 'infinite-scroll']);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
  // For any unmatched url, redirect to /profile
  $urlRouterProvider.otherwise('/');
  // Now set up the states
  $stateProvider.state('profile', {
    views: {
      mainModule: {
        url : '/profile'
        , templateUrl : 'partials/profile.html'
        , controller: 'ProfileCtrl'
      }
      , rightPaneModule: {
        templateUrl: 'partials/location.html'
        , controller: 'LocationCtrl'
      }
    }
  })
  .state('profiles', {
    views: {
      mainModule: {
        url : '/'
        , templateUrl : 'partials/home.html'
        , controller : 'HomeCtrl'
      }
      , chatModule: {
        templateUrl : 'partials/chat.html'
        , controller: 'ChatCtrl'
      }
    }
  });
}]);

HTML

a(ui-sref="profile") Profile
a(ui-sref="profiles") Home
a(href="/logout") Logout
div(ui-view="mainModule")
div(ui-view="chatModule")
div(ui-view="rightPaneModule")

Thanks!

Improve this question

1 Answer 1

Reset to default
4

First of all, your url declaration should be outside of the views object.

So this is how your profiles state would look like: 

.state('profiles', {
  url : '/',
  views: {
    mainModule: {
      templateUrl : 'partials/home.html'
      , controller : 'HomeCtrl'
    }, 
    chatModule: {
      templateUrl : 'partials/chat.html'
      , controller: 'ChatCtrl'
    }
  }
});

Note: I'm not sure if this is still a valid concern, but I would put all of my view names in quotes. If memory serves me right, this had some implications earlier on with UI-router - not sure if that still applies.

Secondly, you need to make sure you have HTML5 Pushstate enabled if you wish for routing to pick up an active state on "/". Otherwise your 'root' would be "/#/".

Here's some code you can slap in say a push-state.js file; 

app.config(['$locationProvider', function($locationProvider) {
  return $locationProvider.html5Mode(true);
}]);

Quite useful to have in it's own file when you stumble upon errors with client side routing, I find most of my issues arise from PushState indescrepencies (so toggling it on and off is a nice little advantage when debugging).

Hope that works out for you, good luck : )

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.