Angular JS Interview Question Set 10
Categories: Angular JS
What can you say about the digest phase in AngularJS?
The digest cycle or digest phase is the most important cycle required for the data binding process. It does the task of comparing the old version of a model with its new version. Whenever a change in the scope model is found during the comparison, the model watches are fired and another digest phase is initiated until the scope model is stable.
What are the different phases of the lifecycle of AngularJS Scope?
The following diagram illustrates the scope lifecycle in AngularJS:
- Creation: In this phase, the rootScope is created by $injector during the application bootstrap. During the phase of template linking, new child scopes relevant to the directives are created.
- Watcher registration: Here, the directives register the watches on the scope object which will be used to propagate values of models to DOM.
- Model mutation: The model mutations need to be present within the scope.$apply() for them to be properly observed. These will be done implicitly by AngularJS when working on synchronous or asynchronous work requests.
- Mutation observation: Once the $apply is complete, the digest cycle starts to observe for any model mutations on the scopes. Here, the $watches expressions are monitored for the model mutations and if any mutations are observed, then the $watch listener is called on the model.
How will you improve performance of an AngularJS application?
AngularJS makers have recommended the below two approaches for performance optimization in the production environment. They are:
Enable strict DI mode: This can be achieved by making use of the directive ngStrictDi and can be implemented as:
<html ng-app=“myFirstApp” ng-strict-di>
Disable debug data: This can be achieved by using the debugInfoEnabled method of the $compileProvider service as shown below:
app.config(function ($compileProvider) {
$compileProvider.debugInfoEnabled(false);
});
What is the difference between the scopes of a directive and the scopes of a controller?
Scopes of the controller and the directives are the instances of scope objects. The only difference lies in the naming convention for them. To understand the difference between scope and $scope, we need to understand directives with isolated scope using the following code:
app.directive('testAppDirective', function() {
return {
scope: {},
link: function(myScopeVariable, elem,attr) {
console.log(scope);
}
}
});
How can you maintain logs in AngularJS?
Logs in AngularJS can be maintained by using the $log built-in service. These are mainly used for troubleshooting and debugging in case of any unexpected scenarios. They are done by mainly using the below methods:
- log(): To log a message onto the console. Example usage: $log.log(‘Entered some function’)
- info(): To write any message which represents information. Example usage: $log.info(‘Data processed successfully’)
- warn(): To log warnings. Example usage: $log.warn(‘The value is empty.’)
- error(): To log errors. Example usage: $log.error(‘Oh no! Something went wrong.’)
- debug(): To log any debug messages useful for debugging. Example usage: $log.debug(‘Processed a variable A.’)
How do you achieve internationalization?
Internationalization is a way of showing locale-specific content on our applications. For example, the website in the United Kingdom needs to be displayed in English whereas the same website needs to be shown in Hindi for the users of India. By incorporating multiple languages support in our platform, we are ensuring that our website reaches a wider target audience.
What is the auto bootstrap process?
Auto Bootstrapping is the process of automatically initiating the DOMContentLoaded event in the browser. The AngularJS application after downloading the angular.js library into the browser does the task of finding the ng-app directive which gives the root of the application. Once the directive is found, the following steps take place:
- The angular root module associated with the ng-app directive is loaded.
- The application injector is created which in turn creates the $compile and the $rootScope objects.
- The DOM is compiled from the ng-app element automatically and the content is rendered on the browser. This process is called auto bootstrapping.
What are the lifecycle hooks available?
There are many lifecycle hooks available in AngularJS and they are:
ngOnInit(): This is a callback method that gets invoked as soon as the change detector detects any scope model changes for the first time and before any view has been checked. This is invoked once only when the directive is instantiated.
ngOnChanges(): This callback function is triggered whenever AngularJS detects changes in the scope model and we can define the actions that need to follow up with that change in the property. It is called before ngOnInit() while instantiating the directive and is called every time the scope model changes.
ngDoCheck(): This callback method does the task of change-detection and is invoked only after the default change-detector is run.