AngularJSを使いシングルページアプリケーションを作成しています。ページの切り替えをせずにリロードする方法はないでしょうか？

AngularJSを使いシングルページアプリケーションを作成しています。
厳密にいうと、OnsenUIとAngularJSを使い、JavaScriptでのスマホアプリ開発を行っています。

window.location.reload();を使うと、トップページに遷移してしまい、意図したリロードをすることができずにいます。

ページの切り替えをせずリロードする方法は他にないでしょうか？
よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

onsenuiは通常ブラウザが保持している履歴（history）を使わずにページングを内部のスタックで管理しているためリロードを行うとトップページに戻ってしまいます。

独自でhistory.apiで履歴を追加するか、以下のようにページ管理をangular-ui-routerで行うことによってリロードが行われてもトップページに戻ることなく操作を続行することが可能です。

<html>
<head>
  <meta charset="utf-8"/>
  <title>test</title>
  <link rel="stylesheet" href="onsenui.css"/>
  <link rel="stylesheet" href="onsen-css-components.css"/>
  <script src="angular.js"></script>
  <script src="onsenui.js"></script>
  <script src="angular-onsenui.js"></script>
  <script src="angular-ui-router.js"></script>
</head>

<body>
<script type="text/javascript">
var app = ons.bootstrap('test', ['ui.router']);
app.config(['$urlRouterProvider', '$stateProvider',
  ($urlRouterProvider, $stateProvider) => {

    $urlRouterProvider.otherwise('/page1.html');
    $stateProvider.state('page1', {
      url: '/page1.html',onEnter: [function(){
      var hasUrl = url => myNavigator.pages.reduce((result, elem) => !result ? url === elem.name : result, false);
      hasUrl('page1.html') ? myNavigator.popPage(): myNavigator.pushPage('page1.html', {animation: 'slide'});
      }]
    }).state('page2', {
      url: '/page2.html',onEnter: [()=>myNavigator.pushPage('page2.html', {animation: 'slide'})]
    });
  }]);
  
  
</script>
<ons-navigator title="Navigator" var="myNavigator">
</ons-navigator>

<ons-template id="page1.html">
  <ons-page>
    <ons-toolbar><div class="center">Page 1</div></ons-toolbar>
    <div style="text-align: center">
      <br/><ons-button modifier="light" ui-sref="page2">→</ons-button>
    </div>
  </ons-page>
</ons-template>

<ons-template id="page2.html">
  <ons-page>
    <ons-toolbar><div class="center">Page 2</div></ons-toolbar>
    <div style="text-align: center">
      <br/><ons-button modifier="light" ui-sref="page1">←</ons-button>
    </div>
  </ons-page>
</ons-template>
</body>
</html>