【问题标题】:Use Angular routing alongside roundtrip routing使用 Angular 路由和往返路由
【发布时间】:2013-06-23 12:20:12
【问题描述】:

我正在开发一个 Django 应用程序,该应用程序在某些页面中大量使用 Angular,例如在 domain.com/myAngularApp

在 Angular 页面中,我使用 Angular 路由在该页面内的不同视图/状态之间导航。然而,在整个网站上都有导航链接需要向 Django 发送往返请求。但是,所有页面都包含相同的已编译 javascript 文件,其中包含 Angular 路由声明。

所以我的问题是:如何让 Angular 管理自己的路线并在位置更改(主要是通过单击页面上的链接)到未明确告知的路径时让路拥有,即域外的不同子目录。

我的路由声明类似于:

myApp.config( function($locationProvider, $routeProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider.when('/myAngularApp/', {
    templateURL: 'template1.html'
  });
  $routeProvider.when('/myAngularApp/stuff', {
    templateURL: 'template12.html'
  });
  $routeProvider.otherwise({redirectTo:  <not sure what to do here...>  });
})

我尝试过类似的方法:

$routeProvider.otherwise({redirectTo: function(a1,r,a3){ window.location.href = r }})

但这会使页面在任何不匹配的路由上无休止地刷新。

省略 else 语句似乎使得直接访问时无法留下路由不匹配的页面......不太明白为什么?

一定可以做我不想做的事?

【问题讨论】:

  • 你找到任何解决方案了吗...即使我也有同样的问题。让我知道。谢谢:)
  • 发现我可以通过减少 dom 中 Angular 应用程序的范围以排除全局导航链接来部分解决问题,尽管我正在编写自己的非贪婪路由服务:/

标签: angularjs url-routing


【解决方案1】:

我想我可能已经找到了解决方案。我正在做类似的事情,一个多页面的角度网站,它的一些页面使用角度。这就是我正在做的事情

var app = angular.module('appname', ['ui.bootstrap', 'ui.autocomplete'])
.config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
    $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix('!');
}])
.run(function($rootScope, $location) {
    var redirected = false;
    $rootScope.$on('$locationChangeStart', function(event, nextLocation, currentLocation) {
        if(!redirected &&  $location.path() !== '/current-url') {
            redirected = true;
            event.preventDefault();
            window.location = $location.path();
        }
    });
});

那么接下来我要解决的是如何传入current-url路径。我在想的一种方法是让我们 ng-init 在视图中设置该数据(我使用的是 express.js,所以我会使用 Jade)。或者可能在运行函数中获取初始路径并对其进行测试。

event.preventDefault() 用于阻止将额外项目添加到浏览器历史记录中。在我这样做之前,我必须回击两次才能回到角度页面。

注意这还没有经过 IE8 测试。我现在就去做,看看效果如何。

更新好的,我刚刚在 IE8 中测试了这个,但我陷入了重定向循环。我已经更新了代码,使其具有一个简单的变量来检查我们是否已重定向。似乎工作。我很想知道一个更漂亮的方式。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-09-08
    • 1970-01-01
    • 2012-12-01
    • 2017-04-04
    相关资源
    最近更新 更多