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.
Related
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.
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 am learning what logic to put in Angular's various components, but am left unsure of the Angular-way to handle manipulation of the $location.
I have some code that I would like to convert to Angular. It takes the document.referrer and based on various factors, may scroll to an anchor in the page (/page#scrollTo).
Where would one put the logic for this in Angular? It does not seem suitable for a controller.
For your anchor scroll example, Angular provides an $anchorScroll service: https://docs.angularjs.org/api/ng/service/$anchorScroll. In the docs example, $anchorScroll is used within a $controller. This would be a simple solution when using angular-route.js.
If instead using angular-ui-router.js, then scrollTo's would likely be handled by the $urlRouteProvider. This SO answer: What is the difference between angular-route and angular-ui-router? provides good info about the added functionality of ui-router.
I wanted to know, If we want to manipulate the DOM. Where we should do that.
Is it in a Controller or a directive or somewhere else ?
I have read somewhere that manipulating the DOM in controller should be avoided. Is it correct?
You should use Angular JS Directive for DOM manipulations. DOM Manipulations should not exist in Controllers, Services or anywhere else but in Directives.
One of the nicer features of AngularJS is the framework's ability to separate the roles of the model, the view, and the controller. The separation is clean enough that you shouldn't need to manipulate the DOM directly from code inside the controller. Instead, the controller only manipulates the model, which influences the view through data bindings and directives. The end result is a clean and testable.
Take a look at this
Video - This video tutorial covers manipulating the DOM in AngularJS using directives with a link function.
Best practice is:
Dom manipulations only in directives.
Read here
I'm trying to find the way of incorporating AngularJS into existing application. Application is modular, so every module has HTML markup and JS script files. Modules are loaded with requirejs and jQuery (for loading markup).
I would like to use AngularJS features in some of the modules, having in mind the possibility of migrating to AngularJS in future. So ideally I want something like this:
define([ 'angular' ], function (angular) {
return function (element) {
// The "element" parameter contains the reference to
// the detached DOM node that contains the markup.
// And what I think should be done is compiling
// or initializing AngularJS with the given DOM HTML fragment
// and with controller, etc.
angular.doSomething(element, ...something...);
// The application module engine will inject the returned element
// into the DOM tree.
return element;
};
});
Any ideas? Thanks!
Just following the tutorial, specifically Step 2 (http://docs.angularjs.org/tutorial/step_02) will show you how to just do a single controller on the page with some simple functionality.
You can just use this, or you can start expanding it by modularizing it as in Step 7. By creating an module you can then add directives and services and take advantage of all that Angular offers. You don't necessarily need to configure routes or anything, but by creating an app module, you can incorporate other modules or services offered throughout the web or by Angular.
AngularJS isn't designed to really run alongside other frameworks and be used for little bits and pieces. You could hack it together to do this but it'll probably become very messy. Angular is much better suited to becoming the basis of the entire app.
Something like jQuery is great for dropping into an app and adding functionality, but angular is far more complex.
If you do want angular to take control of certain parts though, take a look into the ng-controller directive and how it works. Then in your standard markup you'd just add the ng-controller attribute to any element, and then add a new angular controller to your javascript. It would then manage that DOM element.
Look into angular controllers for more info on that. But as I say, I'd suggest making the app entirely Angular rather than trying to just add angular bits to it