ngRoute 可以支持非配置链接吗？

Question

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

这就是我的意思，我们在这个奇怪的 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>