I started using angular1 recently and there is a task to organize routing.

Roughly speaking, for an online store, type:

/catalog/idCategory/idProducts (/catalog/mobile/meizu, /catalog/tv/sony)

Transition can be in all 3 ways. For example, in the catalog we have all the products. In categories, respectively, the goods by category and further already the product itself.

Having read the information, I still tend to ui.route , but I just can’t implement this hierarchy. As I understand it, each page has its own controller.

Ie routing should be like:

 .state('tasks', { url: "/catalog", templateUrl: "templates/catalog.html", controller: "catalogCtrl" }) .state('catalog.category', { url: "/catalog/:catalogId", templateUrl: "templates/catalogCateg.html", controller: "catalogCategCtrl" }) .state('catalog.category.details', { url: "/catalog/:catalogId/:idproduct", templateUrl: "templates/productPage.html", controller: "productPageCtrl" })

And in controllers, we have to define $stateParams and pass to the url .

Maybe someone has experience of this implementation or interesting examples, links. It would be a perfect ready-made example. I can disassemble. I read the documentation on ui.route .

He did a lot of things from there, but it still doesn’t work out.

  • The transition can be in all 3 ways - what paths are there in mind? - Grundy
  • @Grundy / catalog - all products, / catalog / category - products from a certain category, / catalog / category / product - product page, in url, there should be its category and product id - bogopodoben

2 answers 2

ui-router allows you to quite flexibly configure which parts to insert, as well as how to generate a url.

Specifically for the formation in this case, you can apply nested states , each of the state will be responsible for its own part of the url and view .

Since it is not known in what form everything should be displayed in the end, we will only show the view for the current state.

 angular.module('app', ['ui.router']) .config(function($stateProvider, $urlRouterProvider) { //$urlRouterProvider.otherwise('/catalog'); $stateProvider.state('catalog', { url: '/catalog', template: '<div>Catalog</div>', controller: function() { } }) .state('catalog.category', { url: '/:catId', views: { '@': { template: function($stateParams) { return '<div>Category:' + $stateParams.catId + '<ui-view/></div>'; }, controller: function() {} } }, }) .state('catalog.category.product', { url: '/:pId', views: { '@': { template: function($stateParams) { return '<div>Product:' + $stateParams.pId + '</div>'; }, controller: function() {} } } }); }); 
 <script src="https://code.angularjs.org/1.5.6/angular.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.0/angular-ui-router.js"></script> <div ng-app="app"> <a ui-sref="catalog">Catalog</a> <a ui-sref="catalog.category({catId:10})">Category</a> <a ui-sref="catalog.category.product({catId:10,pId:1})">Product</a> <br/>View: <div ui-view></div> </div>

  • Thank you, that is necessary! + - bogopodoben
  • @bogopodoben, it is also possible to specify that the child views are shown inside the parent, and not replace them - Grundy
 .state('catalog', { url: "/catalog", views: { catalog:{ templateUrl: "templates/catalog.html", controller: "catalogCtrl", controllerAs: "Catalog" } } }) .state('catalog.category', { url: "/catalog/:catalogId", views: { category:{ templateUrl: "templates/catalog.html", controller: "catalogCategCtrl", controllerAs: "Category" } } .state('catalog.category.details', { url: "/catalog/:catalogId/:idproduct", views: { product:{ templateUrl: "templates/productPage.html", controller: "productPageCtrl", controllerAs: "Product" }, resolve: { catalogId: ['$stateParams', function($stateParams){ return $stateParams.catalogId; }], idproduct: ['$stateParams', function($stateParams){ return $stateParams.idproduct; }] } } }); $urlRouterProvider.otherwise('/catalog'); 
 <-- index.php--> <div ui-view="catalog"><div> <-- templates/catalog.html --> <div ui-view="category"><div> <-- templates/catalog.html --> <div ui-view="product"><div>

In the productPageCtrl controller, add the catalogId and idproduct dependencies a little to correct. If the first state is 'catalog', then we have nested states. It is possible after (or instead) url to add abstract: true, then the transition to this state will be prohibited.