1. What mechanism is used for data binding in Angular? Detailed principle
answer: dirty checking mechanism.
Analysis:
Two-way data binding is one of the core mechanisms of AngularJS. When any data changes in the view, it will be updated to the model. When the data in the model changes, the view will also be updated synchronously. Obviously, this requires monitoring. [Related tutorial recommendation: "Angular Tutorial"]
The principle is that Angular sets a listening queue on the scope model to monitor data changes and update the view. Every time you bind something to a view, AngularJS will insert a $watch into the $watch queue to detect whether there are changes in the model it monitors. When the browser receives an event that can be processed by the angular context, the $digest loop is triggered, traverses all $watches, and finally updates the dom.
2. How is AngularJS’s two-way data binding implemented?
Answer:
1. Each two-way bound element has a watcher.
2. When certain events occur, digest dirty data detection is called.
These events include: content changes of form elements, Ajax request responses, functions executed by clicking buttons, etc.
3. Dirty data detection will detect all watcher elements under the rootscope.
The $digest function is dirty data monitoring
3. What third-party plug-ins have you used in angularjs project development?
Answer: AngularUi ui-router oclazyload, etc. Attached is an article to take a closer look https://segmentfault.com/a /1190000003858219
4. What is the difference between ng-show/ng-hide and ng-if?
Answer: We all know that ng-show/ng-hide actually hides and displays through display. And ng-if actually controls the addition and deletion of dom nodes. Therefore, if we load dom nodes based on different conditions, then the performance of ng-if is better than ng-show.
5. Explain what root S crope is and the difference between it and rootScrope, rootScrope and scope?
Answer: In layman's terms, root S crope page is the father of all rootScrope pages and all rootScrope pages and all scopes.
Analysis:
Let's take a look at how to generate root S cope and rootScope and rootScope and scope.
step1:Angular parses ng-app and creates $rootScope in memory.
step2: angular continues parsing, finds the {{}} expression, and parses it into a variable.
step3: Then the div with ng-controller will be parsed and pointed to a controller function. At this time, the controller function becomes a $scope object instance.
6. List at least three ways to implement communication between different modules?
Answer:
7. Expression { How does {yourModel}} work?
Answer:
It relies on the $interpolation service. After initializing the page html, it will find these expressions and mark them, so every time it encounters a { {}}, a $watch will be set. And $interpolation will return a function with context parameters. When the function is finally executed, the expression $parse is applied to that scope.
8. $http in angular
Answer: $http is a core service in AngularJS, used to read data from remote servers.
We can use the built-in http service to communicate directly with the outside world. The http service communicates directly with the outside world. The http service communicates directly with the outside world. The http service simply encapsulates the browser's native XMLHttpRequest object.
9. When ng-repeat iterates an array, if there are the same values in the array, what will happen and how to solve it?
Answer: It will prompt that Duplicates in a repeater are not allowed. Add track by $index to solve the problem. Of course, you can also trace by any ordinary value, as long as it can uniquely identify each item in the array (establish the association between dom and data)
10. Is angularjs mvc or mvvm framework
answer: mvvm
analysis:
first elaborate Here's your understanding of mvc and mvvm:
First of all, why do we need MVC? Because as the size of the code becomes larger and larger, dividing responsibilities is the general trend, and for the convenience of later maintenance, modifying one function does not affect other functions. And for reuse, because a lot of the logic is the same. MVC is just a means, the ultimate goal is modularization and reuse.
The advantages of mvvm
are low coupling: View can be changed and modified independently of Model, and the same ViewModel can be reused by multiple Views; and changes in View and Model can be made independent of each other;
reusability: some view logic can be placed In ViewModel, multiple Views can be reused;
independent development: developers can focus on the development of business logic and data (ViewModemvvmdi; designers can focus on the design of UI (View);
testability: clear View layering makes it possible to It is easier and simpler to test the business logic of the presentation layer.
In angular, the MVVM pattern is mainly divided into four parts:
View: It focuses on the display and rendering of the interface. In angular,
it contains a bunch of declarative Directive view templates.
: It is the glue between View and Model, responsible for the interaction and collaboration between View and Model. It is responsible for providing displayed data to View, and providing a way for the Command event in View to operate Model; in angular, the $scope object serves as this The role of ViewModel;
Model: It is an encapsulation carrier of data related to the business logic of the application. It is an object in the business domain. The Model does not care how it will be displayed or operated, so the model will not contain any interface display-related information. Logic. In web pages, most models return data from the Ajax server or are global configuration objects; and the service in angular is the place to encapsulate and process the business logic related to the model. This kind of business A service is a domain service that can be reused by multiple Controllers or other services.
Controller: This is not the core element of the MVVM pattern, but it is responsible for the initialization of the ViewModel object. It will combine one or more services to obtain the business domain Model. ViewModel object, so that the application interface reaches a usable state when starting to load.
The interface of mvc is closely related to the logic, and the data is read directly from the database. The interface of mvvm is loosely coupled with the viewmode, and the interface data is obtained from the viewmodel. So angularjs prefers mvvm
11. What roles do $scope, controller, directive, and service play in mvvm in angularjs?
Answer: If you don’t know, the analysis of the first question is very clear, read it carefully again.
12. In angular How do you control the reasonable loading of static resources in the project
Answer: None
13. What do you need to pay attention to when writing controller logic?
Answer:
1. Simplify the code (this is what all developers must have)
2. Resolutely not be able to operate the dom node. At this time, you may ask why not.
Your answer is: DOM operations can only appear in directives. The last place it should appear is in service. Angular advocates test-driven development. If DOM operations appear in the service or controller, it means that the test cannot pass. Of course, this is just one point. What is important is one of the benefits of using Angular, which is two-way data binding, so that you can focus on processing business logic without having to deal with piles of DOM operations. If the Angular code is still full of various DOM operations, then why not use jquery directly for development.
What is test-driven development? To popularize it:
Test-driven development, the full English name is Test-Driven Development, or TDD for short, is a new development method that is different from the traditional software development process. It requires writing test code before writing the code for a certain function, and then only writing the functional code that makes the test pass, and driving the entire development through testing. This helps write concise, usable and high-quality code and speeds up the development process.
14.
Answers to how to communicate between controllers:
1.
There are two methods for event here. One is scope.scope.scope.emit, and then obtains parameters by listening to the event of root S cope; the other is the event of rootScope to obtain parameters. ; The other is rootScope's event to obtain parameters; the other is rootScope.broadcast, which obtains parameters by listening to broadcast and by listening to scope's events.
There is no performance difference between these two methods in the latest version of Angular. The main reason is that the direction of event sending is different. You can choose according to the actual situation.
2. The service
can create a dedicated event Service, or it can be divided according to business logic and store the data in the corresponding Service.
3.
The $rootScope method may be a little dirty, but it is more convenient, that is, the data is stored in the root S cope, so that in each sub-rootScope, so in each sub-rootScope, so that each sub-scope can be called, but you need to pay attention to the life cycle
4. Directly use scope. scope.scope.$nextSibling and similar properties
. Similar to scope .scope.scope.parent. This method has more disadvantages. Officially, it is not recommended to use any attributes starting with $$, which not only increases coupling, but also requires dealing with asynchronous issues, and the order of scopes is not fixed.
Itis not recommended
to pass parameters through local storage, global variables, or postMessage in modern browsers. Unless there are special circumstances, please avoid this method.
15. Several parameters of custom instructions
. Answer:
Let’s talk about a few commonly used ones, such as:
restrict: declaration form of the instruction in dom E (element) A (attribute) C (class name) M (comment)
template: two forms, A type of HTML text; a function that accepts two parameters, tElemetn and tAttrs, and returns a string representing the template. The template string must have a root DOM element
templateUrl: two forms, one is a string representing the path of the external HTML file; a function that can accept two parameters, the parameters are tElement and tAttrs, and returns the characters of the external HTML file path String
compile (object or function): The compile option can return an object or function. If the compile function is set, it means that we want to perform DOM operations before instructions and real-time data are placed in the DOM. It is safe to perform DOM operations such as adding and deleting nodes in this function. Essentially, when we set the link option, we actually create a postLink() link function so that the compile() function can define the link function.
Then there is the portal: http://www.cnblogs.com/mliudong/p/4180680.html
The difference between compile and link:
when compiling, compile converts the dom, and saves it first when it encounters the place where the listener is bound. Several are saved, and finally they are summarized into a link function and executed together, which improves performance.
16. The answer to the difference between angular and jquery
:
angular is based on data-driven, so angular is suitable for projects with complicated data operations (here you can mention single-page applications again, if you don’t know how to do it, the benefits are here again http://www.zhihu .com/question/20792064)
jquery is based on dom driver. jquery is suitable for projects with many dom operations.
17. How much do you know about the form form in angular?
Answer:
Angular has expanded the type of input elements and provides a total of the following 10 types. :
text
number
url
radio
checkbox
hidden
button
submit
reset
Angular has 4 built-in CSS styles for the form.
ng-valid verifies the legal state
ng-invalid verifies the illegal state
ng-pristine If you want to use the native form, you need to set this value
ng-dirty The form is in the dirty data state.
Angular will verify the Model when automatically verifying the form. If ng-model is not set, Angular cannot know whether the value of myForm.$invalid is true.
The content required for verification
indicates whether to enter the content
ng-maxlength, maximum length
ng-minlength, minimum length.
Example: Portal https://github.com/18500047564/clutter
18. What is filterer? How much do you know? Implement a custom filter
answer:
date (date)
currency (currency)
limitTo (limit the length of an array or string)
orderBy (sort)
lowercase (lowercase)
uppercase (uppercase)
number (format a number, add a thousands separator, and Receive parameters limit the number of decimal points)
filter (process an array, filter out elements containing a certain substring)
json (format json object)
There are two ways to use filter,
one is directly on the page:
<p>{{now | date : 'yyyy-MM-dd'}}</p> The other is to use it in js:
$filter('filter name')(object to be filtered, parameter 1, parameter 2,...)
$filter('date')(now, 'yyyy-MM-dd hh:mm:ss'); Customize a deduplication array
app.filter("unique", function() {
return function(arr) {
var n = [];
var obj = {};
for (var i = 0; i < arr.length; i++) {
if (!obj[arr[i]]) {
n.push(arr[i]);
obj[arr[i]] = 1;
}
}
return n;
};
});