沒有模板的角度簡單路由

我正在尋找Angular的簡單解決方案如何處理路由。沒有模板的角度簡單路由

我有服務器生成的頁面與簡單的谷歌地圖和小邏輯是在3個分離的控制器。

現在我想在這裏鉤住路由。只是簡單的路由。當我移動地圖並獲得新的座標時，我想將它們推送到當前的網址中作爲參數「？position = 10.11,50.23」。我想用hashbang備份來使用歷史推送狀態。

在應用程序的其他部分，我想監聽此參數的變化（有些$ watch可能？）。而且我想使用相同的代碼來檢測首次加載頁面時要使用的更改。

我以前在以前的項目中，這是絕對簡單CanJS，但在角我不能讓事件小步糾正結果:)

PS：這只是削減最少的用例的。

謝謝

來源

2013-11-27 Schovi

你真的不需要角路由來做到這一點。角度路由通常用於替換ng-view與不同的模板though it can be used for other things as well。

你的要求可以通過使用$location服務，並建立$watch滿足：

$scope.$watch(function() { return $location.search().position; }, function (newVal) { 
    $scope.params = newVal || 'No params'; 
}); 

$scope.setParams = function (val) { 
    $location.search('position', val); 
};

Working demo

啓動實時預覽在一個單獨的窗口中看到參數窗口地址變更酒吧。

更新：此演示不再適用於plnkr.co。可能是因爲他們改變了他們使用嵌入模式的方式。

來源

2013-11-27 22:46:13

感謝您的解釋。我完全錯過了$ location。每次我結束$路線:) – Schovi

謝謝。此外，要做到這一點，我需要啓用html5mode。 – suzanshakya

@suzanshakya你可以發佈一個更新的例子嗎？謝謝。 –

不知道CanJS，但在角度上它也很容易。

第一次使用：$location.search({parameter1:'someValue', parameter2: 'someOtherValue'})設置您的網址 - 歷史記錄將自動更新。

然後檢測URL的任何變化最優雅的方式是使用（其中之一）兩個內置的事件： $locationChangeStart和$locationChangeSuccess，這樣的：

$scope.$on("$locationChangeStart", function (event, next, current) { 
     // your staff goes here 
    }); 
    $scope.$on("$locationChangeSuccess", function (event, next, current) { 
     // or here (or both if needed) 
    });

要獲得搜索參數只是使用$location.search()採用上述方法之一。

來源

2013-11-27 22:53:20

如果用戶直接登錄網址，這也可以工作嗎？我不確定是否觸發了'$ locationChangeStart/Success'事件。 –

@musically_ut你的意思是：用戶在瀏覽器中手動更改網址嗎？（如果是這樣，不要認爲有什麼可以幫助防止重新加載應用程序） –

我指的是當應用程序加載時URL已經具有'＃？position = XYZ'的情況。如果用戶重新加載當前頁面或將鏈接轉發給其他人，就會發生這種情況。我不認爲'$ locationChange {Start/Sucess}'事件在這種情況下被觸發（我可能是錯的），並且應用程序無論如何都需要從'$ location.search（）'加載它的狀態。但是+1指出事件;他們已經下定了決心。 –

沒有模板的角度簡單路由

回答

相關問題