特定网址的角度路线答案

【问题标题】：Angular Route for specific url特定网址的角度路线
【发布时间】：2017-05-31 18:56:42
【问题描述】：

我目前正在处理一个 MEAN 堆栈项目，并试图让一个特定的模板显示在特定的 url 上。

目前，如果用户转到 www.myurl/catalog，它会加载 catalog.html 模板，就像任何 /catalog?catagory=productType url 一样。

我希望它在用户转到 /catalog?category=specificProductType 时加载catalogSpecific.html 模板。目前，catalog.html 模板取代了 catalogSpecific.html 模板。我找不到有关此特定问题的太多信息，因此我们将不胜感激。

目前我的路线如下所示：

app/front/app.js

angular.module('app', ['ngRoute',
                    'app.LandingModule.controller',
                    'app.CatalogModule.controller',
                    'app.ProductModule.controller',
                    'app.HeaderModule.directives',
                    'app.FooterModule.directives'
                    ])


.config(['$routeProvider', function($routeProvider) {
  $routeProvider
.when('/', {
  templateUrl: 'html/landing.html',
  controller: 'LandingController'
})
.when('/catalog', {
  templateUrl: 'html/catalog.html',
  controller: 'CatalogController'
})
.when('/catalog?category=specificProductType', {
  templateUrl: 'html/catalogSpecific.html',
  controller: 'CatalogController'
})
.otherwise({
  redirectTo: '/'
});
}]);

【问题讨论】：

标签： javascript angularjs routes

【解决方案1】：

编辑：似乎我错了，默认路由器无法做到这一点。正如 Hadi 在他们的评论中所描述的那样，您可以将“templateUrl”替换为返回给定当前路由的模板 url 的函数。

据我所知，您无法使用内置的角度路由器按照您想要的方式进行路由。

据我所知，您有两个选择：

1：学习使用 ui-router 库（在这里找到：https://github.com/angular-ui/ui-router）

2：将所有路由从 /catolog 发送到控制器/页面，该控制器/页面手动查看您的路由参数并根据该手动重新路由您。（见https://docs.angularjs.org/api/ngRoute/service/$routeParams）

【讨论】：

我尝试了Hadi的建议，但没有成功，我会看看你的链接。谢谢！

【解决方案2】：

尝试像这样使用templateUrl 函数。我没有测试过。

  templateUrl: function($location){
     if($location.category)
         return 'html/catalogSpecific.html';
       else
          return  'html/catalog.html'; 
 },

Demo

【讨论】：

我在我的路线中尝试了以下内容： if($location.search().category = "specificProductType") 我也尝试过傻笑： if($location.search().category == " specificProductType") 没有运气，它只是破坏了我的应用程序。我认为这是正确的方向，但我显然还是做错了（这是我第一次使用 angular）
嘿哈迪，我检查了你的答案，但似乎没有什么不同。我正在尝试匹配 category= 之后的字符串。 /catalog?category=specificProductType 将引导我到我的特定模板，而所有其他类别，/catalog?category=specificProductType#2、/catalog?category=specificProductType#3 等将引导我到通用类别模板。跨度>
嘿哈迪，我能够按照你的例子解决这个问题。我最终得到了 .when('/catalog', { templateUrl: function($location){ if($location.category == "specificProductType") { return 'html/catalogSpecific.html'; } else { return 'html/ catalog.html'; } }, 控制器：'CatalogController' })
这只是展示如何做的示例。
见stackoverflow.com/questions/18423054/…和stackoverflow.com/questions/28442865/…

【解决方案3】：

我可以按照哈迪的例子来解决这个问题：

    .when('/catalog', {
  templateUrl: function($location){
            if($location.category == "specificProductType") {
            return 'html/catalogSpecific.html';         
        } else {
            return 'html/catalog.html';
       }
},
  controller: 'CatalogController'
})

【讨论】：