Angularjs Interview Questions: AngularJS is a JavaScript-based open-source framework maintained by Google that is designed for building extensible web applications.
AngularJS Interview Questions
Q:- What is AngularJS?
- AngularJS is a javascript framework used for creating single web page applications.
- It is an open source javasScript framework which is written in javascript and managed by Google
- It allows you to use HTML as your template language and enables you to extend HTML's syntax to express your application's components clearly
Q:- Who created Angular JS ?
Initially, it was developed by Misko Hevery and Adam Abrons. Currently, it is being maintained by Google.
Q:- What are the advantages of using Angularjs framework ?
Advantages of using Angularjs as a 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
- Applying Animations
- Event Handlers
- AngularJS code is unit testable.
- AngularJS provides reusable components.
- Support both client and server communication
- AngularJS, developer write less code and get more functionality.
- AngularJS uses dependency injection and make use of separation of concerns.
- In AngularJS, views are pure html pages, and controllers written in JavaScript do the business processing.
- AngularJS provides the capability to create Single Page Application in a very clean and maintainable way.
AngularJS applications can run on all major browsers and smartphones including Android and iOS-based phones/tablets.
Q:- What are the disadvantages of AngularJS?
Though AngularJS comes with lots of plus points same time we should consider the following points −- Not Secure − Being JavaScript only framework, an application written in Angular JS are not safe. Server-side authentication and authorization is must keep an application secure.
- Not degradable − If your application user disables JavaScript then the user will just see the basic page and nothing more.
Q:- Explain what are the key features of AngularJS ?
The key features of AngularJS are
- Data Binding
- Scope
- Components
- Services
- Filters
- Directives
- Templates
- Routing
- Model View Controller
Data-binding:
Data binding means that when an element is changed in the user interface, the underlying data model is also changed. and two-way binding if Data model is changed, the UI element is also changed.Q:- Explain data binding in AngularJS ?
Automatic synchronization of data between the model and view components is referred as data binding in AngularJS.
There are two ways for data binding
- Data mining in classical template systems
- Data binding in angular templates
Scope:
Scope is nothing but an object that acts as a glue between View and Controller. They hold the Model data that we need to pass to view. Scope uses Angular’s two-way data binding to bind model data to the view.Q:- Mention what are the characteristics of "Scope"?
- To observer model mutations scopes provide APIs ($watch)
- To propagate any model changes through the system into the view from outside of the Angular realm
- A scope inherits properties from its parent scope, while providing access to shared model properties, scopes can be nested to isolate application components
- Scope provides context against which expressions are evaluated
Components:
Modules are logical entities and responsible for maintaining your app data. if your application has several modules than each module have a separate logical entity.Services:
AngularJS come with several built-in services for example $http to make a XMLHttpRequests. These are singleton objects which are instantiated only once in app.Filters:
A filter format the value of an expression for display to the user.Select a subset of items from an array and returns it as a new array.Directives:
Directives are markers on DOM elements (DIV, HTML, BODY,attributes and css), and used to create custom HTML tags that serve as new, custom widgets. AngularJS has built-in directives (ngBind, ngModel)
Q:- Most commonly used directives in AngularJS application?
Some of the commonly used directives are:
- ng-App
- ng-model
- ng-bind
- ng-repeat
- ng-show
Templates:
These are the rendered view with information from the controller and model.Routing:
− It is the concept of switching views.Model View Controller:
MVC is a design pattern for dividing an application into different parts (called Model, View and Controller), each with distinct responsibility.
Dependency Injection:
Dependency Injection (DI) is a software design pattern that deals with how components get hold of their dependencies.You may also like - React.js Interview Questions Answers
AngularJS Interview Questions
Q:- What is Angular Expression?
Like JavaScript, Angular expressions are code snippets that are usually placed in binding such as {{ expression }}
The key difference between the JavaScript expressions and Angular expressions
- Context : In Angular, the expressions are evaluated against a scope object, while the Javascript expressions are evaluated against the global window
- Forgiving: In Angular expression evaluation is forgiving to null and undefined, while in Javascript undefined properties generates TypeError or ReferenceError
- No Control Flow Statements: Loops, conditionals or exceptions cannot be used in an angular expression
- Filters: To format data before displaying it you can use filters
Q:- With options on page load how you can initialize a select box ?
You can initialize a select box with options on page load by using ng-init directive
- <div ng-controller = "apps/dashboard/account" ng-switch
- On = "!! accounts" ng-init = "loadData()">
Q:- Explain what Angular JS routes does ?
Angular js routes enable you to create different URLs for different content in your application. Different URLs for different content enables the user to bookmark URLs to specific content. Each such bookmarkable URL in AngularJS is called a route
A value in Angular JS is a simple object. It can be a number, string or JavaScript object. Values are typically used as configuration injected into factories, services or controllers. A value should belong to an AngularJS module.
Injecting a value into an AngularJS controller function is done by adding a parameter with the same name as the value
You may also like - Javascript ES6 Interview Questions
Q:- What makes AngularJS better ?
- Registering Callbacks: There is no need to register callbacks . This makes your code simple and easy to debug.
- Control HTML DOM programmatically: All the application that are created using Angular never have to manipulate the DOM although it can be done if it is required
- Transfer data to and from the UI: AngularJS helps to eliminate almost all of the boiler plate like validating the form, displaying validation errors, returning to an internal model and so on which occurs due to flow of marshalling data
- No initilization code: With AngularJS you can bootstrap your app easily using services, which auto-injected into your application in Guice like dependency injection style
Q:- 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 contain embedded expressions. As part of normal digest cycle, these expressions are updated and registered as watches.
Q:- 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
Q:- Explain what is linking function and type of linking function?
Link combines the directives with a scope and produces a live view.
For registering DOM listeners as well as updating the DOM, link function is responsible. After the 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
Q:- Explain what is injector?
An injector is a service locator. It is used to retrieve object instances as defined by the provider, instantiate types, invoke methods and load modules.
There is a single injector per Angular application, it helps to look up an object instance by its name.
Q:- Explain what is the difference between link and compile in Angular.js?
- Compile function: It is used for template DOM Manipulation and collect all of the directives.
- Link function: It is used for registering DOM listeners as well as instance DOM manipulation. It is executed once the template has been cloned.
Q:- Explain what is factory method in AngularJS?
For creating the directive, the factory method is used. It is invoked only once when compiler matches the directive for the first time. By using the $injector. invoke the factory method is invoked.
Q:- 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
- ng-pristine
- ng-dirty
Q:- Explain what is DI (Dependency Injection ) and how an object or function can get a hold of its dependencies ?
DI or Dependency Injection is a software design pattern that deals with how code gets hold of its dependencies. In order to retrieve elements of the application which is required to be configured when a module gets loaded, the operation "config" uses dependency injection.
These are the ways that object uses to hold of its dependencies
- Typically using the new operator, dependency can be created
- By referring to a global variable, dependency can be looked up
- Dependency can be passed into where it is required
You may also like - Node.js Interview Questions And Answers
Q:- What is scope hierarchy? How many scope can an application have?
Each angular application consists of one root scope but may have several child scopes. As child controllers and some directives create new child scopes, an application can have multiple scopes. When new scopes are formed or created they are added as children of their parent scope. Similar to DOM, they also create a hierarchical structure.
Q:- Explain what is the difference between AngularJS and backbone.js?
- Angular has integrated built-in utilities, which help to validate client input before it gets processed or sent to a server;
- Angular has dedicated debugging tools;
- Angular checks for any changes and updates the corresponding fields;
- Angular has a popular plugin which includes facilities to create view animations.
- Backbone allows to integrate third party libraries well;
- Backbone uses observables for data binding (it observes Models);
- Backbone has a possibility to be extended in order to support models and views updating each other;
- Backbone might work well with other template engines (more than one).
You may also like - JavaScript Interview Questions