javascript - Angular 为不同的 url 调用不同的 Controller 方法

Question

我有一个单页应用程序，其中页脚包含关于、常见问题解答、隐私等的多个链接。目前我正在使用 angular-strap modal 来显示每个链接的模式。其代码如下所示:

 <li>
     <a href="#about" id="about" 
     data-modal-class="my_modal gradient-body"
     data-bs-modal="'templates/about.html'">About
     </a>
 </li>

因此，目前我的应用程序的 URL 在单击“关于”链接时不会改变。它只会启动模态。现在我想保持功能不变，但有一个像 mydomain.com/#about 这样的 url 来启动关于框。

我正在使用 $routeProvider 来定义路由，如下所示:

 $routeProvider
    .when('/home', {
      templateUrl: 'templates/map.html'      
    })
    .when('/verify/:code',{
      template : " ",
      controller : 'VerifyReportCtrl'
    })    
    .otherwise({ redirectTo: '/home' });

我想这样做的原因是因为它有助于我的应用程序的搜索引擎优化。目前无法索引“关于”页面内容。

Answer 1

将你的路线修改为

 $routeProvider
    .when('/home', {
      templateUrl: 'templates/map.html'      
    })
    .when('/verify/:code',{
      template : " ",
      controller : 'VerifyReportCtrl'
    })    
    .when('/about',{
      template : "templates/about.html "
    })  
    .otherwise({ redirectTo: '/home' });

并将 HTML 更改为

 <li>
     <a href="#about" id="about" 
     data-modal-class="my_modal gradient-body">About
     </a>
 </li>

然后，如果您点击 anchor 标记，您的网址将类似于 mydomain.com/#about