Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Sandra Qu
Sandra Qu
577 Points

Angular multiple panels (controllers) on same page; one controller is not loading; using Angular and Foundation Apps

Hello Treehouse Community, I am learning Angular and Foundation Apps use of front matter. I have gone through both relevant courses and am now trying to build my own app, a messages app if you will. I would like to display two panels on the homepage (home.html). I would like the messages to be the right panel, and the left panel (a sidebar) to be generated from a filter based on the messages right panel. home.html does not have a declared controller, and it's front matter is simply the default. I am displaying the sidebar (and would prefer use a controller for that), and have added a ui-view to the page as such

---
name: home
url: /
---

<div class="grid-content medium-3">
My sidepanel accordion here
</div>

<div ui-view>
<!-- I presume this is where messages would show up -->
</div>

The messages.html I have made a child of home by using the front matter

---
name: home.messages
url: /templates/messages.html
controller: MessagesCtrl
---

The messages panel is not loading. How can I declare both the sidebar panel and messages right panel as controllers? How can I get both to load in home.html?