0

I was writing a small script to automate user actions on a page, which was supposed to run in chrome console once page is opened, and there was a form which couldn't be submitted until all it's text inputs are checked, which were checked only if user puts cursor inside an input and types something. And then I found on the Internet that I could do this code, which triggered the handler required to check the field:

var $e = angular.element(document.getElementsByName("username")[0]);
$e.triggerHandler('input');

So my question is: how does chrome know what angular.element() function is? Isn't it supposed to know only the "pure" (if I could say so) javascript?

Leonid Bor
  • 2,064
  • 6
  • 27
  • 47

2 Answers2

1

how does chrome know what angular.element() function is?

In short i would say angular.js has a global object called angular which has several methods available in the angular namespace in the global window object.

That is same as angular and other libraries like jquery are written in javascript. It only runs in browser when page gets loaded. So, when browser loads every asset then it also gets the stored methods like angular.element(), which are available to use in the page and the same can be achieved in the browser's console. which has a copy of the DOM.

Just like jquery, when jquery is loaded in the browser then jQuery object $() can be used in the page and console too.

Jai
  • 74,255
  • 12
  • 74
  • 103
  • So when browser loads the page, somewhere in this page there is a line like "import angular object and create a variable", right? – Leonid Bor Jan 12 '17 at 12:23
  • `angular = window.angular || (window.angular = {}),` find this line in the angular.js, this line of code makes the angular and its methods available in the global object which is window. – Jai Jan 12 '17 at 18:14
1

Chrome is powered by V8 Javascript Engine. When a web page is requested, let say index.html requested, roughly the execution flow is about as follows:

  1. The HTML document gets downloaded.
  2. The parsing of the HTML document starts.
  3. HTML Parsing reaches <script src="angular.js" ...
  4. angular.js is downloaded and parsed.
  5. HTML parsing reaches <script src="main.js" ...
  6. main.js is downloaded, parsed and run.
  7. Parsing of HTML document ends.

When the point 4 is reached, angular.js source code is downloaded and parsed. At this stage, a global object angular is created, jQuery Lite is loaded as angular.element and all other angular related functions other stuffs attached with the angular global object.

Now at point 6, your main.js is downloaded and run. In your file you have the following line,

var $e = angular.element(document.getElementsByName("username")[0]);
$e.triggerHandler('input');

When the V8 JS Engine parses and runs the first line, it knows about angular because angular.js file is parsed and attached with windows as angular. Once the engine knows that there is an object called angular in window, then obviously it could access the element attached with the angular object.

Links to understand how the javascript is loaded and executed.

  1. SO link about load order and execution.
  2. Another one is here
  3. How do browsers execute javascript

Hope you could understand.

Community
  • 1
  • 1
Thaadikkaaran
  • 5,088
  • 7
  • 37
  • 59