Using AngularJS without jQuery, angular.element and $ are both defined, but not equal, so what is "$"?

Question

If we load jQuery and then Angular.js, then angular.element === $ is true and everything is quite clear.

angular.element("<ul>") and $("<ul>") both create an ul element in this case.

However, if we don't load jQuery first, now, angular.element("<ul>") works just like jQuery: it creates an ul element, and $ is defined but $("<ul>") does not creates an ul element but throw an error. So is angular.element exactly jqLite? And what is $ in this case?

Answer 1

Angular does not define $, but I assume you are seeing it as defined because you are using the browser's dev tools (esp. in Chrome). In Chrome $ is defined by default as an alias to document.querySelector() and $$ is an alias for document.querySelectorAll(). If jQuery is loaded into the page $ is not defined by Chrome and is instead deferred to jQuery.

In Angular, angular.element() is by default jqLite, but if jQuery is loated before angular, it again defers to jQuery.