如何創建不使用路由的AngularJS SPA應用程序？

Question

我想創建一個僅使用一個HTTP域，.com之后不包含任何內容的AngularJS應用程序。 例如，其中這是瀏覽器中唯一顯示的URL的應用程序：

www.myapp.com

這可能嗎，我需要做什么？ 到目前為止，我所看到的所有應用程序都使用類似以下內容的東西：

www.myapp.com/users
www.myapp.com/screen1

等等

Answer 1

當然; 您所需要的只是某種頂級應用程序狀態和響應該狀態的UI。 這就是ngRoute的全部ngRoute -狀態僅位於您的地址欄中，而如何響應該狀態的配置位於$routeProvider （這又通過ngView指令在DOM中實現）。

考慮以下簡單示例：

<div ng-controller="ApplicationController">
  <h1>Some Pages</h1>
  <ul>
    <li><a href='' ng-click='setPage("page1")'>Page 1</a></li>
    <li><a href='' ng-click='setPage("page2")'>Page 2</a></li>
    <li><a href='' ng-click='setPage("page3")'>Page 3</a></li>
  </ul>

  <div ng-include="page + '.html'"></div>
</div>

app.controller('ApplicationController', function($scope) {
  $scope.page = 'page1';

  $scope.setPage = function(pg) {
    $scope.page = pg;
  }
});

您可以在下面的Plunker中看到它的工作原理： http ://plnkr.co/edit/hpnGtMkV6V4JtPRrQmes?p=preview

單擊全屏按鈕，以便您可以看到地址欄（以及它不變的事實）。

---

如果不將應用程序狀態存儲在地址欄中，用戶就沒有一種非常簡單的方法來標記自己在應用程序中的位置或使用瀏覽器的按鈕前進/后退，這毫無價值。 仔細考慮您是否正在構建可從這種限制中受益的應用程序。

Answer 2

路由通常是為了使應用程序的不同部分更具“可標記性”而實現的。

因此，盡管您可能擁有SPA，但是您仍然可能希望用戶使用URL欄使他們回到應用程序的特定部分。

如果僅將起始頁設置為index.html，則無需指定頁面名稱即可使用。