无模板的角度简单布线

Angular simple routing without templates

本文关键字：简单 布线      更新时间：2023-12-06

我正在寻找Angular如何处理路由的简单解决方案。

我有一个由服务器生成的页面，带有简单的谷歌地图和3个独立控制器中的小逻辑。

现在我想把路由挂在里面。只是简单的路线。当我使用地图移动并获得新坐标时，我想将它们推送到当前url中，如param"？position=10.11.50.23"。我想使用历史推送状态和hashbang备份。

在应用程序的另一部分，我想听听这个参数的变化（也许是$watch？）。我想使用相同的代码来检测当页面第一次加载时要使用的更改。

我在以前的项目中使用了CanJS，这非常简单，但在Angular事件中，我不能迈出一小步来纠正结果：）

附言：这只是一个极小的用例。

感谢

您实际上并不需要角度路由来实现这一点。angular中的路由通常用于用不同的模板替换ng-view，尽管它也可以用于其他事情。

使用$location服务并设置$watch:可以满足您的要求

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

工作演示

在单独的窗口中启动实时预览，以查看窗口地址栏中的参数更改。

更新：演示不再适用于plnkr.co。可能是因为他们改变了使用嵌入式模式的方式。

不知道CanJS，但在angular中也很容易。

首先使用：$location.search({parameter1:'someValue', parameter2: 'someOtherValue'})来设置您的url——历史记录将自动更新。

然后，检测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()即可。

相关文章：