How to make routing for variable nesting value?

Question

Angular

Hey! I have a product catalog with the following structure:

Каталог
├── Розы
│   ├── Красные
│   ├── Белые
│   └── Розовые
├── Ромашки
│   ├── Лесные
│   │   ├── Белые
│   │   └── Желтые
│   ├── Полевые
│   │   ├── Белые
│   │   └── Желтые

I want the URL for each category or product to match its location in the catalog.
The problem is that both the category and the product can be at the same nesting level, for example

/каталог/розы/красные -> это товар
/каталог/ромашки/полевые -> это категория

If it is possible to somehow handle such a situation in the router? The only option that has come to mind so far is to prescribe everything manually.

Answer 1

if the data does not have an additional property of a category, subcategory or product, then you will then have problems with selecting data
here or observing the structure, and then the roses need to add the "tea" subcategory, for example, even if there is only one such subcategory, or each node must have a set properties, such as type

Answer 2

As far as I know, Angular does not support wildcard in routes.
Secondly, in your case, no one will be able to recognize when the route is a category, and when a product.
You can solve this by inserting additional "indications" and for each possible option, apparently, you will have to make your own route. The result will be something like this:

app.config(['$routeProvider', function($routeProvider) {
        $routeProvider
                 .when('/catalogue/category/:category/:product', {templateUrl: 'xxx.html', controller: 'xxxCtrl'})
                  .when('/catalogue/category/:category/subcategory/:subcategory/:product', {templateUrl: 'xxx.html', controller: 'xxxCtrl'})
                  .when('/catalogue/:category/:category', {templateUrl: 'xxx.html', controller: 'xxxCtrl'});  
 }]);

etc.