ANGULARJS INTERVIEW QUESTIONS & ANSWERS
- Start with angular from w3schools, it should give you a fare idea abt basics.
- Go through pluralsight angular courses for – Angular Fundamentals, Angular Directives, Angular services in depth.
- Read Angular documentation for the concepts you learned till this point.
- Develop some sample apps like chat app or anything you can think of.
- Pick any random ui element from what you see everyday at web like Facebook Post box and try to make it using directives/components in angular.
- If you can get at this point, you will be able to clear mostly any interview on angular.
AngularJS is a framework to build large scale and high performance web application while keeping them as easy-to-maintain. Following are the features of AngularJS framework.
AngularJS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache License version 2.0.
According to AngularJS.org, “Data-binding in Angular apps is the automatic synchronization of data between the model and view components. The way that Angular implements data-binding lets you treat the model as the single-source-of-truth in your application. The view is a projection of the model at all times. When the model changes, the view reflects the change and vice versa.”
There are two ways of data binding:
- Data mining in classical template systems
- Data binding in angular templates
- MVC – In AngularJS, you just have to split your application code into MVC components, i.e., Model, View and the Controller.
- Validations – It performs client-side form validation.
- Modules – It defines an application.
- Directives – It specifies behavior on the DOM element.
- Templates – It renders the dynamic view.
- Scope – It joins the controller with the views.
- Expressions – It binds application data to HTML
- Data Binding – It creates a two-way data-binding between the select element and the orderProp model.
- Filters – It provides the filter to format data.
- Services – It stores and shares data across the application.
- Routing – It is used to build a single page application.
- Dependency Injection – It specifies a design pattern in which components are given their dependencies instead of hardcoding them within the component.
- Testing – It is easy to test any of the AngularJS components through unit testing and end-to-end testing.
Scope refers to the application model, it acts like glue between application controller and the view. Scopes are arranged in hierarchical structure and impersonate the DOM ( Document Object Model) structure of the application. It can watch expressions and propagate events
In AngularJS services are the singleton objects or functions that are used for carrying out specific tasks. It holds some business logic and these function can be called as controllers, directive, filters and so on.
- Allows us to create a single page application
- Follows MVC pattern
- Predefined form validations
- Supports animation
- Open source
- Cross-browser compliant
- Supports two-way data binding
- Its code is unit testable
Explain what are directives ? Mention some of the most commonly used directives in AngularJS application ?
A directive is something that introduces new syntax, they are like markers on DOM element which attaches a special behavior to it. In any AngularJS application, directives are the most important components.
Some of the commonly used directives are ng-model, ng-App, ng-bind, ng-repeat , ng-show etc.
Angular js routes enable you to create different URLs for different content in your application. Different URLs for different content enables user to bookmark URLs to specific content. Each such bookmarkable URL in AngularJS is called a route
Injecting a value into an AngularJS controller function is done by adding a parameter with the same name as the value
- No Control Flow Statements: We cannot use loops, conditionals or exceptions in an Angular expression
Model View Controller or MVC as it is popularly called, is a software design pattern for developing web applications. A Model View Controller pattern is made up of the following three parts:
- Model − It is the lowest level of the pattern responsible for maintaining data.
- View − It is responsible for displaying all or a portion of the data to the user.
- Controller − It is a software Code that controls the interactions between the Model and View.
- Currency – It formats a number to a currency format.
- Date – It formats a date to a specified format.
- Filter – It selects a subset of items from an array.
- JSON – It formats an object to a Json string.
- Limit – It is used to limit an array/string, into a specified number of elements/characters.
- Lowercase – It formats a string to lower case.
- Number – It formats a number to a string.
- Orderby – It orders an array by an expression.
- Uppercase – It formats a string to upper case.
An injector is a service locator. It is used to retrieve object instances as defined by 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.
- ng-app : Initializes application.
- ng-model : Binds HTML controls to application data.
- ng-Controller : Attaches a controller class to view.
- ng-repeat : Bind repeated data HTML elements. Its like a for loop.
- ng-if : Bind HTML elements with condition.
- ng-show : Used to show the HTML elements.
- ng-hide : Used to hide the HTML elements.
- ng-class : Used to assign CSS class.
- ng-src : Used to pass the URL image etc.
No. Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. If another ng-app directive has been placed then it will not be processed by AngularJS and we will need to manually bootstrap the second app, instead of using second ng-app directive.
In One-Way data binding, view (UI part) not updates automatically when data model changed. We need to write custom code to make it updated every time.
ng-bind has one-way data binding.
While in two way binding scope variable will change it’s value every time its data model changed is assigned to a different value
AngularJS was designed to highlight the power of dependency injection, a software design pattern that places an emphasis on giving components their dependencies instead of hardcoding them within the component. For example, if you had a controller that needed to access a list of customers, you would store the actual list of customers in a service that can be injected into the controller instead of hardcoding the list of customers into the code of the controller itself. In AngularJS you can inject values, factories, services, providers, and constants.
Data-binding in Angular apps is the automatic synchronization of data between the model and view components. The way that Angular implements data-binding lets you treat the model as the single-source-of-truth in your application. The view is a projection of the model at all times. When the model changes, the view reflects the change and vice versa.
Every application has a single root scope. All other scopes are descendant scopes of the root scope. Scopes provide separation between the model and the view, via a mechanism for watching the model for changes. They also provide event emission/broadcast and subscription facility.
ng-model directive binds the values of AngularJS application data to HTML input controls. It creates a model variable which can be used with the html page and within the container control( for example, div) having ng-app directive.
ng-bind directive binds the AngularJS Application data to HTML tags. ng-bind updates the model created by ng-model directive to be displayed in the html tag whenever user input something in the control or updates the html control’s data when model data is updated by controller.
ng-init directive initializes an AngularJS Application data. It is used to put values to the variables to be used in the application.
ngModel adds these CSS classes to allow styling of form as well as control
- ng- valid
- ng- invalid
It is a web application which loads a single HTML page and dynamically updates the page as the user connects with the app.
By using AJAX and HTML a fluid and responsive web app can be created by SPA without invariant page reloads. Through this, we can make responsive UI with no page flicker.