Question

我正在尝试修复现有的实现，但是我无法立即完成所有操作。无论如何，我可以获得ngRoute，即使它是一个黑客，支持期望直接请求的旧链接？

这就是我的意思，我们在这个奇怪的例子TODO App中有三个链接：

<a href="/Home">Home</a>
<a href="/Home/AddItem">New Task</a>
<a href="/Home/Complete">Complete Task</a>

“Home”和“New Task”应该使用角度ngRoute，使它变得漂亮和活泼。我的其他链接，例如“完整”，需要像往常一样工作，全程往返。

最初我用这个配置了ngRoute：

angular.module('TodoApp', [
        // Angular modules 
        'ngRoute'
        // Custom modules 

        // 3rd Party Modules
]).config(['$locationProvider', '$routeProvider',
    function config($locationProvider, $routeProvider) {
        $routeProvider.when('/', {
                templateUrl: 'Templates/index.html',
                controller: 'TodoController'
            })
            .when('/Home/AddItem', {
                templateUrl: 'Templates/AddItem.html',
                controller: 'AddItemController'
            });
        // Otherwise, continue to the link like normal.
        $locationProvider.html5Mode(true);
    }
]);

然而，这不起作用，到目前为止，这里是我尝试过的完整选项列表：

请勿另行配置

这只给了我一个空白页面，因为ngRoute阻止浏览器发出http请求。

隐藏/显示视图div

我已经尝试配置路由器根据正在呈现的URL隐藏或显示div，这几乎可以正常工作。我可以转到带书签的页面进行渲染，但是我无法通过点击链接浏览网站。我得到了相同的空白页面，因为ngRoute再次阻止它。

另行配置

我试过一个“NoView”控制器，不起作用。还发现如果我把这段代码放在

中

redirectTo: function() {
    return undefined;
}

我可以让它至少渲染没有错误，但ngRoute再次阻止浏览器发出http请求。

禁用ngRoute

我尝试检测何时使用配置的路径，然后才启用角度。虽然控制台中存在错误，但至少它适用于带书签的链接。但是，一旦启用，ngRoute将在点击网站时开始阻止链接。你会开始看到空白页面。

我会尝试另一种angular-ui-route，但我不知道它是否支持这种情况。路由似乎全有或全无。是否有任何黑客可以绕过这个或另一个支持这种情况的框架？

有很多链接，所以我想让它们单独使用，只有启用新功能，直到我们可以返回并修复旧功能。

最终方法

为那些好奇的人添加，我最终将我的一次尝试与Horst Jahns的答案合并。基本上它看起来像这样：

var angularConfigs = [
    // Set all configs here, routing will be conditionally added later.
    // Angular modules 

    // Custom modules 

    // 3rd Party Modules
];

var routeSettings = [{
        entry: '/',
        template: 'Templates/index.html',
        controller: 'TodoController'
    }, {
        entry: '/Home/AddItem',
        template: 'Templates/AddItem.html',
        controller: 'AddItemController'
    }
];

// Check current url matches routes being registered. If so enable routing.
var enableRotues = false;
for (var i = 0; i < routeSettings.length; i++) {
    if (routeSettings[i].entry === window.location.pathname) {
        enableRotues = true;
        break;
    }
}

if (enableRotues) {
    // Attach the module to existing configurations.
    angularConfigs.push('ngRoute');
    var todoApp = angular.module('TodoApp', angularConfigs);

    todoApp.config([
        '$locationProvider', '$routeProvider',
        function config($locationProvider, $routeProvider) {
            var provider = $routeProvider;

            // Go through each setting and configure the route provider.
            for (var i = 0; i < routeSettings.length; i++) {
                var route = routeSettings[i];

                provider = provider.when(route.entry,
                {
                    templateUrl: route.template,
                    controller: route.controller
                });
            }

            // This enables links without hashes, gracefully degrades.
            $locationProvider.html5Mode(true);
        }
    ]);

    // This directive will disable routing on all links NOT 
    // marked with 'data-routing-enabled="true"'.
    todoApp.directive('a', function() {
        return {
            restrict: 'E',
            link: function(scope, element, attrs) {
                if (attrs.routingEnabled) {
                    // Utilize the ngRoute framework.
                } else {
                    // Disable ngRoute so pages continue to load like normal.
                    element.bind('click', function(event) {
                        if (!scope.enabled) {
                            event.preventDefault();
                            window.location.href = attrs.href;
                        }
                    });
                }
            }
        };
    });
} else {
    // In this case we still want angular to properly be stood 
    // up and register controllers in my case for backward
    // compatibility.
    angular.module('TodoApp', angularConfigs);
}

Answer 1

您可以编写指令并将其设置在未配置的所有链接上。

<强>角

app.directive('nonConfig', function() {
 return {
     restrict: 'A',
     link: function(scope, element, attrs) {
         element.bind('click', function(event) {
             if(!scope.enabled) {
                 event.preventDefault();
                 window.location.href = attrs.href;
             }
         });
     }
 };
});

<强> HTML

<a href="test.html" data-non-config>test</a>

ngRoute可以支持未配置的链接吗？

1 个答案: