Question

只是一个简单的问题。 ui-router中为angular命名的视图是否有路由和url？如果是这样，我该如何激活它们？我搜索了wiki，但无法找到相关信息。我想要的是一个具有三个不同子路线的应用程序，因此一次只能有一个活动，但它们应该在不同的视图中，所以我可以用手风琴效果在它们之间进行很好的动画制作。有帮助吗？谢谢！

编辑：到目前为止，我的路由代码中有一些代码：

function routeConfig($stateProvider, $urlRouterProvider, $locationProvider) {
    $stateProvider
      .state('home', {
        url: '/',
        //templateUrl: 'app/main/main.html',
        //controller: 'MainController',
        //controllerAs: 'main',
        views: {
          '' : {
            templateUrl: 'app/main/main.html',
            controller: 'MainController',
            controllerAs: 'main'
          },
          'contact': {
            templateUrl: 'app/contact/contact.html',
            controller: 'ContactController',
            controllerAs: 'contact'
          },
          'profile': {
            templateUrl: 'app/profile/profile.html',
            controller: 'ProfileController',
            controllerAs: 'profile'
          },
          'works': {
            templateUrl: 'app/works/works.html',
            controller: 'WorksController',
            controllerAs: 'works'
          }
        }
      });

    $urlRouterProvider.otherwise('/');
    $locationProvider.html5Mode(true);
  }

Answer 1

我建议只为每个视图创建不同的状态。没有理由不能在不同的州之间顺利制作动画。

所以：

function routeConfig($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
  .state('home', {
    url: '/',
    templateUrl: 'app/main/main.html',
    controller: 'MainController',
    controllerAs: 'main'
    })      
  .state('home.contact', {          
        templateUrl: 'app/contact/contact.html',
        controller: 'ContactController',
        controllerAs: 'contact'
      })
  .state('home.profile', {
        templateUrl: 'app/profile/profile.html',
        controller: 'ProfileController',
        controllerAs: 'profile'
        params: {
            "user" : {}
        }
      })
  .state('home.works', {
        templateUrl: 'app/works/works.html',
        controller: 'WorksController',
        controllerAs: 'works'
      })
    }
  });

$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);

}

在您的ui-sref链接中，您可以使用参数将数据传递给这些视图，例如：<a ui-sref="home.profile({user: contact.user})以及＆＃39; params＆＃39;我在上面列出的州定义部分。

Answer 2

路由是服务器端，所以如果你调用任何地址，你的服务器端路由需要启动适当的html或javascripts，这将让你呈现你想要的。

要获得更准确的答案，请回复更多详细信息：您的服务器端引擎是什么，您使用的角度版本等等。

ui-router使用route和url命名视图

2 个答案: