How to include jQuery to my app?

Question

I'm developing the app based on angular gulp generator . I want to use the angular-ui and bootstrap components. I am able to build the application, but generated index.html file contains script tags for boostrap, angular ui but jquery is missing here.

I have jquery in bower.js file and I ran bower install command. It's installed in bower_components directory.

Browser console contains the error

Error: Bootstrap's JavaScript requires jQuery
throw new Error('Bootstrap\'s JavaScript requires jQuery')

Is it neccessary inject query to angular app, or why does the error occur?

Answer 1

From the FAQs :

Does Angular use the jQuery library?

Yes, Angular can use jQuery if it's present in your app when the application is being bootstrapped. If jQuery is not present in your script path, Angular falls back to its own implementation of the subset of jQuery that we call jQLite.

Angular 1.3 only supports jQuery 2.1 or above. jQuery 1.7 and newer might work correctly with Angular but we don't guarantee that.

Use jQLite . Guess that's your solution.

Answer 2

The problem is that dear you are using Bootstrap js which require jquery.

On Angular-ui website clearly said only required bootstrap css and anugular js.

The only required dependencies are:

AngularJS (requires AngularJS 1.3.x, tested with 1.3.13). 0.12.0 is the last version of this library that supports AngularJS 1.2.x.

Bootstrap CSS (tested with version 3.1.1). This version of the library (0.13.0) works only with Bootstrap CSS in version 3.x. 0.8.0 is the last version of this library that supports Bootstrap CSS in version 2.3.x.

So according to your question.

Is it neccessary inject query to angular app, or why does the error occur?

It is not necessary at all in the context of angular js.

It is showing error because you are using boostrap js you have to add jquery before loading it. According to bootstrap. Link

Plugin dependencies Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files). Consult our bower.json to see which versions of jQuery are supported.

By default angular used jqulite but if you add jquery before loading angular js it will use jquery.

Hope it helps :).

Answer 3

这应该可以解决您的问题bower install jqlite --save