基于滚动的AngularJS路由

Question

我正在使用Angular进行项目，并且想知道是否可以使用Angular的路由功能（或第三方库的功能，如ui-router）来控制场景中的导航，如上所示。

如果是这样的话，除此之外是否还可以有替代路线（例如，模态会打开，将其自身显示为页面）？

Answer 1

您可以将子部分拆分为具有不同状态的不同模板，然后使用ui-router的{​​{3}}在状态之间进行转换。这是一个示例命令。

在路线配置中

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>'
  })

}]);

在您的CSS中

/* 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);
}

然后您只需要在主页模板中使用ui-view的元素。

animation API