{"action":"created","issue":{"url":"https://api.github.com/repos/brandonroberts/angularjs-component-router/issues/10","repository_url":"https://api.github.com/repos/brandonroberts/angularjs-component-router","labels_url":"https://api.github.com/repos/brandonroberts/angularjs-component-router/issues/10/labels{/name}","comments_url":"https://api.github.com/repos/brandonroberts/angularjs-component-router/issues/10/comments","events_url":"https://api.github.com/repos/brandonroberts/angularjs-component-router/issues/10/events","html_url":"https://github.com/brandonroberts/angularjs-component-router/issues/10","id":134866020,"number":10,"title":"Component route x bindings","user":{"login":"lucianogreiner","id":2201208,"avatar_url":"https://avatars.githubusercontent.com/u/2201208?v=3","gravatar_id":"","url":"https://api.github.com/users/lucianogreiner","html_url":"https://github.com/lucianogreiner","followers_url":"https://api.github.com/users/lucianogreiner/followers","following_url":"https://api.github.com/users/lucianogreiner/following{/other_user}","gists_url":"https://api.github.com/users/lucianogreiner/gists{/gist_id}","starred_url":"https://api.github.com/users/lucianogreiner/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lucianogreiner/subscriptions","organizations_url":"https://api.github.com/users/lucianogreiner/orgs","repos_url":"https://api.github.com/users/lucianogreiner/repos","events_url":"https://api.github.com/users/lucianogreiner/events{/privacy}","received_events_url":"https://api.github.com/users/lucianogreiner/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2016-02-19T13:35:59Z","updated_at":"2016-02-20T03:58:17Z","closed_at":null,"body":"Hi Brandon.\r\n\r\nIs there a way to pass in component bindings along with a routeconfig?\r\n\r\nI have this scenario i am struggling to fit under routing scenarion while trying to make components as independent as possible having bindings for input/ouput:\r\n\r\n```\r\n// activated via /order/1\r\napp.component('order', {\r\n    template : '\r\n        <h2>Order</h2>\r\n          <div><customer-info customer=\"$ctrl.customer\"></customer-info></div>\r\n          <div><order-products products=\"$ctrl.products\" on-add=\"$ctrl.productAdded(product)\"...</order-products></div>',\r\n    bindings : {\r\n       id : '<'\r\n    },\r\n    controller : function() {\r\n        this.customer = { ... };\r\n        this.products = [ {...}, ... ];\r\n    }\r\n});\r\n\r\n//\"order-products\" component switches between \"product-list\" and \"product-editor\" components\r\napp.component('orderProducts', {\r\n    template : '<product-list products=\"$ctrl.products\" on-click=\"$ctrl.edit\"></product-list></product-editor product=\"$ctrl.product\"></product-editor>',\r\n    bindings : {\r\n        products : '<',\r\n        onAdd : '&'\r\n    },\r\n    controller : function() {\r\n        ...\r\n        this.edit = function() {\r\n           ...\r\n        }\r\n    }\r\n});\r\n```\r\nMy question is: \r\nHow would i be able to call /order/1/products to make order-products display only its product-list (default) and /order/1/products/20 to have order-products to display product-editor for product 20?\r\n\r\nSo i tried:\r\n```\r\napp.component('orderProducts', {\r\n    template : '<div ng-outlet></div>',\r\n    bindings : {\r\n        products : '<',\r\n        onAdd : '&'\r\n    },\r\n    controller : function() {\r\n       ...\r\n    },\r\n    $routeConfig : [\r\n\t{ path: '/', component: 'productList', name: 'ProductList' //, ? bindings },\r\n\t{ path: '/:id', component: 'productEditor', name: 'ProductEditor' //, ? bindings  }\r\n    ]\r\n});\r\n```\r\nSo, if i want to keep productList and productEditor independent, how could i pass on their bindings \"products\" and \"product\" respectively from orderProducts ?"},"comment":{"url":"https://api.github.com/repos/brandonroberts/angularjs-component-router/issues/comments/186501775","html_url":"https://github.com/brandonroberts/angularjs-component-router/issues/10#issuecomment-186501775","issue_url":"https://api.github.com/repos/brandonroberts/angularjs-component-router/issues/10","id":186501775,"user":{"login":"brandonroberts","id":42211,"avatar_url":"https://avatars.githubusercontent.com/u/42211?v=3","gravatar_id":"","url":"https://api.github.com/users/brandonroberts","html_url":"https://github.com/brandonroberts","followers_url":"https://api.github.com/users/brandonroberts/followers","following_url":"https://api.github.com/users/brandonroberts/following{/other_user}","gists_url":"https://api.github.com/users/brandonroberts/gists{/gist_id}","starred_url":"https://api.github.com/users/brandonroberts/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/brandonroberts/subscriptions","organizations_url":"https://api.github.com/users/brandonroberts/orgs","repos_url":"https://api.github.com/users/brandonroberts/repos","events_url":"https://api.github.com/users/brandonroberts/events{/privacy}","received_events_url":"https://api.github.com/users/brandonroberts/received_events","type":"User","site_admin":false},"created_at":"2016-02-20T03:58:17Z","updated_at":"2016-02-20T03:58:17Z","body":"Hi Luciano,\r\n\r\nYou can't provide bindings for route components. The route components are compiled dynamically, so there isn't a way to pass bindings to them. If you need access to the route parameters, you need to use the $routerOnActivate lifecycle hook, which is called right after the route is loaded.\r\n\r\n```\r\n// activated via /order/1\r\napp.component('order', {\r\n    template : '\r\n          <h2>Order</h2>\r\n          <div><customer-info customer=\"$ctrl.customer\"></customer-info></div>\r\n          <div><order-products products=\"$ctrl.products\" on-add=\"$ctrl.productAdded(product)\"...</order-products></div>',\r\n    controller : function() {\r\n        this.$routerOnActivate = function(current, previous) {\r\n            this.id = current.params.id;\r\n        }\r\n        this.customer = { ... };\r\n        this.products = [ {...}, ... ];\r\n    }\r\n});\r\n```\r\n\r\nIf you treat your route components more as containers, with your display components in them, its easier to pass data to those display components.\r\n\r\nI hope this helps"}}