Angular为不同的url调用不同的控制器方法

Question

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

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

所以目前我的应用程序的 url 在点击 About 链接时不会改变。它只会启动 modal 。 现在我想保持功能不变，但有一个像 mydomain.com/#about 这样的 url 来启动 about 框。

我使用 $routeProvider 来定义路由如下：

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

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

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>

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