角度的 URL 标记答案

【问题标题】：URL tag for angular角度的 URL 标记
【发布时间】：2013-08-23 20:33:19
【问题描述】：

来自 Django 世界，我只是爱上了它关于 URL 的酷特性，它可以防止我们在模板和视图中对 URL 进行硬编码：

In urls.py:
url(r'/url/param1/param2/$', 'view_name', name="URL_NAME"),

In Template:
<a href="{% url "URL_NAME" @param1 &param2 ... %}">My link</a>

这样，如果我想更改此 URL，我不必在我的多个文件中更改它。我想知道角度是否允许我们也这样做。现在我必须写这样的东西：

In my App: 
when('/home', {
        templateUrl: 'app/home/home.tpl.html'
    }).

In my view:
<a href='#/home'>my link</a>

感谢您的帮助。

【问题讨论】：

标签： javascript django angularjs

【解决方案1】：

这是一个简单的解决方案。

首先，我在 $routeProvider 配置中添加了视图的名称。例如，我们将路由名称 '/login/:arg1/with/:arg2' 定义为 'view_name'：

myApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/login/:arg1/with/:arg2', {
            templateUrl: 'app/common/login/login.tpl.html',
            name: 'my_view_name'
        }).

然后我创建了一个指令来将您的视图名称动态转换为正确的 url：

myApp.directive('viewUrl', function ($route) {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            var splitArgs = attrs.viewUrl.split(' ');
            var view_name = splitArgs.shift();
            var url="route not found";
            for(var route in $route.routes){
                if ($route.routes[route].name == view_name){
                    url = route;
                }
            }
            for (var arg in splitArgs) {
                keyValue = splitArgs[arg].split(':');
                url = url.replace(":"+keyValue[0], keyValue[1]);
            }
            elem.prop('href', url);
        }
    }
});

现在您可以像这样在 html 组件中使用 view-url 属性：

<a view-url="my_view_name arg1:value1 arg2:value2">Hello World</a>

这会将 href 元素添加到您的链接中，您将得到以下结果：

<a view-url="my_view_name arg1:value1 arg2:value2" href="/login/value1/with/value2">Hello World</a>

当我使用替换函数时，请注意参数的名称。

【讨论】：

我自己来自 django，这不是 Angular 内置的事实超出了我的理解。