AngularJS - 處理手動輸入URL的狀態的最佳方式

我目前有一個基於meanjs stack boilerplate的設置，我可以讓用戶登錄處於「登錄」狀態的用戶登錄，因爲我瀏覽網站。這是因爲將用戶對象保存在全局可用的服務中。AngularJS - 處理手動輸入URL的狀態的最佳方式

但是，這隻適用於我從我的根目錄，即從'/'和只在我的應用程序內導航。

如果我手動輸入一個URL，比如'/ page1'，它會丟失全局用戶對象，但是如果我進入根網頁並通過網站導航到'/ page1'。那很好，它可以看到Service對象中的全局用戶對象。

所以我想這是由於整個頁面刷新失去全球價值的地方，通過網站導航不刷新所以你保留所有的變量。

要注意的一些事情包括：

我已經啓用HTML5Mode，使用前綴 '！'。
我用UI-路由器
我用一個標籤以「/」
我有明確的重新寫入規則在加載我的所有路線後，我有通吃「/ *」的最後一個路線並返回根index.html文件，因爲這是angularjs的東西。

我只是想知道人們通常在這裏做什麼？他們是否恢復了標準Cookie和本地存儲解決方案？我對角度相當陌生，所以我猜測這裏有一些庫。

我只是想知道推薦的方法來處理這個問題或大多數人做什麼，只是讓我以正確的方式和角度的方式對齊我想。

更新：

如果我手動導航到通過地址欄我的網站上另一個網址，我失去了我的用戶的狀態，但是如果我手動回到我的根通過地址欄，我的用戶狀態再次被看到，所以它不僅僅是關於在窗口刷新時丟失狀態。所以它似乎與在根URL上運行的代碼有關。

我有一個明確的重寫，手動輸入的URL（由於HTML5位置模式）應首先返回index.html，因爲它包含AngularJs文件，然後UI路由接管並正確路由它。

所以我會預料到根目錄上的任何代碼都會執行，所以它應該類似於通過網站導航或在地址欄中輸入。我必須錯過一些關於Angular的東西，它有這種效果。

更新2

權利，使更多的研究使我這個：

<script type="text/javascript"> 
    var user = {{ user | json | safe }}; 
</script>

這是index.html的服務器端代碼，我想刷新頁面的時候它沒有運行通過手動URL創建一個新頁面。

使用散列爆炸模式，它工作，這是因爲使用散列爆炸模式，即使我在瀏覽器中鍵入一個URL，它不會導致刷新，因爲使用HTML5模式，它會刷新。所以現在我能想到的解決方案是使用sessionStorage。

除非有更好的選擇？

更新3：

它似乎處理的最佳方式是使用HTML5Mode時，你只是必須有明確的服務器和其他一些事情上重新寫。

來源

2014-10-10 iQ.

Codewise，該用戶狀態如何設置？它是綁在根上的嗎？ – 2014-10-10 23:22:45

它被設置在一個存儲它的服務上。它在根上可用。我仍然試圖找出一些說實話的東西，看看我的更新。 – 2014-10-11 12:37:41

我認爲你說得對，但你可能想看看你的應用可能需要的所有路由，並考慮一些基本結構（API，用戶，會話，部分等）。它看起來就像是你想讓它變得如此複雜的那些問題之一。

就最佳做法而言，您可以按照angular-fullstack-generator或meanio項目執行。

你在做什麼看起來最接近mean.io主要是因爲他們也使用ui路由器，雖然他們似乎保持hashbang，它看起來更像是一個SEO友好與一些獨立的SPA頁面）能力。你或許可以安裝它，找到代碼之前，我在這裏解釋過 -

npm install -g meanio 
mean init name 
cd [name] && npm install

的角fullstack看起來像這樣這是一個比較典型的路由的一個很好的例子：

// Server API Routes 
app.route('/api/awesomeThings') 
    .get(api.awesomeThings); 

app.route('/api/users') 
    .post(users.create) 
    .put(users.changePassword); 
app.route('/api/users/me') 
    .get(users.me); 
app.route('/api/users/:id') 
    .get(users.show); 

app.route('/api/session') 
    .post(session.login) 
    .delete(session.logout); 

// All undefined api routes should return a 404 
app.route('/api/*') 
    .get(function(req, res) { 
    res.send(404); 
}); 

// All other routes to use Angular routing in app/scripts/app.js 
app.route('/partials/*') 
    .get(index.partials); 
app.route('/*') 
    .get(middleware.setUserCookie, index.index);

的諧音然後與一些正則表達式爲簡單起見發現勿使像交付：

var path = require('path'); 

exports.partials = function(req, res) { 
var stripped = req.url.split('.')[0]; 
var requestedView = path.join('./', stripped); 
res.render(requestedView, function(err, html) { 
    if(err) { 
    console.log("Error rendering partial '" + requestedView + "'\n", err); 
    res.status(404); 
    res.send(404); 
    } else { 
    res.send(html); 
    } 
}); 
};

而指數呈現：

exports.index = function(req, res) { 
    res.render('index'); 
};

來源

2014-10-10 23:48:26 Dylan

最後，我確實遇到了一些麻煩，但通過做一些可以分解到步驟的東西來解決問題，這些步驟適用於那些使用HTML5Mode的人。

1）在Angular中啓用HTML5Mode之後，請在您的服務器上設置重寫，以便它發回包含Angular src js文件的index.html。注意，這個重寫應該在你的靜態文件和普通服務器路由之後（例如在你的REST API路由之後）。

2）確保角路由與您的服務器路由不同。所以如果你有一個前端的狀態/用戶/帳戶，那麼就沒有服務器路由/用戶/帳戶，否則它將不會被調用，將你的服務器端路由改爲/ api/v1/server/route。

3）對於您的前端中用於觸發直接調用服務器而無需通過Angular狀態/路徑的所有錨定標記，請確保添加了「target = _self」。

來源

2014-11-07 23:35:09

AngularJS - 處理手動輸入URL的狀態的最佳方式

回答

相關問題