Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
What kind of conflicts happen when both Jquery and AngularJS are used together ?
Angular is a framework. jQuery is a library for working with DOM. Only one of components of Angular framework called directive work with DOM, and they do use jQuery to do that. Actually, it uses its subset called jqLite. It's a personal choice whether you should use jQuery for manipulating DOM in custom directives or not, but since Angular itself uses it, I see no reason to not use it. And certainly, there will be no conflicts when Angular and jQuery are used together. In fact, Angular checks whether jQuery is available and uses it manipulate DOM intead of its built-in library jqLite.
If you're talking about whether in your custom directive's template you should use ng-class instead of adding classes to DOM elements manually, I would advice to use Angular's standard directive ng-class.
According to all best practices, the only place where you can manipulate DOM is from directives. And since you can't modify standard directive, custom directives is the only place where you can manipulate DOM. It's certainly bad practice to manipulate DOM inside controllers or services, regardless of whether you use jQuery or not.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I'm learning ReactJS, I know that react is about declaring the way something should render, giving it some data and poof, when the data changes, it renders those changes.
But if I want to manipulate the DOM, an example change a color, create a accordion, make animations, add and remove a class, etc.
React can do that? Could I migrate my jQuery projects to Reactjs without any problem?
There are many approaches for that task, a complete list is here in the official Docs. Either use React as a Wrapper on top of your jQuery Application or Translate your jQuery App to a React App.
From the official Docs
React is unaware of changes made to the DOM outside of React. It determines updates based on its own internal representation, and if the same DOM nodes are manipulated by another library, React gets confused and has no way to recover.
This does not mean it is impossible or even necessarily difficult to combine React with other ways of affecting the DOM, you just have to be mindful of what each is doing.
The easiest way to avoid conflicts is to prevent the React component from updating. You can do this by rendering elements that React has no reason to update, like an empty .
Here is a medium article that may help you.
How-my-team-converted-our-website-from-jquery-to-react-in-small-steps
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
My question is the following. Should I avoid using any kind of jQuery code in Angular application as it seems legit to have only one thing interacting with DOM.
Another question is if anyone came across problems where he couldn't find any other solution but writing a quick hack with jQuery.
Thank YOU!
Yes it's a bad practice, but sometimes it will save you much time, especially when you are looking for a plugin,
Do it when necessary only, and keep a note to switch it back when other solutions are available.
The first thing you should do is to read this thread on SO "Thinking in AngularJS" if I have a jQuery background?. This will give you some perspective.
When it comes to Angular, it the model that drives the view and most of the times direct DOM manipulation is not required.
For example if you are using DOM manipulation to show\hide element, add remove class or set style, then better to use ng-show\ng-class\ng-style directive.
But there are cases when DOM manipulation is required and that is the time you write directives and either use jqLite or jQuery to manipulate DOM.
My suggestion would be to avoid jQuery unless you have to incorporate a jquery plugin that is dependent on jQuery.
While developing always look if the inbuilt directives that can serve your purpose. If not can jqLite be used to achieve what is desired. Your final resort should be jQuery.
Well it's just two large resources, which makes your app "heavy". Otherwise it's only a preference thing. Personally I don't use jQuery with any of the reactive frameworks (Vue, React nor Angular).
Remember that anything jQuery can do, you can do with vanilla JS.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
Well, I wish we could list the best alternatives to jQuery for use with AngularJS, taking into account compatibility with AngularJS and the ability to manipulate the styles (css), besides the possibility of using effects such as fadeIn, fadeOut, slideDown, slideUp, etc.
As based on the response to comment propose to take into consideration the following factors:
Compatibility with AngularJS.
Handling of styles.
Handling events.
Effects
...
The idea is that this thread is helpful when alternatives to jQuery to
work with AngulaJS.
Well, I would just use vanilla javascript to do the DOM manipulation. Styles and events would be possible within angular.
And as far as effects are concerned, a simple library like animate.css can help!
So in short,
Compatibility with AngularJS. - Its vanilla Javascript so no issues here
Handling of styles. - By handling of styles, if you mean using conditional styles, it could be accomplished by angular's ng-class
Handling DOM. - Most of the DOM manipulations can be handled by pure javascript. If you still need a lightweight library go for one of these
ryejs or nodelist or use jqlite that comes bundled with angular
Handling events. - As you are going to be using angularJs, I presume you would be using angular's event model.
Effects - Definitely animate.css
tl;dr: Use angular for all of this, not jquery.
First of all, you can(must) do all of this with angular. Or there is no point to use angular at all. I mean this is very bad practice to manipulate dom directly or do other jquery-style things. Angular provide much more modern approach for all of this things (via built-in and custom directives and etc.).
As the second point - what's wrong with jquery? You're able to use jquery with angular. It's a common practice, because some of third-party libs have a jquery dependency.
And the last one - Angular have built-in jqlite inside, so you're able to do some stuff in this way
As a light-weigth alternatives to jquery you can use zeptojs. But again - this is weird. And I didn't sure how much zepto is better than jqlite.
And as a last point - you can do everything with pure js. But you should keep in mind point about browser's support
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm writing a hybrid app with HTML5, JavaScript and CSS for Android 4.0+ and iOS 7.0+. I was wondering: does JavaScript consumes much memory of the smartphone? Basically my script will: parse objects, handle events, Ajax calls, update the view, etc. I was considering about use jQuery o Angular.js too.
I'm focusing on performance and smooth experience.
Thanks!
As Ari Lerner writes about AngularJS in ng-book, "When we mix Angular into the flow, it extends this normal browser flow to create an Angular context. The Angular context refers specifically to code that runs inside the Angular event loop, referred to as the $digest loop." This is good for updating the view with a JavaScript library.
Both AngularJS and jQuery are extremely efficient, and can be used together to meet the needs listed above.
In my opinion, the optimal JavaScript library for mobile is jQuery Mobile.
https://docs.angularjs.org/misc/faq
Angular JS uses Jquery for some of its operations, and uses its own built in version if none is declared. I would suggest reading the documentation for a full grasp.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I am new to AngularJS framework and I am trying to get slide effect same as jQuery provides, I did google too much but didn't find anything related to it. So if any one has any idea about that please guide me to achieve that thank you.
You might find AngularUI useful if you want to animate DOM object insertion (check the animate directive).
---- Update -----
Newer versions of Angular (1.1.4+ I believe) add a ngAnimate directive especially made for adding CSS animation to Angular apps. Check the offical docs (http://code.angularjs.org/1.1.4/docs/api/ng.directive:ngAnimate) or http://www.nganimate.org/.
You can (and should) use the jQuery slide, but wrap it in an angular directive. Check the docs about directives and also this video.
In general, you should not be using jQuery directly with Angular, even in directives. It is a last resort. Here is another good post on the topic here on SO.
"Thinking in AngularJS" if I have a jQuery background?
In my humble opinion ui.bootstrap covers this issue, for instance this basic example http://surecode.me