如何避免AngularJS中的硬编码URL（或路由）？ （提供URL解析）

Question

当我正处于AngularJS的学习阶段时，今天我注意到有关该教程可用的一件事。

在教程中，使用的URL在HTML和JS 文件中进行了硬编码。

例如： 如果我的配置中我的路线定义如下：

// config.js        
$routeProvider.when("/", {          // Home Page
                templateUrl: basePageUrl,
                controller: "Home"
            }).when("/searches", {
                templateUrl: basePageUrl,   // Search Page
                controller: "SearchPage",
            })

现在在我的 home.html 中，如果我想创建搜索页面的链接。我必须做以下事情：

<!-- home.html -->
<div>
  Hello Home
  <p> Go to <a href="#/searches">Searches</a> </p>  <!-- I had to hard code the link -->
</div>

所以，我正在寻找解决方案所以我不必硬编码 HTML或JS文件中的链接。

更像是，每个Backend MVC框架提供的 urls resolution 功能......例如

1. Django：用于HTML的{% url %}标签和用于python代码的reverse()
2. Rails：HTML等的<%= link_to %>标记..

AngularJS或任何插件是否提供了网址解析功能？

注意：我可以通过为url存储JS变量/对象来实现类似的东西，但这对我来说看起来不是一个好设计

Answer 1

您可以使用UI-Router。它命名为“州”而不是硬编码的网址

https://github.com/angular-ui/ui-router

在您的情况下，您可以使用：

myApp.config(function($stateProvider, $urlRouterProvider) {

$stateProvider
  .state('home', {
    url: "/",
    templateUrl: "partials/home.html",
    controller: 'HomeController'
  })
  .state('searches', {
    url: "/searches",
    templateUrl: "partials/searches.html",
    controller: 'SeachController'
  });

然后在模板中引用它

<a ui-sref="searches">Searches</a>

当您想要处理更复杂的网址时，这会派上用场

.state('book', {
  url: '/books/:bookID/',
  templateUrl: 'partials/book-detail.html',
  controller: 'BookController'
})

模板中的链接

<a ui-sref="book({ bookID: book.id })">{{ book.title }}</a>

然后，您可以使用bookID

访问控制器中的$stateParams.bookID