javascript - 如何避免在 AngularJS 中硬编码 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 文件中的链接。

更像是每个后端 MVC 框架提供的url 解析 功能。例如

1. Django :{% url %} HTML 和 reverse() 的模板标签用于 python 代码
2. 导轨:<%= link_to %> HTML 等的标记。

是否有 AngularJS 或任何插件提供的 URL 解析功能？

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

Answer 1

您可以为此使用 UI-Router。它命名为“states”而不是硬编码的 url

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>

当你想处理更复杂的 url 时，这会派上用场

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

模板中的链接

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

然后您可以使用 $stateParams.bookID 在您的 Controller 中访问 bookID