javascript - Angular 中单页路由的误解

Question

我认为我对 Angular 在单页应用程序中拦截我的路线的方式有一个根本性的误解。

我认为我的问题非常简单。当我输入网址时:

localhost:3000/streams/

我想加载“流”页面。我认为它的工作方式如下:

1. 我的 Express 服务器接收请求，并使用布局进行响应。

   app.get('/streams/',function(req,res){
    res.render('layout');
   })
   

2. 我的布局页面已呈现。它调用客户端 app.js 并具有 ng-view。

3. Angular 拦截“/streams/”路径，然后调用“streams”模板。像这样:

    $routeProvider
     .when('/',
      {
       templateUrl: '/templates/mainpage'
      }
     )
     .when('/streams/',
      {
       templateUrl: '/templates/streams'
      }
     )
   

出于某种原因，现实是非常不同的。

当我加载'/streams'时， Angular 检索/templates/streams，并且

当我加载 '/streams/ 时，Angular 会检索 /templates/mainpage。

为什么？

<小时/>

这种误解已经困扰我好几天了......

任何帮助都会奖励 5 量子的良好能量。

谢谢。

Answer 1

事实证明，真正的问题有点不同。

正如所描述的那样，Angular 并不知道我指的是“streams”，当我加载“streams/”时，html 具有相对的基础。

基本上，这个相对基础使我看起来好像已经找到了一个模板，即“/streams”，并且现在正在检索另一个模板，即“/”。通过在 html 中添加根库即可简单解决此问题。

 <base href="/">

这应该可以做到。