角度路由一些奇怪的事情

时间:2013-03-29 13:55:31

标签: html5 angularjs

我还在学习angularjs所以也许有些东西很愚蠢我不理解但是在使用路由时我有一个非常奇怪的行为。

在我的应用程序中,我使用以下代码来定义我的路线:

var app = angular.module('app', []);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
  $routeProvider.
    when('/pneumatici/:chunka', {}).
    when('/pneumatici/:chunka/:chunkb', {});

  $locationProvider.html5Mode(true);
}]);

在控制器中我以这种方式管理它们:

app.controller('appCtrl', ['$scope', '$route', '$routeParams', '$location', function ($scope, $route, $routeParams, $location) {
  $scope.$on('$routeChangeSuccess', function (current,previous) {
    if (!($location.path().indexOf('/pneumatici') === -1)) {
      $scope.chunka = $route.current.params.chunka; $scope.chunkb = $route.current.params.chunkb;

      /** do my stuff with chunka and chunkb **/

    } else {
      window.location.href = $location.path();
    }
  });

我没有ngView,没有模板,没有。 它就像一个魅力。

请注意我实际强制页面加载的行,以防网址不是由控制器appCtrl管理。 我被迫这样做,因为一旦我定义我的路线以捕获'$ routeChangeSuccess',当点击时页面中的所有链接都被角度捕获并且即使链接没有使用'when'定义的格式也不会发生页面加载。 我想用'否则'来做这件事,但我无法理解如何,如果可行的话。

现在问题。 在页面当然我有像'/privacy.html'这样的链接,如果我点击它们,页面加载被正确触发,我看到'/privacy.html'但不幸的是一旦有如果我点击后退按钮我可以看到浏览器的网址更改为(例如)/ pneumatici / foo / bar但没有触发页面加载。

请注意,在privacy.html页面中我没有定义角度路由,没有.config no .when;有一个使用控制器定义的anagular应用程序,但没有在任何地方注入'$ routeProvider',没有任何路由的定义。

发生了什么事?我做错了什么?

感谢您的帮助!

更新 我找到了一个可行的解决方案:

angular.element("a").prop("target", "_self");

对于'target'设置为“_self”的所有'a'元素,忽略角度路由,不知道。

如果我整体看这个策略对我来说听起来不是很优雅,我很乐意改进它。我不喜欢的是因为我在.config中定义路由我应该能够告诉angular跳过任何与我在那里定义的格式/路径不匹配的url。

但我不知道这是否可行,有人知道吗?

2 个答案:

答案 0 :(得分:1)

通过启用html5mode,您的应用应该表现得像默认情况下拦截网站上的所有内容(来自'/'。)

从这个角度看,似乎$ location.path()应该在你的显式覆盖中工作,但它不是真的正确($location.url()会是)并且浏览器已经有正确的URL,所以也许您无法在特定浏览器中强制使用location.href = location.href重新加载。

我不会走那条路,而是采取以下措施使其干涸:

如果添加基础href:

<base href="/pneumatici/"></base>

并在/pneumatici/子句中将/替换为when

$routeProvider.
    when('/:chunka', {}).
    when('/:chunka/:chunkb', {});

然后你应该只需要这个:

$scope.$on('$routeChangeSuccess', function (current,previous) {

    $scope.chunka = $route.current.params.chunka;
    $scope.chunkb = $route.current.params.chunkb;

  /** do my stuff with chunka and chunkb **/
});

答案 1 :(得分:0)

我认为你应该让Angular像这样管理你所有的路线:

var app = angular.module('app', []).config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');

$routeProvider
    .when('/',
    {
        controller: 'HomeController',
        templateUrl: '/partials/home.html'
    })
    .when('/about',
    {
        controller: 'AboutController',
        templateUrl: '/partials/about.html'
    })
    .when('/privacy',
    {
        controller: 'PrivacyController',
        templateUrl: '/partials/privacy.html'
    })
    .when('/404',
    {
        controller: 'NotFoundController',
        templateUrl: '/partials/404.html',
    })
    .otherwise({
        redirectTo: '/404'
    });
});

注意上述情况。这告诉角度在无法识别路线时加载404页面。

相关问题