There are only 10 questions, but they cover all aspects of Angular development, including basic knowledge and questions encountered during development, as well as open-ended questions to identify candidates’ base level and project experience.

1. ng-show/ng-hide 与 ng-ifThe difference between?

We all know that ng-show/ng-hide actually hides and displays using display. Ng-if actually controls the addition and deletion of DOM nodes. Therefore, if we load DOM nodes according to different conditions, the performance of ng-if is better than ng-show.

2. Explain what is$rootScropeAnd the$scopeThe difference between?

The $rootScrope page is the parent of all $Scopes.

Let’s see how to generate $rootScope and $scope.

Step1 :Angular parses ng-app and creates $rootScope in memory.

Step2 :angular continues parsing, finding the {{}} expression and parsing it into variables.

Step3: The div with ng-Controller is then parsed and pointed to a controller function. At this point the Controller function becomes an instance of the $Scope object.

3. The expression{{yourModel}}How does it work?

It relies on the $Interpolation service and after initializing the HTML page it finds these expressions and tags them so that each {{}} it sets a $watch. The $interpolation returns a function with context parameters and when the function is executed, the expression $parse is applied to that scope.

4. What is the Digest cycle in Angular?

Angular always compares the value of the Model on the scope during each Digest cycle. The digest cycle is usually triggered automatically, or manually using $apply. For more information, visit The Digest Loop and Apply.

5. How to cancel$timeoutAnd stop one$watch()?

To stop $timeout we can cancel with:

var customTimeout = $timeout(function () {  
  // your code
}, 1000);

$timeout.cancel(customTimeout);
Copy the code

Stop a $watch:

Function that we store to a variable var deregisterWatchFn = $rootScope. $watch (' someGloballyAvailableProperty ', function (newVal) { if (newVal) { // we invoke that deregistration function, to disable the watch deregisterWatchFn(); . }});Copy the code

6. How can RESTRICT be set in Angular Directive? What’s the difference between @,= & in scope?

Restrict can be set to:

  • AMatch the attributes
  • EMatch the label
  • CMatch the class
  • MMatching annotations

And of course you can set multiple values like AEC for multiple matches.

In scope, @,=,& are represented separately during value binding

  • @Gets a set string, which can be set itself or bound with {{yourModel}};
  • =Bidirectional binding, binding some properties on scope;
  • &Used to execute some expressions on the parent scope, usually 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(); }}}; });Copy the code
<div ng-app="docsIsolationExample">  
<div ng-controller="Controller">  
  <my-customer click-handle="alertName()"></my-customer>
</div>  
 </div>
Copy the code

Codepen Demo

  • <Perform one-way binding.

7. List at least three ways to communicate between different modules.

  • Service

  • Events, which specifies the bound events

  • Using the $rootScope

  • Use $parent directly between controllers,? ChildHead etc.

  • Directive specifies data binding for the property

What can be done to improve Angular performance

  • Officially, disable debug,$compileProvider
myApp.config(function ($compileProvider) {  
  $compileProvider.debugInfoEnabled(false);
});
Copy the code

  • Use the one-time binding expression {{::yourModel}}

  • Reduce the number of Watchers

  • Avoid using ng-repeat in infinite scroll loading, see this article for a workaround

  • Use performance testing widgets to explore your Angular performance problems, using simple console.time() or the developer tools and Batarang

console.time("TimerName");  
//your code
console.timeEnd("TimerName");  
Copy the code

9. Do you think jQuery is a good idea for Angular?

This is an open question, and although there will be a lot of debate online, it is generally considered not a particularly good attempt. In fact, when we learn Angular, we should do from zero to accept Angular ideas, data binding, use Angular’s own API, proper routing and organization, write related instructions and services, etc. Angular comes with a number of apis that completely replace jquery apis. You can use angular.element,$HTTP,$timeout,ng-init, etc.

If you have a business need, and are new to jQuery, you might want to introduce jQuery to give it more options for solving problems, such as using plug-ins, by affecting the organization of your code. As you understand Angular better, Some of the original jquery code will be phased out in the refactoring. (😂Po owner is such a person, hoping not to be laughed at, business is rushing away)

So I think it’s wrong to say that the two frameworks don’t work together at all, but we should try to follow Angular’s design.

10. How do Angular unit tests

We can use Karam + Jasmine for unit testing, we introduce angular app through ngMock and add our own test cases. A simple test code:

describe('calculator', function () {

  beforeEach(module('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);
        });    
    });

});
Copy the code

For testing, see Using Karma to test Angular

In addition to Karam, the Angular.js team released an e2E (End-to-end) testing framework, proTractor

reference

  • 11 Essential AngularJS Interview Questions

  • 11 Tips to Improve AngularJS Performance

  • AngularJS: My solution to the ng-repeat performance problem

  • 29 AngularJS Interview Questions – Can You Answer Them All?

  • The Digest Loop and $apply

  • What is the difference between ‘@’ and ‘=’ in directive scope

  • Angular compile