Front-end interview angular JS

1. What mechanism does angular use for data binding? Detailed Principles

Angularjs two-way data binding, using the Dirty Check (dirty-checking) mechanism. Ng enters the $digest cycle only after the specified event is triggered:
-dom events, such as user input text, click button, etc. (Ng-click)
-XHR Response Event ($http)
-Browser Location Change event ($location)
-Timer event ($timeout, $interval)
-Perform $digest () or $apply ()

2. Dependency Injection (DI)

So that we can create a method of dependent objects without having to instantiate them ourselves. In simple terms, dependency is delivered in an injected manner. In Web applications, angular allows us to create objects such as controllers and directives through DI. We can also create our own dependent objects, and angular can automatically inject them when we want to instantiate them.

3. The difference between compile and link: performance and capabilities

Compile time, compile conversion dom, encountered the binding listener place first saved, there are several save several, to the last summarized into a link function, implemented, improve performance.

function compile(tElement, tAttrs, transclude) { ... }tElement为编译前的elementfunction link(scope, iElement, iAttrs, controller) { ... } iElement为编译后的element，已经与作用域关联起来，所以可以数据绑定

If the instruction only modifies the DOM and does not bind the data, then it is configured in the Compile function, if the instruction is to be data-bound, then it is configured in the link function.

4. Differences between $apply () and $digest ()

Security: $apply () can receive a parameter as function (), which is wrapped in a try ... catch block, so that if an exception occurs, the exception is processed by the $exceptionHandler service.

• $apply will allow NG to enter $digest cycle and start traversing (depth first) to check for data changes from $rootscope.
• The $digest only checks the scope and its child scopes, and with $digest you can slightly improve performance when you are certain that the current operation only affects them.

What is the difference between 5.ng-if and ng-show/hide?

The 1th difference: The ng-if DOM node is created when the expression is true ng-show , and is initially created, used, display:block and display:none controlled to display and not display.

The 2nd difference: ng-if It will (implicitly) produce a new scope, and so ng-switch ng-include on dynamically creating a piece of interface.

This causes the outer layer ng-if ng-model not to change synchronously when the inner layer changes when the underlying variable is bound and the model is bound to another display area in the outer Div, because it is already two variables.

<p>{{name}}</p><div ng-if="true"> <input type="text" ng-model="name"></div>

ng-showThis problem does not exist because it does not own a primary scope.

The way to avoid such problems is to always bind the elements in the page to the properties of the object (data.x) instead of binding directly to the base variable (x).

6.

Front-end interview angular JS