ngRoute 是否支持非配置链接？

Question

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

这就是我的意思，在这个奇怪的示例中我们有三个 links TODO App:

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

"Home" 和 "New Task" 应该使用 angular ngRoute，让它变得漂亮而活泼。我的其他 link，例如 "Complete" 需要像往常一样工作，即完整的往返行程。

最初我是这样配置 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 请求。

Hide/Show 查看 div

我已经尝试配置路由器以根据呈现的 url 隐藏或显示 div，这几乎可以工作。我可以转到已添加书签的页面，它会呈现，但我无法通过单击 link 来浏览网站。我得到相同的空白页，因为 ngRoute 再次阻止了它。

否则配置

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

redirectTo: function() {
    return undefined;
}

我至少可以让它无错误地呈现，但 ngRoute 再次阻止浏览器发出 http 请求。

禁用 ngRoute

我尝试检测何时使用配置的路径，只有这样我才会启用 angular。虽然控制台中存在错误，但至少它适用于书签 links。不过，一旦启用，ngRoute 将在点击网站时开始阻止 links。您将开始看到空白页。

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

有很多 link，所以我不想管它们，只启用新功能，直到我们返回并修复旧功能。

最终进近

为了那些好奇的人，我最终将我的一次尝试与 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

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

Angular

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 是否支持非配置链接？

Can ngRoute support non-configured links?

angularjs

ngroute