How to weigh your angular level

Angular is a front-end MVVM framework that is now commonly used, and feel the following questions weigh down your level.

1. What mechanism does angular use for data binding? Detailed principles
2. Two peer interface blocks A and B, if an event is triggered in a, what is the way to let B know, detail the principle
3. How well should a angular application be layered?
4. What are the different routing libraries used in angular applications, and what are their differences?
5. What are the challenges you might encounter if you plan a full-component system through angular directive?
6. Angular applications which are developed by different teams, what problems may be encountered and how to solve if the integration is to be done?
7. What are the disadvantages of angular?
8. What do you think of the controller as syntax introduced in angular 1.2?
9. Detailing Angular's "dependency injection"
10. How to treat angular 2 ...

Here are the questions that need to be lengthy, and then some small questions:

1. What is the difference between ng-if and ng-show/hide?
2. What is the problem if the array has the same value in the Ng-repeat, and how to solve it?
3. The expression written in Ng-click, can you use the method on the native object of JS, such as Math.max? Why?
4. {now | In this expression ' yyyy-mm-dd '}, how can the vertical and subsequent arguments be customized?
5. What is the relationship between factory and Service,provider? The answer is attached below, there are subjective factors, such as doubt, you can search the answer yourselfStarting from a small problem:

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

The 1th difference is that ng-if creates this DOM node after the expression is true, Ng-show is created at the beginning, with Display:block and Display:none to control the display and not display.

The 2nd difference is that Ng-if will (implicitly) generate new scopes, Ng-switch, Ng-include, and so on dynamically create a piece of interface.

2. What is the problem if the array has the same value in the Ng-repeat, and how to solve it?

will prompt duplicates in a repeater is not allowed. $index can be resolved by adding track by. Of course, you can also trace by any of the normal values, as long as you can uniquely identify each item in the array (establishing an association between the DOM and the data).

3. The expression written in Ng-click, can you use the method on the native object of JS, such as Math.max? Why?

No. As long as it is on the page, you cannot call the native JS method directly, because these do not exist in the $scope of the Controller that corresponds to the page. Unless this function is added to the $scope:

$scope. parseint = function (x) {    return parseint (x);}

4. {now | In this expression ' yyyy-mm-dd '}, how can the vertical and subsequent arguments be customized?

How to define:

