2

Newbie using AngularJS 1.5 with ES6, a component-based design and the new Component Router.

Let's consider a simple Survey application. Any given Survey has an instructions page and a list of Questions.

When the end user accesses a given Survey, he must be shown the instructions page. He must then navigate through the different Questions, which may span several pages. Upon reaching the last Question page, he must be shown a summary page with all his answers.

Ideally, I would like to have the following route mappings:

  • /surveys/:id : alias to /surveys/:id/instructions
  • /surveys/:id/instructions : displays the survey instructions
  • /surveys/:id/entry : displays the survey for entry by the end user
  • /surveys/:id/summary : display a summary of all survey answers entered by the end user

Ideally, the SurveyComponent (mapped to /surveys/:id) would load the Survey on route activation ($onRouterActivate method) and expose the retrieved Survey to its child components through its <ng-outlet/> template tag. The child components, mapped to the correct sub-routes, would then bind to this Survey and render the appropriate display.

I have been unable to achieve this, as it seems that <ng-outlet/> cannot be used to send data to child components.

Is my approach correct and am I missing something? Or is the route/sub-route mechanism inappropriate for this?

Spiff
  • 2,266
  • 23
  • 36
  • How about using service for this? You can initiate survey state in parent component and then use it through the same service in child components, – Yevgeniy.Chernobrivets Apr 29 '16 at 19:51
  • I hadn't thought of that. I was equating service to back-end service and so remote call, which isn't what I need here. But you're right that it could simply hold the shared survey for access between the different components. – Spiff Apr 29 '16 at 19:54
  • Service could be much more than back end calls. Actually one of the angular patterns which i have encountered before suggests to keep your controller as thin as possible and delegate all calls to the service which holds state. That way you can much easier share state between different parts of application. – Yevgeniy.Chernobrivets Apr 29 '16 at 20:10
  • Yes I understand. I'm worried about the service becoming a global variable in disguise though - it seems that binding objects through well-established contracts would be cleaner, don't you think? – Spiff Apr 29 '16 at 20:13
  • 1
    As long as you use DI it won't become global variable. You can think of it as of been contract too actually. – Yevgeniy.Chernobrivets Apr 29 '16 at 20:15

0 Answers0