angular Top Ten Frequently Asked Questions

AngularJS can be regarded as a data-first framework. In its three levels, data model is skeleton, view model and business events are flesh and blood, and view template and instructions are fur. These three layers are combined into one to form a living Web application.

1. In the case of ng-if, always bind the elements in the page to the object's properties (data. x) instead of directly binding to the base variable (x). Because ng-if will (implicitly) create a new scope.

2. When ng-repeat iterates over an array, if there are the same values in the array, what is the problem and how to solve it? Add track by $index to solve the problem. trace by can also be any one ordinary value

3. Can expressions written in ng-click use methods on JS native objects? No, as long as it is in the page, it cannot directly call the native JS method. Because these do not exist in the $scope of the Controller corresponding to the page.

<p>{{13.14 | parseIntFilter}}</p>
app.filter('parseIntFilter', function(){
  return function(item){
    return parseInt(item);
  }
})

4. {{now 'yyyy-MM-dd'}} In this expression, how can the vertical bar and the following parameters be customized?

There are 9 kinds of filter built into ng:

date (date)

currency (currency)

limitTo (Limit Array or String Length)

orderBy (Sort)

lowercase (lowercase)

uppercase (capital)

number (formatted digits, with thousands of separators, and receive parameters to qualify decimal places)

filter (Processing 1 array to filter out elements that contain a substring)

json (Formatting json Objects)

5. filter can be used in two ways, one is directly on the page:

<p>{{now | date : 'yyyy-MM-dd'}}</p>

The other one is used in js:

// $filter(' Filter name ')( Objects to filter ,  Parameter 1,  Parameter 2,...)
$filter('date')(now, 'yyyy-MM-dd hh:mm:ss');

Custom filter

//  Form 
app.filter(' Filter name ',function(){
  return function( Objects to filter , Filter parameters 1, Filter parameters 2,...){
    //... Do 1 Something  
    return  Processed object ;
  }
}); 

//  Chestnut 
app.filter('timesFilter', function(){
  return function(item, times){
    var result = '';
    for(var i = 0; i < times; i++){
      result += item;
    }
    return result;
  }
})

6. What is the relationship between factory, service and provider?

factory returns an object, while service returns an instantiated object. Anything bound to this can be accessed. provider is an enhanced version of factory and returns 1 configurable factory

7. Performance issues

As an MVVM framework, because of the implementation of bidirectional binding of data, there will be performance problems for large arrays and complex objects.

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

Reduce monitoring items (such as one-way binding for data that will not change)

Actively set the index (specify track by, simple types use themselves as index by default, and objects use $$hashKey by default, for example, change to track by item. id)

Reduce the amount of rendering data (such as paging, or fetching a small part of data at a time and fetching it again as needed)

Data flattening (for example, for a tree structure, a flat structure is used to build an map and tree data. When operating on the tree, because of the same reference as the flat data, the tree data changes will be synchronized to the original flat data)