如何创建不使用路由的AngularJS SPA应用程序？

Question

I would like to create an AngularJS application that's uses just the one HTTP domain with nothing after the .com. For example an application where this is the only URL that displays in the browser:

www.myapp.com

Is this possible and what would I need to do this? All of the applications I have seen so far use something like:

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

etc.

Answer 1

Sure; all you need is some kind of top-level application state and UI that responds to that state. That's all ngRoute is, under the hood--the state just lives in your address bar, and the configuration for how to respond to that state lives in $routeProvider (which is, in turn, realized in the DOM via the ngView directive).

Consider this simple example:

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

You can see this working in a Plunker here: http://plnkr.co/edit/hpnGtMkV6V4JtPRrQmes?p=preview

Click the full screen button so you can see the address bar (and the fact that it doesn't change).

---

It is worth nothing that, without storing your application state in the address bar, users don't have a very easy way of bookmarking their place in your app or going forward/back using their browser's buttons. Carefully consider whether you're building an app that would benefit from this kind of limitation.

Answer 2

The routing is typically implemented to make different parts of your app more "bookmarkable".

So although you may have a SPA, you may still want the user's to use the URL bar to let them get back to that particular part of the application.

If you just make your starting page index.html, it should just work without specifying the page name.