diff --git a/README.md b/README.md index 03b73a701c..f90ef1cd22 100644 --- a/README.md +++ b/README.md @@ -31,12 +31,12 @@ Do you want to see directives in action? Visit http://angular-ui.github.io/boots # Angular 2 -Are you interested in Angular 2? We are on our way! Check out [ng-bootstrap](https://github.com/ui-bootstrap/core). +Are you interested in Angular 2? We are on our way! Check out [ng-bootstrap](https://github.com/ui-bootstrap/core). # Installation Installation is easy as UI Bootstrap has minimal dependencies - only the AngularJS and Twitter Bootstrap's CSS are required. -*Notes:* +*Notes:* * Since version 0.13.0, UI Bootstrap depends on [ngAnimate](https://docs.angularjs.org/api/ngAnimate) for transitions and animations, such as the accordion, carousel, etc. Include `ngAnimate` in the module dependencies for your app in order to enable animation. * UI Bootstrap depends on [ngTouch](https://docs.angularjs.org/api/ngTouch) for swipe actions. Include `ngTouch` in the module dependencies for your app in order to enable swiping. @@ -89,9 +89,10 @@ When you are done downloading all the dependencies and project files the only re angular.module('myModule', ['ui.bootstrap']); ``` -# Webpack +# Webpack / JSPM -To use this project with webpack, follow the [NPM](#install-with-npm) instructions. Now, if you want to use only the accordion, you can do: +To use this project with webpack, follow the [NPM](#install-with-npm) instructions. +Now, if you want to use only the accordion, you can do: ```js import accordion from 'angular-ui-bootstrap/src/accordion'; @@ -112,6 +113,24 @@ This will load all the dependencies (if any) and also the templates (if any). Be sure to have a loader able to process `css` files like `css-loader`. +If you would prefer not to load your css through your JavaScript file loader/bundler, you can choose to import the `index-nocss.js` file instead, which is available for the modules: +* carousel +* datepicker +* datepickerPopup +* position +* timepicker +* tooltip +* typeahead + +The other modules, such as `accordion` in the example below, do not have CSS resources to load, so you should continue to import them as normal: + +```js +import accordion from 'angular-ui-bootstrap/src/accordion'; +import typeahead from 'angular-ui-bootstrap/src/typeahead/index-nocss.js'; + +angular.module('myModule', [accordion, datepicker]); +``` + # Support ## FAQ diff --git a/karma.conf.js b/karma.conf.js index 2178a55536..86429337dd 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -28,6 +28,7 @@ module.exports = function(config) { // list of files to exclude exclude: [ 'src/**/index.js', + 'src/**/index-nocss.js', 'src/**/docs/*' ], diff --git a/src/carousel/index-nocss.js b/src/carousel/index-nocss.js new file mode 100644 index 0000000000..4a383f07db --- /dev/null +++ b/src/carousel/index-nocss.js @@ -0,0 +1,9 @@ +require('../../template/carousel/carousel.html.js'); +require('../../template/carousel/slide.html.js'); +require('./carousel'); + +var MODULE_NAME = 'ui.bootstrap.module.carousel'; + +angular.module(MODULE_NAME, ['ui.bootstrap.carousel', 'uib/template/carousel/carousel.html', 'uib/template/carousel/slide.html']); + +module.exports = MODULE_NAME; diff --git a/src/carousel/index.js b/src/carousel/index.js index 03872ffaf4..e55e95dc36 100644 --- a/src/carousel/index.js +++ b/src/carousel/index.js @@ -1,11 +1,2 @@ -require('../../template/carousel/carousel.html.js'); -require('../../template/carousel/slide.html.js'); -require('./carousel'); - require('./carousel.css'); - -var MODULE_NAME = 'ui.bootstrap.module.carousel'; - -angular.module(MODULE_NAME, ['ui.bootstrap.carousel', 'uib/template/carousel/carousel.html', 'uib/template/carousel/slide.html']); - -module.exports = MODULE_NAME; +module.exports = require('./index-nocss.js'); diff --git a/src/datepicker/index-nocss.js b/src/datepicker/index-nocss.js new file mode 100644 index 0000000000..95b22e2644 --- /dev/null +++ b/src/datepicker/index-nocss.js @@ -0,0 +1,13 @@ +require('../dateparser'); +require('../isClass'); +require('../../template/datepicker/datepicker.html.js'); +require('../../template/datepicker/day.html.js'); +require('../../template/datepicker/month.html.js'); +require('../../template/datepicker/year.html.js'); +require('./datepicker'); + +var MODULE_NAME = 'ui.bootstrap.module.datepicker'; + +angular.module(MODULE_NAME, ['ui.bootstrap.datepicker', 'uib/template/datepicker/datepicker.html', 'uib/template/datepicker/day.html', 'uib/template/datepicker/month.html', 'uib/template/datepicker/year.html']); + +module.exports = MODULE_NAME; diff --git a/src/datepicker/index.js b/src/datepicker/index.js index 4155ba8cc3..f7ff1cfba1 100644 --- a/src/datepicker/index.js +++ b/src/datepicker/index.js @@ -1,15 +1,2 @@ -require('../dateparser'); -require('../isClass'); -require('../../template/datepicker/datepicker.html.js'); -require('../../template/datepicker/day.html.js'); -require('../../template/datepicker/month.html.js'); -require('../../template/datepicker/year.html.js'); -require('./datepicker'); - require('./datepicker.css'); - -var MODULE_NAME = 'ui.bootstrap.module.datepicker'; - -angular.module(MODULE_NAME, ['ui.bootstrap.datepicker', 'uib/template/datepicker/datepicker.html', 'uib/template/datepicker/day.html', 'uib/template/datepicker/month.html', 'uib/template/datepicker/year.html']); - -module.exports = MODULE_NAME; +module.exports = require('./index-nocss.js'); diff --git a/src/datepickerPopup/index-nocss.js b/src/datepickerPopup/index-nocss.js new file mode 100644 index 0000000000..0667a1a3ee --- /dev/null +++ b/src/datepickerPopup/index-nocss.js @@ -0,0 +1,9 @@ +require('../datepicker'); +require('../position'); +require('../../template/datepickerPopup/popup.html.js'); + +var MODULE_NAME = 'ui.bootstrap.module.datepickerPopup'; + +angular.module(MODULE_NAME, ['ui.bootstrap.datepickerPopup', 'uib/template/datepickerPopup/popup.html']); + +module.exports = MODULE_NAME; diff --git a/src/datepickerPopup/index.js b/src/datepickerPopup/index.js index cdd16a23a9..6aa3f64b29 100644 --- a/src/datepickerPopup/index.js +++ b/src/datepickerPopup/index.js @@ -1,11 +1,2 @@ -require('../datepicker'); -require('../position'); -require('../../template/datepickerPopup/popup.html.js'); - require('./popup.css'); - -var MODULE_NAME = 'ui.bootstrap.module.datepickerPopup'; - -angular.module(MODULE_NAME, ['ui.bootstrap.datepickerPopup', 'uib/template/datepickerPopup/popup.html']); - -module.exports = MODULE_NAME; +module.exports = require('./index-nocss.js'); diff --git a/src/position/index-nocss.js b/src/position/index-nocss.js new file mode 100644 index 0000000000..10b8e9e506 --- /dev/null +++ b/src/position/index-nocss.js @@ -0,0 +1,7 @@ +require('./position'); + +var MODULE_NAME = 'ui.bootstrap.module.position'; + +angular.module(MODULE_NAME, ['ui.bootstrap.position']); + +module.exports = MODULE_NAME; diff --git a/src/position/index.js b/src/position/index.js index eabfbee6ac..400b560ca1 100644 --- a/src/position/index.js +++ b/src/position/index.js @@ -1,9 +1,2 @@ -require('./position'); - require('./position.css'); - -var MODULE_NAME = 'ui.bootstrap.module.position'; - -angular.module(MODULE_NAME, ['ui.bootstrap.position']); - -module.exports = MODULE_NAME; +module.exports = require('./index-nocss.js'); diff --git a/src/timepicker/index-nocss.js b/src/timepicker/index-nocss.js new file mode 100644 index 0000000000..14d8b17447 --- /dev/null +++ b/src/timepicker/index-nocss.js @@ -0,0 +1,10 @@ +require('../../template/timepicker/timepicker.html.js'); +require('./timepicker'); + +require('./timepicker.css'); + +var MODULE_NAME = 'ui.bootstrap.module.timepicker'; + +angular.module(MODULE_NAME, ['ui.bootstrap.timepicker', 'uib/template/timepicker/timepicker.html']); + +module.exports = MODULE_NAME; diff --git a/src/timepicker/index.js b/src/timepicker/index.js index 14d8b17447..becf079680 100644 --- a/src/timepicker/index.js +++ b/src/timepicker/index.js @@ -1,10 +1,2 @@ -require('../../template/timepicker/timepicker.html.js'); -require('./timepicker'); - require('./timepicker.css'); - -var MODULE_NAME = 'ui.bootstrap.module.timepicker'; - -angular.module(MODULE_NAME, ['ui.bootstrap.timepicker', 'uib/template/timepicker/timepicker.html']); - -module.exports = MODULE_NAME; +module.exports = require('./index-nocss.js'); diff --git a/src/tooltip/index-nocss.js b/src/tooltip/index-nocss.js new file mode 100644 index 0000000000..c3d461e5ef --- /dev/null +++ b/src/tooltip/index-nocss.js @@ -0,0 +1,12 @@ +require('../position'); +require('../stackedMap'); +require('../../template/tooltip/tooltip-popup.html.js'); +require('../../template/tooltip/tooltip-html-popup.html.js'); +require('../../template/tooltip/tooltip-template-popup.html.js'); +require('./tooltip'); + +var MODULE_NAME = 'ui.bootstrap.module.tooltip'; + +angular.module(MODULE_NAME, ['ui.bootstrap.tooltip', 'uib/template/tooltip/tooltip-popup.html', 'uib/template/tooltip/tooltip-html-popup.html', 'uib/template/tooltip/tooltip-template-popup.html']); + +module.exports = MODULE_NAME; diff --git a/src/tooltip/index.js b/src/tooltip/index.js index 1f5dd4ee44..8e31a9cd0e 100644 --- a/src/tooltip/index.js +++ b/src/tooltip/index.js @@ -1,14 +1,2 @@ -require('../position'); -require('../stackedMap'); -require('../../template/tooltip/tooltip-popup.html.js'); -require('../../template/tooltip/tooltip-html-popup.html.js'); -require('../../template/tooltip/tooltip-template-popup.html.js'); -require('./tooltip'); - require('./tooltip.css'); - -var MODULE_NAME = 'ui.bootstrap.module.tooltip'; - -angular.module(MODULE_NAME, ['ui.bootstrap.tooltip', 'uib/template/tooltip/tooltip-popup.html', 'uib/template/tooltip/tooltip-html-popup.html', 'uib/template/tooltip/tooltip-template-popup.html']); - -module.exports = MODULE_NAME; +module.exports = require('./index-nocss.js'); diff --git a/src/typeahead/index-nocss.js b/src/typeahead/index-nocss.js new file mode 100644 index 0000000000..b048e8147f --- /dev/null +++ b/src/typeahead/index-nocss.js @@ -0,0 +1,11 @@ +require('../debounce'); +require('../position'); +require('../../template/typeahead/typeahead-match.html.js'); +require('../../template/typeahead/typeahead-popup.html.js'); +require('./typeahead'); + +var MODULE_NAME = 'ui.bootstrap.module.typeahead'; + +angular.module(MODULE_NAME, ['ui.bootstrap.typeahead', 'uib/template/typeahead/typeahead-match.html', 'uib/template/typeahead/typeahead-popup.html']); + +module.exports = MODULE_NAME; diff --git a/src/typeahead/index.js b/src/typeahead/index.js index a9b889e910..ae8dc9923c 100644 --- a/src/typeahead/index.js +++ b/src/typeahead/index.js @@ -1,13 +1,2 @@ -require('../debounce'); -require('../position'); -require('../../template/typeahead/typeahead-match.html.js'); -require('../../template/typeahead/typeahead-popup.html.js'); -require('./typeahead'); - require('./typeahead.css'); - -var MODULE_NAME = 'ui.bootstrap.module.typeahead'; - -angular.module(MODULE_NAME, ['ui.bootstrap.typeahead', 'uib/template/typeahead/typeahead-match.html', 'uib/template/typeahead/typeahead-popup.html']); - -module.exports = MODULE_NAME; +module.exports = require('./index-nocss.js');