Geek Answers Handbook

Requires bootstrap and jquery in aurelia app

I'm new to Aurelia, so I'm not sure how this should work. I created a new Aurelia project and also installed bootstrap by simply running jspm install bootstrap . I saw in the console that this was also pulling jquery 3.0.0 .

Now my question is: how to use bootstrap.css , bootstrap.js and jquery.js in my project?

First try:

In app.html I tried to do the following:

 <require from="bootstrap"></require>

I tried this because I have the following line in config.js :

 map: { ... "bootstrap": "github:twbs/ bootstrap@3.3.6 ", ... }

This view works in the sense that it loads bootstrap.js , but then gives an error in the browser that it is missing jquery.js . Thus, this does not automatically load jquery for me. This is normal?

Second attempt:

I changed my require to this in app.html :

 <require from="jquery/dist/jquery.js"></require> <require from="bootstrap/css/bootstrap.css"></require> <require from="bootstrap/js/bootstrap.js"></require>

I'm not sure how he knows where to look for bootstrap.js and bootstrap.css files, as they are located in: jspm_packages/github/twbs/ bootstrap@3.3.6 /css/bootstrap.css , etc. But he knows how to find bootstrap files. But not a jquery file.

I have this in my config.js for jquery:

 map: { ... "github:twbs/ bootstrap@3.3.6 ": { "jquery": "npm: jquery@3.0.0 " }, .... }

So basically my question is: how should this work? If require autoload all the necessary files when I <require from="bootstrap"> . Or should I upload them as separate files? If so, then how do I load jquery in this case?

+5
source share
3 answers

The require element is for pulling Aurelia components, html templates (which are Aurelia components), or css files. This is not for downloading javascript files.

The Aurelia skeleton shows how to load Bootstrap into the main.js file:

 import 'bootstrap';

- the first line in the file. This will initialize Bootstrap JavaScript code.

In app.html the require element is used to load Bootstrap css:

 <require from="bootstrap/css/bootstrap.css"></require>

Importing jQuery into a file is also quite simple:

 import $ from 'jquery';

Then you can use the $ function, but you would like to.

+8
source

I had this problem, and then the last node and npm were installed, and then from the training page on aurelia website: -

To get Bootstrap setup, we start by installing the library itself using NPM. To do this, run the following command at a command prompt:

 npm install bootstrap --save

Further, since Bootstrap uses jQuery, we also want to install jQuery, for example:

 npm install jquery@ ^2.2.4 --save

then restarted the application when the packages were updated and started again ... FIXED!

+1
source

after adding import 'bootstrap'; in main.js, you may need to stop the application (Ctrl + c) and start it again using au run --watch to make it work.

0
source

More articles:


All Articles