1. What is the difference between ng-show/ng-hide and ng-if?
We all know ng-show/ng-hide is actually hidden and displayed through display . And ng-if actually controls the addition and deletion of dom nodes to achieve it. Therefore, if we load dom node according to different conditions, then the performance of ng-if is better than ng-show .
2. Explain what is $rootScrope and the difference from $scope?
In layman's terms, the $rootScrope page is all $scope 's father.
Let's take a look at how to generate $rootScope and $scope .
step1:Angular parses ng-app and creates $rootScope in memory.
step2:angular will continue to parse, find the {{}} expression, and parse it into a variable.
step3: The div with ng-controller will then be parsed and pointed to a controller function. At this time, controller function becomes an instance of the $scope object.
3. How does the expression {{yourModel}} work?
It depends 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. $interpolation will return a function with context parameters. Finally, the function is executed, and it is considered to be the expression $parse to that scope.
4. What is the digest cycle in Angular?
In each digest cycle, angular will always compare the value of model on scope . Generally, digest cycle is automatically triggered, and we can also use $apply for manual triggering.
5. How to cancel $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() will return a function that stops registration 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(); ... }});6. How can I set the restriction in Angular Directive? What is the difference between @,=,& in scope?
restrict can be set separately:
A Match attribute
E Match Tag
C match class
M Match comment
Of course you can set multiple values such as AEC to make multiple matches.
In scope , @,=,& is respectively expressed when performing value binding
@ Get a set string, which can be set by itself or bound using {{yourModel}} ;
= Bidirectional binding, binding some properties on scope ;
& is used to execute some expressions on the parent scope . We set some functions that need to be executed.
angular.module('docsIsolationExample', []) .controller('Controller', ['$scope', function($scope) { $scope.alertName = function() { alert('direct 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>
< Perform one-way binding.
7. List at least three ways to realize communication between different modules?
1. Service
2. Events, specify the bound event
3. Use $rootScope
4. Directly use $parent, $$childHead, etc. between controllers
5. Directive specifies attributes for data binding
8. What measures can improve Angular performance
Officially recommended, close debug , $compileProvider
myApp.config(function ($compileProvider) { $compileProvider.debugInfoEnabled(false);}); Use one binding expression, i.e. {{::yourModel}}
Reduce the number of watchers
Avoid using ng-repeat in infinite scrolling loading
Use performance testing gadgets to explore your angular performance problems. We can use simple console.time() or use developer tools and Batarang
console.time("TimerName"); //your codeconsole.timeEnd("TimerName");9. Do you think it is good to use jQuery in Angular?
This is an open question, and although there are many such debates on the Internet, it is generally believed that this is not a particularly good attempt. In fact, when we learn Angular, we should accept the idea of angular from 0, data binding, use some of the APIs that angular come with, reasonably route and organize, write related instructions and services, etc. angular comes with many APIs that can completely replace commonly used APIs in jquery. We can use angular.element, $http, $timeout, ng-init, etc.
We might as well change the perspective. If the business needs are needed, and for a newcomer (more familiar with jQuery), perhaps your introduction of jQuery can help it solve problems, such as using plug-ins, of course, this is to improve work efficiency by affecting the code organization. With the deepening of the understanding of angular, some of the codes that were introduced when jquery will be gradually abandoned during reconstruction. (?Po is such a person. I hope you won’t be ridiculed, but the business is driven away)
So I think it is definitely wrong to say that the two frameworks cannot be used together at all, but we should still try our best to follow the angular design.
10. How to conduct angular unit tests
We can use karam + jasmine for unit testing. We introduce the angular app through ngMock and then add our test cases by ourselves. 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); }); }); });11. Summary
The above is the entire content of this article. I hope it will be helpful to everyone's study and work. If you have any questions, please leave a message to discuss.