Repository files navigation

This project is a port of the AngularUI team's excellentangular-bootstrap project for use in theFoundation framework.

Do you want to see this in action? Visithttp://pineconellc.github.io/angular-foundation/

Installation is easy as angular-mm-foundation has minimal dependencies - only the AngularJS and Foundation's CSS are required.After downloading dependencies (or better yet, referencing them from your favourite CDN) you need to download build version of this project. All the files and their purposes are described here:https://github.com/pineconellc/angular-foundation/tree/gh-pagesDon't worry, if you are not sure which file to take, opt formm-foundation-tpls-[version].min.js.

When you are done downloading all the dependencies and project files the only remaining part is to add dependencies on themm.foundation AngularJS module:

angular.module('myModule',['mm.foundation']);

• Split Buttons
• Reveal Modal
• Alerts
• Joyride
• Dropdowns
• Tabs
• Offcanvas
• Interchange

We'd gladly accept contributions for any remaining components.

Directivesshould work with the following browsers:

• Chrome (stable and canary channel)
• Firefox
• IE 10 and Edge
• Opera
• Safari

Modern mobile browsers should work without problems.

IE 8 and 9 are not officially supported.

We are aiming at providing a set of AngularJS directives based on Foundation's markup and CSS. The goal is to providenative AngularJS directives without any dependency on jQuery or Foundation's JavaScript.It is often better to rewrite an existing JavaScript code and create a new, pure AngularJS directive. Most of the time the resulting directive is smaller as compared to the orginal JavaScript code size and better integrated into the AngularJS ecosystem.

All the directives in this repository should have their markup externalized as templates (loaded viatemplateUrl). In practice it means that you cancustomize directive's markup at will. One could even imagine providing a non-Foundation version of the templates!

Each directive has its own AngularJS module without any dependencies on other modules or third-pary JavaScript code. In practice it means that you canjust grab the code for the directives you need and you are not obliged to drag the whole repository.

Note: Full test coverage is pending

Directives should work. All the time and in all browsers. This is why all the directives have a comprehensive suite of unit tests. All the automated tests are executed on each checkin in several browsers: Chrome, ChromeCanary, Firefox, Opera, Safari, IE9.In fact we are fortunate enough tobenefit from the same testing infrastructure as AngularJS!

We are always looking for the quality contributions! Please check theCONTRIBUTING.md for the contribution guidelines.

• InstallNode.js which should includenpm
• Install global dev dependencies:npm install -g grunt-cli karma bower
• Instal local dev dependencies:npm install while current directory is foundation repo
• Install test dependencies:bower install

• Build the whole project:grunt - this will runlint,test, andconcat targets
• To build modules, first rungrunt html2js thengrunt build:module1:module2...:moduleN

You can generate a custom build, containing only needed modules, from the project's homepage.Alternativelly you can run local Grunt build from the command line and list needed modules as shown below:

grunt build:modal:tabs:alert:popover:dropdownToggle:buttons:progressbar

Check the Grunt build file for other tasks that are defined for this project.

• Run test:grunt watch

This will start Karma server and will continously watch files in the project, executing tests upon every change.

Add the--coverage option (e.g.grunt test --coverage,grunt watch --coverage) to see reports on the test coverage. These coverage reports are found in the coverage folder.

As mentioned directives from this repository have all the markup externalized in templates. You might want to customize defaulttemplates to match your desired look & feel, add new functionality etc.

The easiest way to override an individual template is to use the<script> directive:

<scriptid="template/alert/alert.html"type="text/ng-template"><divclass='alert'ng-class='type && "alert-" + type'><buttonng-show='closeable'type='button'class='close'ng-click='close()'>Close</button><divng-transclude></div></div></script>

If you want to override more templates it makes sense to store them as individual files and feed the$templateCache from those partials.For people using Grunt as the build tool it can be easily done using thegrunt-html2js plugin. You can also configure your own template url.Let's have a look:

Your own template url isviews/partials/mm-foundation-tpls/alert/alert.html.

Add "html2js" task to your Gruntfile

html2js: {  options: {    base: '.',    module: 'ui-templates',    rename: function (modulePath) {      var moduleName = modulePath.replace('app/views/partials/mm-foundation-tpls/', '').replace('.html', '');      return 'template' + '/' + moduleName + '.html';    }  },  main: {    src: ['app/views/partials/mm-foundation-tpls/**/*.html'],    dest: '.tmp/ui-templates.js'  }}

Make sure to load your template.js file<script src="/ui-templates.js"></script>

Inject theui-templates module in yourapp.js

angular.module('myApp', [  'mm.foundation',  'ui-templates']);

Then it will work fine!

For more information visit:https://github.com/karlgoldstein/grunt-html2js

• Bump up version number inpackage.json
• Commit the version change with the following message:chore(release): [version number]
• tag
• push changes and a tag (git push --tags)
• switch to thegh-pages branch:git checkout gh-pages
• copy content of the dist folder to the main folder
• Commit the version change with the following message:chore(release): [version number]
• push changes
• switch back to themain branch and modifypackage.json to bump up version for the next iteration
• commit (chore(release): starting [version number]) and push
• publish Bower and NuGet packages

Well done! (If you don't like repeating yourself open a PR with a grunt task taking care of the above!)

Again, many thanks to the AngularUI team for the angular-bootstrap project.