Javascript 基于滚动的AngularJS路由

我正在为一个项目使用Angular，我想知道是否可以使用Angular的路由功能（或第三方库的路由功能，如ui路由器）来控制上述场景中的导航

---

如果是这样的话，除此之外是否还可能有其他路由（例如，一个模态打开后显示为一个页面）？

您可以将您的子片段拆分为具有不同状态的不同模板，然后使用

ui router

在状态之间进行转换。下面是一个执行示例

在路线配置中

app = angular.module('myApp', ['ui.router', 'ngAnimate']);

app.config(['$stateProvider', function($stateProvider) {
  $stateProvider  

  .state('firstSubpage', {
    url: '/',
    template: '<div class="full-page">\
       <h2>Page One</h2>\
       <a ui-sref="secondSubpage">Next page</a>\
    </div>'
  })
  .state('secondSubpage', {
    url: '/page2',
    template: '<div class="full-page two">\
       <h2>Page Two</h2>\
       <a ui-sref="firstSubpage">Next page</a>\
    </div>'
  })

}]);

然后，您只需要在主模板中使用

ui视图

的元素

---

.

您是否尝试过使用$anchorscroll@flybear我见过它，但它似乎没有SEO友好的URL或历史API，我不确定如何使用itI实现问题的第二部分。我想你必须为此实现自定义路由。

/* set height explicitly on ui-view */
div[ui-view] {
  position: absolute;
  height: 100%;
  width: 100%;
}

[ui-view].ng-enter, [ui-view].ng-leave {
  position: absolute;
  left: 0;
  right: 0;
  -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out;
}

[ui-view].ng-enter {
  -webkit-transform:translate3d(0, 100%, 0);
  -moz-transform:translate3d(0, 100%, 0);
  transform:translate3d(0, 100%, 0);
}

[ui-view].ng-enter-active {
  -webkit-transform:translate3d(0, 0, 0);
  -moz-transform:translate3d(0, 0, 0);
  transform:translate3d(0, 0, 0);
}

[ui-view].ng-leave {
  /*padding-left: 0px;*/  
  -webkit-transform:translate3d(0, 0, 0);
  -moz-transform:translate3d(0, 0, 0);
  transform:translate3d(0, 0, 0);
}

[ui-view].ng-leave-active {
  /*padding-left: 100px;*/
  -webkit-transform:translate3d(0, -100%, 0);
  -moz-transform:translate3d(0, -100%, 0);
  transform:translate3d(0, -100%, 0);
}