Interview :: Angular JS
$routeProvider is one of the important services which set the configuration of URLs. It further maps them with the corresponding HTML pages or ng-templates and attaches a controller with the same.
AngularJS initializes automatically upon the "DOMContentLoaded" event. It also initializes when the browser downloads the Angular.js script and document.readyState is set to 'complete' at the same time. AngularJS looks for an ng-app directive which is the root of Angular application compilation process.
If the directive 'ng-app' is found, then AngularJS will perform the following steps:
- It will load the module which is associated with the directive.
- It will create the application injector.
- It will compile the DOM starting from the ng-app root element.
This process is known as Auto-bootstrapping.
Sometimes, we may need to manually initialize the Angular application to have more control over the initialization process. We can perform such task using angular.bootstrap() function within angular.element(document).ready() function. AngularJS uses this function when the DOM is ready for manipulation.
The angular.bootstrap() function uses two parameters, the document, and the module name injector.
In angularJS, $watch() function is used to watch the changes of variable in $scope object. Generally, the $watch() function is created internally to handle variable changes in the application.
If there is a need to create custom watch for some specific action then it's better to use $scope.watch function. The $scope.watch() function is used to create a watch of some variable. When we register a watch, we pass two functions as parameters to the $watch() function:
- A value function
- A listener function
An example is given below:
Here, the first function is the value function and the second function is the listener function.
AngularJS provides support for creating custom directives for the following type of elements:
- Element Directive
Element directives are activated when a matching element is encountered. - Attribute
Attribute directives are activated when a matching attribute is encountered. - CSS
CSS directives are activated when a matching CSS style is encountered. - Comment
Comment directives are activated when a matching comment is encountered.
Angular's HTML compiler allows us to teach the browser, new HTML syntax. It also allows the developer to attach new behavior or attributes to any HTML element known as directives. AngularJS compilation process automatically takes place in the web browser. It does not contain any server-side or pre-compilation procedure.
AngularJS uses <$compiler> service for the compilation process of an Angular HTML page. Its compilation process starts after the HTML page (static DOM) is completely loaded.
It occurs in two phases:
- Compile
It checks into the entire DOM and collects all of the directives. - Link
It connects the directives with a scope and produces a live view.
The concept of compile and link has been added from C language. The code is compiled and then linked.
Global API is the combination of global JavaScript function, which is used to perform tasks such as comparing objects, iterating objects, and converting the data.
There are a few common API functions like:
- angular.lowercase
It is used to convert a string to lowercase string. - angular.uppercase
It is used to convert a string to uppercase string. - angular.IsString
It returns true if the current reference is a string. - angular.IsNumber
It returns true if the current reference is a number.
Yes, AngularJS is supported with all the browsers like Safari, Chrome, Mozilla, Opera, and Internet Explorer, etc. It is also companionable with mobile browsers.
$$ prefix in AngularJS is used as a private variable, as it is responsible for preventing accidental code collision with the user code.
Whereas, $ prefix is used to define angular core functionalities such as variable, parameter, property or method, etc.
AngularJS has a module known as ngCookies. Before we inject ngCookies, we should include angular-cookies.js into the application.
- Set Cookies
We can use the put method to set cookies in a key-value format.
- Get Cookies
We can use the get method to get cookies.
- Clear Cookies
We can use the remove method to remove or clear cookies.