App.filter (' Filter name ', function () {    return function (object to filter, filter parameter 1, filter parameter 2, ...) {        //... Do something           to return the object after processing;    

There are two ways of using it, one is directly on the page:

<p>{{now | date: ' YYYY-MM-DD '}}</p>

One is used in JS:

$filter (' Filter Name ') (object to be filtered, parameter 1, parameter 2,...) $filter (' Date ') (now, ' yyyy-mm-dd hh:mm:ss ');

　　

5. What is the relationship between factory and Service,provider?

Factory puts the service's method and data in an object and returns the object; The service creates a service through a constructor, returns an instantiated object, and provider creates a service that can be configured through CONFIG.

From the bottom-up implementation, the service invokes factory, returns its instance, factory calls provider, and returns the contents of its definition in a $get. Factory and service functions are similar, except that factory is a normal function that can return anything (return can be accessed, so those private variables do what you understand); The service is a constructor and can not be returned (bound to this can be accessed); Provider is the enhanced version of Factory, which returns a configurable factory.
1. What mechanism does angular use for data binding? Detailed Principles

Dirty check mechanism.

Angular sets up a listening queue on the scope model to listen for data changes and update the view. Each time a thing is bound to a view, AngularJS inserts a $watch into the $watch queue to detect changes in the model it monitors. When the browser receives an event that can be processed by the angular context, $digest loop triggers, loops through all $watch, and finally updates the DOM.
Give me a chestnut:

<button ng-click= "val=val+1" >increase 1</button>

　　

Click will result in an updated operation (at least two $digest cycles triggered)

• Press the button
• The browser receives an event and enters into the angular context
• $digest loop begins execution, querying each $watch for changes
• Because of the monitoring $scope. Val $watch reported a change, so force a $digest loop again
• No changes detected in the new $digest cycle
• The browser takes back the controller and updates the $scope. Val new value corresponding DOM

The upper limit of the $digest loop is 10 times (more than 10 times after an exception is thrown, preventing an infinite loop).

2. Two peer interface blocks A and B, if an event is triggered in a, what is the way to let B know, detail the principle

The question is, in other words, how to communicate between modules in a peer interface. There are two ways, one is a shared service and one is event-based.

A. Shared Services

In Angular, a singleton object can be generated by factory and injected into modules A and B that require communication.

B. Event-based

There are two different ways of doing this.

The first is the use of the parent controller. Triggers ($emit) an event to the parent controller in the child controller, then listens ($on) the event in the parent controller, and then broadcasts ($BROADCAST) to the child controller, so that the parameters carried by the event are The data is passed through the parent controller and propagated among the peer controllers.

The second is the use of $rootScope. Each Angular app has a root scope $rootScope by default, and the root scope is at the top level, from which the level of scope hangs. Therefore, if the child controller uses $rootScope broadcast and receive events directly, then communication between peers can be achieved.

What are the different routing libraries commonly used in angular applications, and what are their differences?

Ngroute and Ui.router are commonly used in angular1.x, and there is a new router (component-oriented) designed for ANGULAR2. The back one wasn't used in the actual project, so I didn't say it.

Whether it is Ngroute or ui.router, as an additional feature of the framework, it must be introduced in the form of module dependencies.

The difference between the two is:

The Ngroute module is a Angular module, and the Ui.router module is a third-party module developed based on the Ngroute module.

Ui.router is based on state, Ngroute is URL-based, Ui.router module has more powerful functions, mainly embodied in the view of the nesting aspects.

You can use Ui.router to define a route that has a clear parent-child relationship and insert the sub-route template into the <div ui-view></div> of the parent route templates through the Ui-view directive, which enables the view to be nested. This cannot be defined in Ngroute, and if you use <div ng-view></div> in a parent-child view at the same time, you will get into a dead loop.

5. What are the challenges you might encounter if you plan a full-component system through angular directive?

I did not use the directive to do a full set of components, cannot speak.

One thing you can think of is how the component interacts with the outside world, and how it can be used with a simple configuration.

6. Angular applications which are developed by different teams, what problems may be encountered and how to solve if the integration is to be done?

You may encounter conflicts between different modules. For example, a team of all the development under the Modulea, the other team developed code under the Moduleb:

Angular.module (' Myapp.modulea ', [])    . Factory (' ServiceA ', function () {        ...    }) Angular.module (' Myapp.moduleb ', [])    . Factory (' ServiceA ', function () {        ...    })    

　　

7. What are the disadvantages of angular?

A. Strong constraints

Leads to higher learning costs and is unfriendly to the front end.

But when it comes to complying with AngularJS's conventions, productivity is high and Java programmers are friendly.

B. Not conducive to SEO

Because all content is dynamically fetched and rendered, the search engine is unable to crawl.

One workaround is for normal user access, the server responds to the content of the AngularJS app, and for search engine access, the response is specifically for the SEO HTML page.

C. Performance issues

As the MVVM framework, there is a performance problem with large arrays and complex objects because of the bidirectional binding of the data.

Methods that can be used to optimize the performance of Angular applications:

• Reduce monitoring items (such as one-way binding on data that does not change)
• Actively set the index (specify track by, the simple type defaults to its own index, the object defaults to use the $ $hashKey, for example change track by Item.id)
• Reduce the amount of rendering data (such as paging, or take a small portion of the data at a time, and fetch it as needed)
• the data is flattened (for example, in a tree structure, using a flattened structure, a map and tree data is constructed, and the tree data changes are synchronized to the original flattened data due to the same reference to the flattened data)

  9. Detailed angular "Dependency injection" The

  
  

  AngularJS infers the dependent service name through the constructor's parameter name, finds the defined function string by toString (), and then parses the argument (dependency) with a regular. The dependency mappings are then taken to the corresponding dependencies, which are passed in after instantiation.

  
  

  Because AngularJS's injector is to assume that a function's parameter name is a dependent name, and then to find a dependency, if you simply inject the dependency as follows, after the code is compressed (the parameter is renamed), the dependency cannot be found.

  function Myctrl = ($scope, $http) {...} 

  Therefore, it is common to inject dependencies in the following two ways (required for the order in which dependencies are added).

   

  Array notation:

  myapp.controller (' Myctrl ', [' $scope ', ' $http ', function ($scope, $http) {...}]) 

  Explicit $inject:

  myapp.controller (' Myctrl ', Myctrl); function Myctrl = ($scope, $http) {... }myctrl. $inject = [' $scope ', ' $http ']; 

  for a DI container, you must have three features: the registration of dependencies, the declaration of dependencies, and the acquisition of objects. In AngularJS, both the module and the $provide can provide dependency registration, the built-in injector can get the object (auto-complete dependency injection), and the Declaration of the dependency is the above two ways.
  
  

How to weigh your angular level