Question

我是angularjs的新手，但已经和django合作了一段时间。

我习惯于在模板中编写以下内容：

<a href="{% url 'profile-page' user.pk %}">{{ user.name }}</a>

以及在渲染的html中生成以下内容：

<a href="/profiles/33">Eamonn</a>

n.b。此个人资料页面网址在我的网址路由

中定义

这非常强大，因为我可以更改网址而无需更改模板。

我喜欢angularjs，但我不太高兴将我的网址添加到我的模板中，我使用的是名称而不是网址，感觉就像我正在编程接口而不是实现。另外，如果我在不同的模板中指定了两次或三次网址，那就不是很干了。

在angularjs中是否有任何本地方式可以做类似的事情？

Answer 1

我会在您的应用中创建一个constant，然后将其注入$rootScope或控制器中，该控制器会使用链接查看页面的特定部分。

这样的事情：

app.constant('appURL', {
  login:             '/login'
  userProfilePrefix: '/profiles/'
});

然后您的控制器可以将其作为依赖项请求并将其放在范围内（或者您可以将其放在$rootScope中的app.run(..)：

app.controller('PageController', ['appURL', function($scope){

  $scope.appURL = appURL;
  $scope.userId = 33;

}]);

最后，您的HTML可以使用以下内容：

<a ng-href="{{appURL.userProfilePrefix + userId}}">Eamonn</a>

注意尽可能使用ng-href - 所有这一切意味着如果用户在插值发生之前碰巧点击链接，则不会将其重定向到{{1} }

Answer 2

我发现这个库完全符合我的要求：https://github.com/airtonix/angular-named-routes

感谢您的回复。

Answer 3

我已经创建了一个模块来解决这个问题。

以下是AngularJS github的问题： https://github.com/angular/angular.js/issues/7091#issuecomment-40742173

这里是模块库： https://github.com/betsol/angular-router

此模块在此库之上工作： https://github.com/betsol/js-router

用法示例

routerProvider
    .when('/user/:userId/post/:postId/comment/add', {
        name: 'user-post-comment-add',
        templateUrl: '/partials/user-post-comment-add.html',
        controller: 'UserPostCommentAddCtrl'
    })
;

<a href="{{ router.generate('user-post-comment-add', { userId: 100, postId: 500 }) }}">Add comment</a>

angularjs - 如何不在模板中硬编码网址

3 个答案:

用法示例