Angularjs Top Ten Classic questions __js

1. The difference between ng-show/ng-hide and ng-if.

We all know that ng-show/ng-hide is actually hidden and displayed through display. The NG-IF actually controls the addition and deletion of the DOM node to implement it. So if we are loading the DOM nodes according to different conditions, then ng-if performance is better than ng-show. 2. Explain what is the difference between $rootscrope and $scope.

The popular saying $rootscrope page all $scope's father.

Let's see how we can produce $rootscope and $scope.

step1:angular resolves the ng-app and then creates the $rootscope in memory.

Step2:angular to continue parsing, find the {}} expression and parse it into a variable.

Step3: Then parses the div with Ng-controller and points to a controller function. This time in this controller function becomes a $scope object instance. 3. How the expression {{Yourmodel}} works.

It relies on the $interpolation service, after initializing the page HTML, it finds these expressions and marks them, and then sets a $watch for each {{}}. The $interpolation returns a function with a context parameter, and finally the function executes, and the expression $parse to that scope. 4. What is the digest cycle in angular?

In each digest cycle, angular always compare the value of model on the scope, the General digest cycle is automatically triggered, we can also use the $apply for manual triggering. Deeper research can be Digest Loop and apply. 5. How do I cancel the $timeout and stop a $watch ()?

Stop $timeout We can use cancel:

var customtimeout = $timeout (function () {  
  //Your code
}, 1000);

$timeout. Cancel (customtimeout);

Stop a $watch:

. $watch () Returns a functional function that stops registering that
we store to a variable  
var deregisterwatchfn = $rootScope. $watch (' Someglo Ballyavailableproperty ', function (newval) {  
  if (newval) {
    //We invoke that deregistration function, to disable T He watch
    deregisterwatchfn ();
    ...
  }
});

6. How to set up the angular directive in restrict respectively. What is the difference between @,=,& in scope.

Restrict can be set separately: A matching attribute e matching tag c matching class M matching annotation

Of course you can set multiple values, such as AEC, to do multiple matches.

In scope,@,=,& The @ Gets a set string, which can be set either by itself or by using {{Yourmodel}}, when a value binding is performed; = bidirectional binding, binding some properties on scope; & to execute some expressions on the parent scope, common we set some functions that need to be executed

Angular.module (' Docsisolationexample ', [])  
. Controller (' controller ', [' $scope ', function ($scope) {
  $ Scope.alertname = function () {
      alert (' Directive scope & ');
  }
])
. directive (' MyCustomer ', function () {return
  {
    restrict: ' E ',
    scope: {
      clickhandle: ' & '
    },
    Template: ' <button ng-click= ' Testclick () ">click me</button>",
    controller:function ($scope) {

      $scope. Testclick = function () {
        $scope. Clickhandle ();

      }  
    }
  };

<div ng-app= "Docsisolationexample" >  
<div ng-controller= "Controller" >  
  <my-customer Click-handle= "Alertname ()" ></my-customer>
</div>  
 </div>

Codepen Demo < make one-way binding. 7. List at least three ways to implement communication between different modules.

Service

Events, specifying the bound event

Use $rootScope

Controller direct use between $parent, $ $childHead, etc.

directive the specified property for data binding 8. What measures can be taken to improve angular performance The official advocates of shutting down debug, $compileProvider

Myapp.config (function ($compileProvider) {  
  $compileProvider. debuginfoenabled (false);

Use one-time binding expression that is {{:: Yourmodel}}

Reduce the number of watcher

Avoid using ng-repeat in infinite scrolling loading, this article is about workaround

Use the gadget for performance testing to discover your angular performance problems, we can use the simple console.time () and the developer tools as well as the Batarang

Console.time ("Timername");  
Your code
console.timeend ("Timername");  

9. Do you think it's good to use jquery in angular?

This is a question of openness, and although there are many such arguments on the web, it is generally not considered a particularly good attempt. In fact, when we learn angular, we should do from 0 to accept angular thought, data binding, using angular some of the APIs, reasonable routing organization and, write related instructions and services, and so on. Angular has a lot of APIs to completely replace the common API in jquery, we can use Angular.element, $http, $timeout, ng-init, etc.

We might as well change the perspective, if business needs, and for a newcomer (more familiar with jquery), perhaps you can introduce jquery to solve problems, such as using plug-ins have more options, of course, this is through the impact of code organization to improve productivity, with the angular understanding of the in-depth , the refactoring will gradually discard some of the code when you first introduced jquery.

So I think the two frameworks that can't be used together are definitely wrong, but we should try to follow the angular design. 10. How to conduct angular unit test

We can use Karam+jasmine for unit testing, we introduce angular app via Ngmock and add our test cases ourselves. A simple test code:

 describe (' calculator ', function () {Beforeeach (' Calculatorapp ');

  var $controller;
  Beforeeach (Inject function (_$controller_) {$controller = _$controller_;

  }));
            Describe (' Sum ', function () {It (' 1 + 1 should equal 2 ', function () {var $scope = {};
            var controller = $controller (' Calculatorcontroller ', {$scope: $scope});
            $scope. x = 1;
            $scope. y = 2;
            $scope. sum ();
        Expect ($scope. z). Tobe (3);    
    });

}); });