Explain AngularJS ?
Why to use AngularJS?
There are following reasons to choose AngularJS as a web development framework:
- It is based on MVC pattern which helps you to organize your web apps.
- It extends HTML by attaching directives to your HTML markup with new attributes or tags and expressions in order to define very powerful templates.
- It also allows you to create your own directives, making reusable components that fill your needs and abstract your DOM manipulation logic.
- It supports services that can be injected into your controllers to use some utility code to fulfil your need. For example, it provides $http service to communicate with REST service.
- It supports dependency injection which helps you to test your angular app code very easily.
What are the advantages of AngularJS?
There are following advantages of AngularJS:
- Data Binding – AngularJS provides a powerful data binding mechanism to bind data to HTML elements by using scope.
- Customize & Extensible – AngularJS is customized and extensible as per you requirement. You can create your own custom components like directives, services etc.
- Code Reusability – AngularJS allows you to write code which can be reused. For example custom directive which you can reuse.
- Support – AngularJS is mature community to help you. It has widely support over the internet. Also, AngularJS is supported by Google which gives it an advantage.
- Testing – AngularJS is designed to be testable so that you can test your AngularJS app components as easy as possible. It has dependency injection at its core, which makes it easy to test.
Does AngularJS has dependency on jQuery?
How to use jQuery with AngularJS?
Is AngularJS a library, framework, plugin or a browser extension?
What are AngularJS features?
- Data Binding
- MVC (Model, View & Controller)
- Dependency Injection
What are Modules in AngularJS?
AngularJS modules are containers just like namespace in C#. They divide an angular app into small, reusable and functional components which can be integrated with other angular app. Each module is identified by a unique name and can be dependent on other modules. In AngularJS, every web page (view) can have a single module assigned to it via ng-app directive.
// defining module angular.module('myApp', );
//OR defining module which has dependency on other modules angular.module
What components can be defined within AngularJS modules?
- Config settings and Routes
What is core module in AngularJS?
ng is the core module in angular. This module is loaded by default when an angular app is started. This module provides the essential components for your angular app like directives, services/factories, filters, global APIs and testing components.
How angular modules load the dependencies?
An angular module use configuration and run blocks to inject dependencies (like providers, services and constants) which get applied to the angular app during the bootstrap process.
What is difference between config() and run() method in AngularJS?
Configuration block –
This block is executed during the provider registration and configuration phase. Only providers and constants can be injected into configuration blocks. This block is used to inject module wise configuration settings to prevent accidental instantiation of services before they have been fully configured. This block is created using config() method.
Run block –
This block is executed after the configuration block. It is used to inject instances and constants. This block is created using run() method. This method is like as main method in C or C++. The run block is a great place to put event handlers that need to be executed at the root level for the application. For example, authentication handlers.
When dependent modules of a module are loaded?
A module might have dependencies on other modules. The dependent modules are loaded by angular before the requiring module is loaded.
In other words the configuration blocks of the dependent modules execute before the configuration blocks of the requiring module. The same is true for the run blocks. Each module can only be loaded once, even if multiple other modules require it.
What is Angular Prefixes $ and $$?
To prevent accidental name collisions with your code, Angular prefixes names of public objects with $ and names of private objects with $$. So, do not use the $ or $$ prefix in your code.
What are Directives in AngularJS?
What is the role of ng-app, ng-init and ng-model directives?
The main role of these directives is explained as:
- ng-app – Initialize the angular app.
- ng-init – Initialize the angular app data.
- ng-model – Bind the html elements like input, select, text area to angular app model.
Is AngularJS a templating system?
At the highest level, Angular does look like a just another templating system. But there is one important reason why the Angular templating system is different, that makes it very good fit for application development: bidirectional data binding. The template is compiled in the browser and the compilation step produces a live view. This means you, the developers, don’t need to write code to constantly sync the view with the model and the model with the view as in other templating systems.
What is a scope in AngularJS?
scope is an object that refers to the application model. It is the glue (binding part) between application controller and the view.
If we consider an AngularJS application to consist of:
- View, which is the HTML.
- Model, which is the data available for the current view.
Then the scope is the Model.
Link combines the directives with a scope and produce a live view. For registering DOM listeners as well as updating the DOM, link function is responsible. After that template is cloned it is executed.
- Pre-linking function: Pre-linking function is executed before the child elements are linked. It is not considered as the safe way for DOM transformation.
- Post linking function:Post linking function is executed after the child elements are linked. It is safe to do DOM transformation by post-linking function.
Explain what is injector?
There is one injector per Angular application. Normally you don’t need to interact with it directly. The injector is key to making dependency injection work in Angular.
Module methods such as
directive, etc. register these items with the injector. When you inject something (e.g., a service into a controller), the injector will lookup and then instantiate the service (if it wasn’t instantiated already — if it was, it will return the already-instantiated object).
Explain what is string interpolation in angular.js ?
In angular.js the compiler during the compilation process matches text and attributes using interpolate service to see if they contains embedded expressions. As part of normal digest cycle these expressions are updated and registered as watches.
Mention the steps for the compilation process of HTML happens?
Compilation of HTML process occurs in following ways:
- Using the standard browser API, first the HTML is parsed into DOM
- By using the call to the $compile () method, compilation of the DOM is performed. The method traverses the DOM and matches the directives.
- Link the template with scope by calling the linking function returned from the previous step
Explain what is the difference between link and compile in angular.js?
In compile phase the angular parser starts parsing the DOM and whenever the parser encounters a directive it creates a function. These functions are termed as template or compiled functions. In this phase we do not have access to the $scope data. In the link phase the data i.e. ($scope) is attached to the template function and executed to get the final HTML output.
Compile – It works on template. It’s like adding a class element in to the DOM (i.e., manipulation of tElement = template element), hence manipulations that apply to all DOM clones of the template associated with the directive.
Link – It works on instances. Usually used for registering DOM listeners (i.e., $watch expressions on the instance scope) as well as instance DOM manipulation. (i.e., manipulation of iElement = individual instance element).
Mention what are the styling form that ngModel adds to CSS classes ?
ngModel adds these CSS classes to allow styling of form as well as control:
- ng- valid
- ng- invalid
Mention what are the advantages of using Angular.js framework ?
Advantages of using Angular.js as framework are:
- Supports two way data-binding
- Supports MVC pattern
- Support static template and angular template
- Can add custom directive
- Supports REST full services
- Supports form validations
- Support both client and server communication
- Support dependency injection
- Applying Animations
- Event Handlers
Explain AngularJS boot process?
When the page is loaded in the browser, following things happen:
- Next AngularJS scans through the HTML to look for AngularJS apps and views. Once view is located, it connects that view to the corresponding controller function.
- Next, AngularJS executes the controller functions. It then renders the views with data from the model populated by the controller. The page gets ready.
Explain ng-app directive?
Explain ng-model directive?
ng-model directive binds the values of AngularJS application data to HTML input controls.
Explain ng-bind directive?
ng-bind directive binds the AngularJS Application data to HTML tags.
Explain ng-controller directive
ng-controller directive tells AngularJS what controller to use with this view
Explain ng-repeat directive ?
What are AngularJS expressions ?
What is use of $routeProvider in AngularJS ?
$routeProvider is the key service which set the configuration of urls, maps them with the corresponding html page or ng-template, and attaches a controller with the same.
What is $rootScope ?
What is a service ?
What is internationalization ?
Internationalization is a way to show locale specific information on a website. For example, display content of a website in English language in United States and in Danish in France.
What is the difference between
ng-hide will always insert the DOM element, but will display/hide it based on the condition.
ng-if will not insert the DOM element until the condition is not fulfilled.
ng-if is better when we needed the DOM to be loaded conditionally, as it will help load page bit faster compared to
What is a digest cycle in AngularJS?
In each digest cycle Angular compares the old and the new version of the scope model values. The digest cycle is triggered automatically. We can also use
$apply() if we want to trigger the digest cycle manually.
For more information, take a look in the ng-book explanation: The Digest Loop and $apply
Where should we implement the DOM manipulation in AngularJS?
In the directives. DOM Manipulations should not exist in controllers, services or anywhere else but in directives.
Here is a detailed explanation
What is the difference between one-way binding and two-way binding?
– One way binding implies that the scope variable in the html will be set to the first value its model is bound to (i.e. assigned to)
– Two way binding implies that the scope variable will change it’s value everytime its model is assigned to a different value.
$scope.$apply re-evaluates all the declared ng-models and applies the change to any that have been altered (i.e. assigned to a new value)
Explanation: $scope.$apply() is one of the core angular functions that should never be used explicitly, it forces the angular engine to run on all the watched variables and all external variables and apply the changes on their values.
What directive would you use to hide elements from the HTML DOM by removing them from that DOM not changing their styling?
ngIf Directive, when applied to an element, will remove that element from the DOM if it’s condition is false.
What makes the
angular.copy() method so powerful?
It creates a deep copy of the variable. A deep copy of a variable means it doesn’t point to the same memory reference as that variable. Usually assigning one variable to another creates a “shallow copy”, which makes the two variables point to the same memory reference. Therefore if we change one, the other changes as well.
When creating a directive, it can be used in several different ways in the view. Which ways for using a directive do you know? How do you define the way your directive will be used?
When you create a directive, it can be used as an attribute, element or class name. To define which way to use, you need to set the restrict option in your directive declaration.
The restrict option is typically set to:
‘A’ – only matches attribute name
‘E’ – only matches element name
‘C’ – only matches class name
These restrictions can all be combined as needed:
‘AEC’ – matches either attribute or element or class name
When should you use an attribute versus an element?
Use an element when you are creating a component that is in control of the template. Use an attribute when you are decorating an existing element with new functionality.
Explain what is a
$scope in AngularJS
Scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events. Scopes are objects that refer to the model. They act as glue between controller and view.
This question is important as it will judge a persons knowledge about a $scope object, and it is one of the most important concepts in AngularJS. Scope acts like a bridge between view and model.
What are Directives?
Directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS’s HTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children. Angular comes with a set of these directives built-in, like ngBind, ngModel, and ngClass. Much like you create controllers and services, you can create your own directives for Angular to use. When Angular bootstraps your application, the HTML compiler traverses the DOM matching directives against the DOM elements.
This question is important because directives define the UI while defining a single page app. You need to be very clear about how to create a new custom directive or use the existing ones already pre-build in AngularJS.
What is a singleton pattern and where we can find it in Angularjs?
Is a great pattern that restricts the use of a class more than once. We can find singleton pattern in angular in dependency injection and in the services.
In a sense, if you do 2 times ‘
new Object()‘ without this pattern, you will be alocating 2 pieces of memory for the same object. With singleton pattern, if the object exists, you reuse it.
How would you programatically change or adapt the template of a directive before it is executed and transformed?
You would use the compile function. The compile function gives you access to the directive’s template before transclusion occurs and templates are transformed, so changes can safely be made to DOM elements. This is very useful for cases where the DOM needs to be constructed based on runtime directive parameters.