Menu icon Foundation
Foundation5 topbar & FoundationApps DONE!

Asked alot of questions on here about getting the topbar in foundation or using foundation Sites components in apps and vice versa. Well after a long read of a lot of code im finally there . . I think

It still has ALOT of work that need to be done but it combines-

- All Elements of FoundationApps
- All SCSS for foundationSites - this will be getting changed though as some are repeats
- Most of the JS elements of foundationSites INCLUDING the topbar working thanks to the angular-foundation project :)

Screenshot from 2015 02 15 16 21 23

This goes to show that foundationSites and foundationApps can be used together and work, it also shows that foundation apps can be used WITHOUT angular routing. :) :) for demo thats constantly being updated see here

http://relutiondev.github.io/foundationUltra/

If i get enough interest il finish the work and release on github so please if you like this or ind it usefull please show some appreciation with that little help button below :)

top-barappssitesangularF5components

Asked alot of questions on here about getting the topbar in foundation or using foundation Sites components in apps and vice versa. Well after a long read of a lot of code im finally there . . I think

It still has ALOT of work that need to be done but it combines-

- All Elements of FoundationApps
- All SCSS for foundationSites - this will be getting changed though as some are repeats
- Most of the JS elements of foundationSites INCLUDING the topbar working thanks to the angular-foundation project :)

Screenshot from 2015 02 15 16 21 23

This goes to show that foundationSites and foundationApps can be used together and work, it also shows that foundation apps can be used WITHOUT angular routing. :) :) for demo thats constantly being updated see here

http://relutiondev.github.io/foundationUltra/

If i get enough interest il finish the work and release on github so please if you like this or ind it usefull please show some appreciation with that little help button below :)

This post has been closed. No new replies can be added.

Rafi Benkual over 4 years ago

This is great! I'll be downloading and trying it out today!

Jason Demitri over 4 years ago

@Rafi im still working on it so may not be advised as of yet got most of my grunt tasks done jst working out one last part . . . maybe u could help . . .

in the directives it lists the url to a template in the same folder but its declared from root . . which lead to a different location in my design . . and so ive added this . . .

(function() {
'use strict';

// Added this to make angular components more agile in location
var scripts = document.getElementsByTagName("script")
var currentScriptPath = scripts[scripts.length - 1].src;

angular.module('foundation.notification', ['foundation.core'])

to the top of every directive and then this in the url link

 templateUrl: currentScriptPath.replace('notification.js', 'notification-set.html'),

meaning it will work from the CWD to find the template . . a cool fix I thought meaning the angular directives are more modular . . . only catch is that if foundation update the directives il have to do the change for each update . . .

Which option sounds best to you (OR ANYONE?)
1. Put a suggestion on the github page wil a pull request for the change ? (dont know if im good enough to so this)
2. Anyone know of a java snipet or grunt tool that can . . um . . look for this line an ammend it ?

Thoughts ?

Geoff Kimball over 4 years ago

We definitely need a global config setting to change what directory component templates are in.

However, we've also gotten some requests to use the Angular template cache, which would just pack all of those templates into one file. That would certainly also make distribution easier.

Jason Demitri over 4 years ago

Think i read up somewere about being able to use requireJs to sort of autoload them but then there are other sources including the angular website that say they wouldnt might give it a try though