我想創建一個AngularJS應用程序,該應用程序在.com之後只使用一個HTTP域而沒有任何內容。例如,這是在瀏覽器中顯示的唯一URL的應用程序:如何創建不使用路由的AngularJS SPA應用程序?
www.myapp.com
這是可能的,我需要做什麼?所有我見過的應用至今使用這樣的:
www.myapp.com/users
www.myapp.com/screen1
等
我想創建一個AngularJS應用程序,該應用程序在.com之後只使用一個HTTP域而沒有任何內容。例如,這是在瀏覽器中顯示的唯一URL的應用程序:如何創建不使用路由的AngularJS SPA應用程序?
www.myapp.com
這是可能的,我需要做什麼?所有我見過的應用至今使用這樣的:
www.myapp.com/users
www.myapp.com/screen1
等
當然;您所需要的只是某種頂級應用程序狀態和響應該狀態的用戶界面。這就是全部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>
您可以在Plunker在這裏看到這方面的工作:http://plnkr.co/edit/hpnGtMkV6V4JtPRrQmes?p=preview
點擊全屏按鈕,這樣就可以看到地址欄(與事實它不會改變)。
這是一文不值,如果沒有存儲在地址欄應用程序狀態,用戶不必書籤的一個非常簡單的方法他們的地方在你的應用程序或前進/後退使用其瀏覽器的按鈕。仔細考慮你是否正在構建一個可以從這種限制中受益的應用。
路由通常被實現,使您的應用程序的不同部分更「可收藏」。
因此,儘管您可能有一個SPA,但您仍然希望用戶使用URL欄來讓他們回到應用程序的特定部分。
如果您只是創建您的首頁index.html,它應該只是沒有指定頁面名稱的工作。
所以,如果我有一個帶有三個鏈接的標題的典型佈局,那麼我怎樣才能讓它點擊每個鏈接使得與不同控制器的不同頁面出現在下面。無需顯示不同的網址? –
是的 - 您只需要正確配置您的Web服務器,以便在訪問域時爲您的index.html或同等文件提供服務。路由純粹是可選的。 –
@geoff - 那麼我怎樣才能從屏幕移動到屏幕呢? –
使用ng-include根據「screenId」或等價物更改您正在使用的模板。但Rob Conklin關於可收藏的書籍提出了一個很好的觀點,這就是爲什麼有這麼多的路由解決方案。 –