Skip to content
This repository has been archived by the owner on Sep 10, 2019. It is now read-only.

Angular installation docs are lacking #797

Open
NickHeiner opened this issue Mar 27, 2016 · 1 comment
Open

Angular installation docs are lacking #797

NickHeiner opened this issue Mar 27, 2016 · 1 comment

Comments

@NickHeiner
Copy link

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!

@soumak77
Copy link
Contributor

Feel free to contribute to the documentation in the new fork

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Development

No branches or pull requests

2 participants