如何创建一个不使用路由的AngularJS SPA应用程序？ [英] How can I create an AngularJS SPA application that does not use routing?

问题描述

我想创建一个应用程序AngularJS这是只使用与.COM之后没有任何一个HTTP域。例如一个应用程序，这是一个显示在浏览器中的唯一网址：

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

等。

推荐答案

当然，你需要的是一些顶级应用程序状态和用户界面的响应到该状态。这是所有 ngRoute 是，引擎盖下 - 国家只是生活在你的地址栏中，以及如何在来该国生活的回应配置$ routeProvider （这是反过来，实现了通过 ngView 指令中的DOM）。

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).

考虑一个简单的例子：

<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 /编辑/ hpnGtMkV6V4JtPRrQmes？p = preVIEW

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.

这篇关于如何创建一个不使用路由的AngularJS SPA应用程序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！