I'm trying to integration Foundation for Apps into an existing project, so I don't want to use the cli tools to wire everything together. I'm on the Installation page of the docs, and the "Manual Install" sections seems to be the most useful. I also looked at the Angular Overview page.
Suggested Improvements
It would be good to explicitly include the following pieces of information:
What scripts from the dist/js directory do I need to include on my page?
What version of Angular do I need to use?
What do I need to do in my Angular app to use Foundation?
Can I make the Foundation scripts async?
Why I'm Suggesting This
I'm trying to make the following examples, copied from the docs, work:
<img zf-iconic="" icon="thumb" size="medium">
<a zf-open="basicModal" class="button">Open modal</a>
<div zf-modal="" id="basicModal">
<a zf-close="" class="close-button">×</a>
<h3>Back in my days...</h3>
<p>There were 3 Star Wars movies and Disney only made cartoons.</p>
</div>
The manual install section does not say which files from the dist/js directory need to go on the page, so I started with foundation-apps.min.js. When I reloaded the page, I got the error message that Angular was not defined. This is not entirely surprising.
However, I'm not sure what version of Angular I should use. I looked on the pages I linked to above, but couldn't find anything. I guessed that the latest version of 1.x would be a safe bet. However, when I put that on the page via a CDN, I didn't see any difference from when there was no JS at all.
I next saw foundation-apps-templates.min.js. That seemed useful, so I added it was well. Still no result.
Poking around at some examples, I thought that maybe I needed to explicitly create my own Angular app. I did that:
'use strict';
(function() {
angular.module('fitbit-data-export', [
'foundation',
])
.run(function() {
debugger; // this is indeed hit
});
})();
I added that to the page, and now things are working. The story has a happy ending, but I could have gotten here a bit faster if the docs were more fleshed out. Thanks!
I'm trying to integration Foundation for Apps into an existing project, so I don't want to use the cli tools to wire everything together. I'm on the Installation page of the docs, and the "Manual Install" sections seems to be the most useful. I also looked at the Angular Overview page.
Suggested Improvements
It would be good to explicitly include the following pieces of information:
dist/js
directory do I need to include on my page?async
?Why I'm Suggesting This
I'm trying to make the following examples, copied from the docs, work:
The manual install section does not say which files from the
dist/js
directory need to go on the page, so I started withfoundation-apps.min.js
. When I reloaded the page, I got the error message that Angular was not defined. This is not entirely surprising.However, I'm not sure what version of Angular I should use. I looked on the pages I linked to above, but couldn't find anything. I guessed that the latest version of
1.x
would be a safe bet. However, when I put that on the page via a CDN, I didn't see any difference from when there was no JS at all.I next saw
foundation-apps-templates.min.js
. That seemed useful, so I added it was well. Still no result.Poking around at some examples, I thought that maybe I needed to explicitly create my own Angular app. I did that:
I added that to the page, and now things are working. The story has a happy ending, but I could have gotten here a bit faster if the docs were more fleshed out. Thanks!