How is AngularJS organized?

Question

JavaScript

Welcome all!
Please explain the logic of the script/action.
How does the browser understand what is needed here:

render HTML/CSS?
How are these curly braces {{}} arranged?
I will be very grateful

Answer 1

Angular takes HTML and parses it (not with regulars, because parsing HTML with regulars is not very convenient). An entry like {{var}} is nothing more than a shorthand notation for the ng-bind directive:

<div>Hello, {{name}}</div>
<!-- Эквивалентно -->
<div> Hello, <span ng-bind="name"></span></div>

Once the template is fully rendered, Angular can start applying directives to elements. I don’t remember 100% here, but it seems like Angular stupidly traverses all the elements of our fragment and tries to find registered directives. This is convenient, then we have a period of simple HTML preprocessing, and then we ask the browser to parse this business, then work exclusively with the DOM. The browser will do most of the dirty work for us.
Directives - if greatly simplified, they are a simple function (link) that has access to an element, its attributes and scope. The latter is used as a layer designed to separate the interaction between the controller and the view, it is this thing that is responsible for data binding and general data exchange between the controller, which is the application logic, and the view (what is in the link).
The ngBind directive, which is used in our case, listens for changes to the variable in the scope and, when it waits for them, changes the content of the element through the DOM.