zurb / foundation-apps

The first front-end framework created for developing fully responsive web apps.
http://foundation.zurb.com/apps
MIT License
1.58k stars 216 forks source link

Angular installation docs are lacking #797

Open NickHeiner opened 8 years ago

NickHeiner commented 8 years ago

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:

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 commented 8 years ago

Feel free to contribute to the documentation in the new fork