Question

我正在尝试使用$ routeProivder配置角度路由

所以我有

$routeProvider
.when('/title', {
templateUrl: 'views/title.html',
})
.when('/title/article-name', {
templateUrl: 'views/article-name.html',
})

然而，使用$ locationProvider.html5Mode（true），它会找到页面模板，但是找不到每个链接图像js css文件，因此我的布局被搞砸了（我的页眉和页脚在我的index.html，模板中）从ng-view渲染）。此外，当我点击链接时，它显示“无法获取/title/article-name/sample.js”

我的问题是如何使用角度进行多级路由。

所以喜欢“www.domain.com/why-us/our-company/our-goal”之类的东西。感谢

Answer 1

除了设置html5Mode(true)之外，您还需要设置服务器以支持HTML5模式下的酷网址。请参阅以下official AngularJS documentation的说明：

服务器端使用此模式需要在服务器端重写URL，基本上您必须重写所有链接到应用程序的入口点（例如index.html）

这意味着您需要将任何静态资源重定向到应用程序的起始点。

假设您的sample.js位于您网站www.domain.com的根目录上。

服务器需要重写此文件的网址，使其指向http://www.domain.com/sample.js，而不是http://www.domain.com/title/article-name/sample.js

根据您使用的服务器类型，在服务器端有不同的方法。执行此操作的常用方法是使用/static前缀从URLS提供所有静态资源，并告诉服务器重写此文件夹的所有链接。

在客户端，我在<base href="/" />内使用<head>看到了一些解决方案。

HTML＆lt;基数＆gt; element指定用于文档中包含的所有相对URL的基本URL。

您可以尝试一下，看看它是否适合您 - 请记住，因为在客户端，you need to see the cross browser support就是这样。

我个人会建议服务器端解决方案。

    <html>
      <head>
        <base href="/" />
      </head>
      ....
    </html>

Angularjs多级路由

1 个答案: