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

Commit

Permalink
feat(loading): add "index-nocss.js" files
Browse files Browse the repository at this point in the history
This allows SystemJS users to load the individual
modules without setting up CSS loading. Some build
processes with using SystemJS would rather have
a custom, separate CSS loading solution. This
commit allows that to happen.
  • Loading branch information
Wei Wang committed Mar 26, 2016
1 parent 03e6047 commit c3970ed
Show file tree
Hide file tree
Showing 16 changed files with 102 additions and 80 deletions.
27 changes: 23 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down Expand Up @@ -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';
Expand All @@ -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
Expand Down
1 change: 1 addition & 0 deletions karma.conf.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ module.exports = function(config) {
// list of files to exclude
exclude: [
'src/**/index.js',
'src/**/index-nocss.js',
'src/**/docs/*'
],

Expand Down
9 changes: 9 additions & 0 deletions src/carousel/index-nocss.js
Original file line number Diff line number Diff line change
@@ -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;
11 changes: 1 addition & 10 deletions src/carousel/index.js
Original file line number Diff line number Diff line change
@@ -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');
13 changes: 13 additions & 0 deletions src/datepicker/index-nocss.js
Original file line number Diff line number Diff line change
@@ -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;
15 changes: 1 addition & 14 deletions src/datepicker/index.js
Original file line number Diff line number Diff line change
@@ -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');
9 changes: 9 additions & 0 deletions src/datepickerPopup/index-nocss.js
Original file line number Diff line number Diff line change
@@ -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;
11 changes: 1 addition & 10 deletions src/datepickerPopup/index.js
Original file line number Diff line number Diff line change
@@ -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');
7 changes: 7 additions & 0 deletions src/position/index-nocss.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
require('./position');

var MODULE_NAME = 'ui.bootstrap.module.position';

angular.module(MODULE_NAME, ['ui.bootstrap.position']);

module.exports = MODULE_NAME;
9 changes: 1 addition & 8 deletions src/position/index.js
Original file line number Diff line number Diff line change
@@ -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');
10 changes: 10 additions & 0 deletions src/timepicker/index-nocss.js
Original file line number Diff line number Diff line change
@@ -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;
10 changes: 1 addition & 9 deletions src/timepicker/index.js
Original file line number Diff line number Diff line change
@@ -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');
12 changes: 12 additions & 0 deletions src/tooltip/index-nocss.js
Original file line number Diff line number Diff line change
@@ -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;
14 changes: 1 addition & 13 deletions src/tooltip/index.js
Original file line number Diff line number Diff line change
@@ -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');
11 changes: 11 additions & 0 deletions src/typeahead/index-nocss.js
Original file line number Diff line number Diff line change
@@ -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;
13 changes: 1 addition & 12 deletions src/typeahead/index.js
Original file line number Diff line number Diff line change
@@ -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 c3970ed

Please sign in to comment.