Use ionic with jQuery?

ionic-v1
1

Hi, I am just starting to develop a web app using ionic. I find it is a great tool to build native-style interface. However, I am not familiar with AngularJS. And for some other reasons, our team don’t want to use AngularJS for our front-end framework. So my question is:

Is it still proper to use ionic without AngularJS? Does it work well with jQuery?

2

Hi Denzel,

Yes, I think you can, but you will lose all the AngularJS goodies that comes with Ionic by default and you will have to use the low-level js api which is not fully documented at the moment as far as I know. but if you can dive your way into ionic.js you will get to know all the low-level apis available for you.

3

Hmm, what if I want to use both jQuery and Angular at the same time?
Is that a stupid thing, or is it possible?

4

There is a small implementation of jQuery built in to Angular. If you need the full force of jQuery, there shouldn’t be an issue. I use jquery and angular together all the time.

1 Like
5

How should I implement it into, my project?

6

You just place the jQuery file before AngularJs and you will have full access to jQuery as jQuery() or as using selectors angular.element()

7

Sorry for a late respond, i’ve been busy.

Hmm, I tried to implement jQuery. Seems to be added fine, whenever I try to run commands. It simply won’t work :confused:

I have a simple .addClass, which ain’t working :frowning:

8

Instead of using the shorthand “$” use “jQuery”, btw angularJS has a jQLite version integrated, once you added the full version of jQuery.js inside your html, you will be able to use it through angular.element('.selector') for your example it should be angular.element('.selector').addClass('className').

9

@mhartington I have a doubt regarding using jQuery along with angular. I have side menu which takes care of the UI routing using Angular and the remaining things like event binding/animating/dom manipulation I would like to go for jQuery.

<script src="lib/jquery-1.11.1.js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/app.js"></script>
<script src="js/controller"></script>
  1. After loading these scripts, shall I write my own jQuery code?
  2. Do I need to solve device ready event or it done within Ionic?

Please share your suggestion.

Thanks

10

Also interested in this.

Would the performance decrease when including jquery also?
I assume it does since it has to load and uses memory.

Basically I have this jQuery and jQuery ui animation that I would like to use inside the ionic app.

11

I’d like to implement a two-fingers zoom in my ionic app, which would increase or decrease the font size of every text, based on the ‘rem’ size unit ; something like [this example][1]
(How) can I do something like that in pure angular ?

$("html").css("font-size", "150%")

Thanks.
[1]: http://plnkr.co/edit/QA3oBlGXLJJpRpo2y0Bc?p=preview

12

I used JQuery insted of $ symbol for access full jquery features but not working any one help me?

13

Great. The modularization of angular + simplicity of jquery is a great combo.
Apparently I can suffice with jqlite , but will my app slowdown because I use angular + jquery?? and also when should I really include jquery then…

14

Hi, i am new to ionic. I was trying “cursor focus on next input after the maxlength specified” i tried adding jQuery to my code still using element.next() not able to focus on next input

When i console the element.next() instead of [input] i am getting JQLite {}

Is it possible to use element.next() in ionic or any other option is there to focus cursor on next input?