Question

我目前在我的应用中有两种状态。每个应用都有多个视图。我希望状态在app启动时激活。现在，当应用程序启动时，我只获得链接。然后我必须点击任何链接来激活任何状态。如何默认打开状态？

陈述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")

谢谢！

Answer 1

首先，您的url声明应该在views对象之外。

所以这就是你的个人资料状态：

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

注意：我不确定这是否仍然是一个有效的问题，但我会将所有视图名称都放在引号中。如果内存对我有用，那么早期对UI路由器有一些影响 - 不确定是否仍然适用。

其次，如果您希望路由选择“/”上的活动状态，则需要确保已启用HTML5 Pushstate。否则你的'root'将是“/＃/”。

这里有一些代码可以说是push-state.js文件;

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

当你偶然发现客户端路由错误时，拥有它自己的文件非常有用，我发现我的大部分问题都来自于PushState的不确定性（因此在调试时打开和关闭它是一个很好的小优势）。

希望能为你效劳，祝你好运：）

Angularjs-ui-router：如何在app启动时激活默认视图？

1 个答案: