How to use the $ document service in angularJS?

Question

I am very new to angularJS in JS in general and I am a bit confused about using $ document. According to what I understood, $ document provides some jQuery functions. So when I want to remove the element matching the selector, I do this:

$document.remove('.someClassSelector'); 

and the item must be removed from the DOM tree, right? If this is not the right way to manipulate DOM elements and their css in angular.

Answer 1

AngularJS embed the lite version of jQuery (jqLite).

If you want to use jqLite only (without jquery inlining), you can do the following to remove the element:

 angular.element(yourElement).remove() 

$document is a jqLite shortcut for window.document

See: docs.angularjs.org/api/angular.element

Answer 2

A more general way to "angular" hide / show DOM elements is to use the ngHide and / or ngShow directives - declare them in your HTML (hence this statement in Overview :

Angular builds on the belief that declarative code is better than necessary when it comes to creating user interfaces and software components for wiring together.

Similarly, to add / remove CSS classes, use the ngClass directive declaratively. Changes in your models (i.e. $ scope Properties) should result in hiding / showing and adding / removing CSS classes.

If you need something more complex, put the DOM manipulation in custom ones , usually in link functions.

In the jQuery world, we think of events that trigger the DOM manipulation code (for example, call remove () for some element). In the AngularJS world, we want to think about events that cause model changes, which then automatically trigger user interface changes based on our declarative HTML (for example, ng-click sets the $ scope property, which is bound to the ng display on the element). I am still adjusting my thinking.

For most AngularJS applications you do not need to use $ document.