Permalink
Browse files

feat: add support for loading without CSS

- Add support for loading components without bringing along the CSS,
  which is necessary for SystemJS/JSPM users

Closes #5696
1 parent daf3b2e commit de504fb5125a0da820e7861d1d7bf985dd51aa2b @onlywei onlywei committed with wesleycho Mar 26, 2016
View
@@ -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
View
@@ -28,6 +28,7 @@ module.exports = function(config) {
// list of files to exclude
exclude: [
'src/**/index.js',
+ 'src/**/index-nocss.js',
'src/**/docs/*'
],
@@ -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;
View
@@ -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');
@@ -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;
@@ -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');
@@ -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;
@@ -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');
@@ -0,0 +1,7 @@
+require('./position');
+
+var MODULE_NAME = 'ui.bootstrap.module.position';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.position']);
+
+module.exports = MODULE_NAME;
@@ -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');
@@ -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;
@@ -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');
@@ -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;
View
@@ -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');
@@ -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;
@@ -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');

0 comments on commit de504fb

Please sign in to comment.