AngularJS is a JavaScript framework that is used for making rich, extensible web applications. It runs on plain JavaScript and HTML, so you don't need any other dependencies to make it work. Below are some basic facts about AngularJS that must an AngularJs Developer know before appearing in AngularJs Interview

Based On: MVC and MVVM design pattern. Design Patterns in programming languages are used write reusable and maintainable code for commonly occurring problems in Software Engineering.

Written In: AngularJs 1.x is written in Javascript. It one of the most popular programming language on the web for creating interactive and scalable front end and server applications.

Top 80 AngularJS Interview Questions and Answers.

What is Angular JS?

AngularJS is a JavaScript framework that is used for making rich, extensible web applications. It runs on plain JavaScript and HTML, so you don’t need any other dependencies to make it work.AngularJS is perfect for Single Page Applications (SPA). It is basically used for binding JavaScript objects with HTML UI elements.

What is the Template in AngularJS?

The template is the HTML portion of the angular app. It is exactly like a static HTML page, except that templates contain additional syntax which allows data to be injected in it in order to provide a customized user experience.

What is the scope in AngularJS?

The scope is the object that represents the “model” of your application. It contains fields that store data which is presented to the user via the template, as well as functions which can be called when the user performs certain actions such as clicking a button.

Explain Directives in AngularJs?

AngularJS directives are extended HTML attributes with the prefix ng- The 3 main directives of angular js are

ng-app:- directive is used to flag the HTML element that Angular should consider to be the root element of our application. Angular uses spinal-case for its custom attributes and camelCase for the corresponding directives which implement them.

ng-model:- directive allows us to bind values of HTML controls (input, select, textarea) to application data. When using ngModel, not only change in the scope reflected in the view, but changes in the view are reflected back into the scope.

List some tools for testing AngularJS applications?

For testing AngularJS applications there are certain tools that you should use that will make testing much easier to set up and run.

Karma

Karma is a JavaScript command line tool that can be used to spawn a web server which loads your application’s source code and executes your tests. You can configure Karma to run against a number of browsers, which is useful for being confident that your application works on all browsers you need to support. Karma is executed on the command line and will display the results of your tests on the command line once they have run in the browser.

Karma is a NodeJS application and should be installed through NPM/YARN. Full installation instructions are available on the Karma website.

Jasmine

Jasmine is a behavior-driven development framework for JavaScript that has become the most popular choice for testing AngularJS applications. Jasmine provides functions to help with structuring your tests and also making assertions. As your tests grow, keeping them well structured and documented is vital, and Jasmine helps achieve this.

Jasmine comes with a number of matches that help you make a variety of assertions. You should read the Jasmine documentation to see what they are. To use Jasmine with Karma, we use the karma-jasmine test runner.

angular-mocks

AngularJS also provides the ngMock module, which provides mocking for your tests. This is used to inject and mock AngularJS services within unit tests. In addition, it is able to extend other modules so they are synchronous. Having tests synchronous keeps them much cleaner and easier to work with. One of the most useful parts of ngMock is $httpBackend, which lets us mock XHR requests in tests and return sample data instead.

How do you share data between controllers in AngularJs?

We can share data by creating a service, Services are easiest, fastest and cleaner way to share data between controllers in AngularJs. There are also other ways to share data between controllers, they are

Explain AngularJS digest cycle?

AngularJS digest cycle is the process behind Angular JS data binding. 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.

Explain how does Angular implement two-way binding?

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.

What is dependency injection and how does it work?

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.

What is $rootscope? How is it different from the scope?

In Angular JS $rootscope and $scope both are an object which is used for sharing data from the controller to view. The main difference between $rootscope and $scope is that $rootscope is available globally to across all the controllers whereas $scope is available only in controllers that have created it along with its children controllers.

What is Angular’s prefixes $ and $$?

What are directives? How to create and use custom Directive in Angular js.

In angular Directives are used to extend the attributes of Html elements.Creating custom directive in Angular js.Angular js Directives are restricted to element and attribute and created using a directive function.Here is sample code to create a directive in Angular js.

How to do email and Phone no. validation in Angular JS?

What is the difference between a link and compile in Angular JS?

Compile function: To template DOM manipulation and to gather all the directives, the compile function is used.Link function: To register DOM listeners as well as for the instance DOM manipulation, the Link function is used.

How can you get URL parameters in Controller?

The RouteProvider and the RouteParams can be used to get the URL parameters in the controller. As the route wires up the URL to the controller and RouteParams can be passed to the controller to get the URL parameters.

How to enable caching in Angular 1.x?

Caching can be enabled by setting the config.cache value or the default cache value to TRUE or to a cache object that is created with $cacheFactory. In case you want to cache all the responses, then you can set the default cache value to TRUE. And, if you want to cache a specific response, then you can set the config.cache value to TRUE.

Explain the use of Ng-If, Ng-Switch, And Ng-Repeat directives?

ng-if – This directive removes a portion of the DOM tree, which is based on the expression. In case the expression is assigned to ng-if, it evaluates to a false value, and then the element is deleted from the DOM tree, or else a clone of the element is reinserted into the DOM.ng-switch – This directive is used based on a scope expression to conditionally swap DOM structure on the template. The ng-switch default directive will be preserved at the specific location in a template.ng-repeat – This directive is used to instantiate the template once per item from a collection. Each template which is instantiated gets its own scope where the given loop variable is set to the current collection of item.

What is the use of $locale service in Angular JS?

What is transclusion in Angular JS?

The transclusion in Angular JS will allow you to move the original children of a directive to a specific location inside a new template.The ng directive marks the insertion point for the transcluded DOM of the very near parent directive that uses transclusion.ng-transclude or ng-transclude-slot attribute directives are used for transclusion in Angular JS.

What is a dynamic route in Angular js and how do you implement it?

What is different between ng routing and UI routing?

Explain UI Routing in AngularJS?

Explain Routing in Angular Js?

Routing is one the core feature of AngularJs Framework that is useful in building a single page web application with multiple views. In Angular ngRoute Module is used to implement Routing. ngView,$routeProvider,$route and $routeParams are different components of the ngRoute Module that helps to configure and mapping Url to views.

List some Cons or disadvantages of using AngularJS?

Explain DDO in AngularJs?

What is an interceptor in Angular? Why it is used?

An interceptor is a middleware code in AngularJs where all the $http requests go through. It is attached with $httpProvider service and able to intercept request and response objects. Interceptor Middleware is useful for error handling, authentication and other filters you want to apply on request and response.