i want to implement Angular JS, Angular JS UI plugins and bootstrap in my ASP MVC 5 apps. Some people say Jquery is still in use in Angular JS part, so could any one here please explain when and where i would need to use JQuery in Angular Js code?
Angular doesn't include jQuery but a light-weight plugin called jq-lite. This provides a lot of the methods that jQuery does, but not all of them.
It specifically has to do with Angular.element. You can take a look at the documentation here
https://docs.angularjs.org/api/ng/function/angular.element
jqLite is a tiny, API-compatible subset of jQuery that allows Angular to manipulate the DOM in a cross-browser compatible way. jqLite implements only the most commonly needed functionality with the goal of having a very small footprint.
Basically, there are a couple of pointers to keep in mind
Keep all DOM logic outside of the controllers. Use custom directives on attributes for that.
Instead of simulating mouse events, use their angular counterparts. Examples include ng-click and ng-mouseover. Add these directives to the elements in the form of attributes.
Instead of adding classes, use ng-class
If you are using jquery or jqlite, be sure to include the jquery script before the angular script.
Related
Can i traverse the DOM in angular like jquery ? In jquery there are multiple functions like parent(),siblings(), find(), children() etc... like this, Is there any functions in angularjs?
Is there any 'this' keyword in angular DOM traverse like jquery where in jquery this means the current element ?
Any reference links will be more helpful.
Angular comes with a cut down bundled version of jQuery, called jQuery lite:
Docs
In the main, full blown Jquery and Angular can live together, however it is recommended not to use them at the same time - there is generally a much better angular way of achieving what you need to do. For instance testing your logic will be easier.
"This" in your example would refer to something off the current controller and on that controller's scope. It is recommended that you use angular to control and manipulate that element in angular.
Our project uses various jquery plugins. We are trying to convert it into angularjs. What is the right approach in terms of implementing such a functionality in angular perspective. is it correct to a write directive for each plugin and call the jquery plugin internally it or do we have any standard approach.
TIA
Try to use Angularjs plugins rather than jquery plugin
If you are using jquery plugin then you have to take care of $digest cycle because your jQuery plugin may have setTimeout() inside which make angular out of $digest loop, so it may be possible that you may got trouble in getting $scope values.
I've built a webpage using html, css, javascript, and jquery. I just started learning Angular.js. My question is do I have to rebuild the site in order to meet certain angularJS conventions or is everything I will be adding for Angular unobtrusive to my previous built code?
It is actually recommended that you NOT use jquery with angular for starters. To get the most out of angular you will most likely have to re-architect your website. The reason for this is that Angular is a framework; jquery is a library. Their concerns are different.
When we think in Angular terms, we think about:
Views, not DOM elements
Directives, not event bindings
Models as a projection of view
Functionality separation
See here for more in depth explanation: http://www.ng-newsletter.com/posts/angular-for-the-jquery-developer.html
I am quite new in Angular world. I am working on an application which involves Angular JS. I've been confronted with the requirement to implement custom scrollbar. My application does have jQuery too, but so far most part of my project uses Angular. So should I be using some jQuery widget or implement it via Angular.
If Angular, can you provide me pointers on how should I proceed?
You should probably implement it in the Angular way, i.e., building / using a custom Angular's directive:
http://docs.angularjs.org/guide/directive
Learning resources for Angular:
https://github.com/jmcunningham/AngularJS-Learning
You can always use jQuery plugins / widgets in an Angular app, but in that case the best way is to encapsulate each plugin within a directive. Angular-UI is a project which does that for several components, including Twitter Bootstrap:
http://angular-ui.github.io/
I'm aware of angular-perfect-scrollbar, a simple Angular's directive for perfect-scrollbar, but haven't tested it yet:
https://github.com/itsdrewmiller/angular-perfect-scrollbar
http://www.yuiazu.net/perfect-scrollbar/
Depending on what your requirements are, you can style your scrollbars strictly in CSS and not need any JavaScript:
http://css-tricks.com/custom-scrollbars-in-webkit/
I was reading that AngularJS comes with a lite version of jQuery. However I keep hearing reference to people who talk about Angular and jQuery going together. I even checked out ng-grid and noticed that it says:
Angular Data Grid written in AngularJS and jQuery by the AngularUI Team
So if I do use Angular just when would I need jQuery and what does the version that comes as part of AngularJS not provide?
jQLite is a very stripped-down version of jQuery. jQLite is enough for angular to work. This is to minimize dependencies.
Yet, if you load jQuery before angular, then angular will use jQuery.
Most of the time, you do not need to use jQuery. Even so much that, for beginners, it is advised to leave out jQuery completely as there would be a tendency to use jQuery when there is an easy / angular way. There has been so many examples on this (mostly showing and hiding elements through jQuery when there are ngShow and ngHide directives).
Later on, when you start to write directives, you then may need to add jQuery.
ngGrid possibly does many things for which jqLite would not suffice. Thus, they used jQuery.
Documentation and features of jqLite:
http://docs.angularjs.org/api/angular.element