Menu icon Foundation
Foundation for Apps Routing

Where do you configure the router to load a partial?

Very excited about using this tool but the documentation seems to be lacking, and you're left with reverse-engineering the sample templates.

Thanks for any help.

appsroutingrouter uiPartials

Where do you configure the router to load a partial?

Very excited about using this tool but the documentation seems to be lacking, and you're left with reverse-engineering the sample templates.

Thanks for any help.

Jacob Brooks over 4 years ago

Hey Dack!

You might have browsed through it, or maybe missed it so I will repost the Docs section for Angular. It is located at:

http://foundation.zurb.com/apps/docs/#!/angular

If you read through that you can see they set up a dynamic way to add routes that makes it super easy. I am still getting used to Foundation for Apps so bare with me but I believe as long as you are working from Client folder, you can go to your partials and create new partials by:

---
name: mail
url: /mail
---

So you add that to the top of your partials page, then code the page as you wanted to originally. While you have gulp watch running it will compile that into the actual routes.js file and create the necessary angular code. It is a really nice feature that makes routing very easy. Let me know if you have any questions.

If you are using a template they gave, take a look at a partial they have already created, change the Name and URL to be what you want your new page to be, replace their code with yours and save. It will get you used to how to work with those files.

Good Luck! 

Adrian P over 4 years ago

What wasn't abundantly clear to me initially, when reading the doc was the use of ui-sref. in your links to trigger the route change
Hopefully this helps others.
HTML
e.g. <a ui-sref="about" href="#">About</a>.

Hans McMurdy over 4 years ago

Yeah the templates don't really give you the "foundation" for building web apps such much as they give you a boilerplate templates which don't even use all the the components....

I have a couple reverse engineered templates and I use ng-repeat and ng-init for basic json templates.

If it helps you or anyone else here are some I made today:
*EDIT:
// This is outdated
https://github.com/HansUXdev/Foundation-Apps-Email
https://github.com/HansUXdev/Foundation-Apps-Travel
https://github.com/HansUXdev/Foundation-Apps-chat

Stephen Saucier over 4 years ago

To load a partial from a specific path, you need single quotes inside the 'src' attribute, as follows:

<div ng-include="" src="'/partials/sidebar.html'"></div>

Tarun Bisht about 3 years ago

Hi,

gulp-watch is not triggering for new templates in foundation for apps. I have to stop gulp or foundation watch and rebuild it to make ui-routing work. Without it routing for new pages doesn't work. However, it works properly on MacOs. 

Node v6.2.2 (tried in old version as well)

gulp CLI v1.2.1

foundation CLI v2.1.0