Angularjs Tricky Interview Questions Answers
1) What is AngularJS?
- 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
Advantages of Angular JS
- AngularJS provides the capability to create Single Page Application in a very clean and maintainable way.
- AngularJS provides data binding capability to HTML thus giving the user a rich and responsive experience
- AngularJS code is unit testable.
- AngularJS uses dependency injection and make use of separation of concerns.
- AngularJS provides reusable components.
- AngularJS, developer write less code and get more functionality.
On top of everything, AngularJS applications can run on all major browsers and smartphones including Android and iOS-based phones/tablets.
Disadvantages of Angular JSThough Angular`JS comes with lots of plus points same time we should consider the following points −
Core Features of Angular JSData-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.
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.
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)
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.
Model: It is responsible for maintaining data.In below example we use $scope is an object, user is a variable which is added to scope object.
View: It is responsible for display data to the user.or we can say view is the DOM elements which is used to display data.
Controller: Controller is the place where we put our application logic and used model to get the data and send it to the view for user interaction.Controller is formed simply java script classes where we declare over action for particular task.
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
2) Explain what are the key features of AngularJS ?The key features of AngularJS are
- Data Binding
3) Explain what is scope in AngularJS ?Scope refers to the application model, it acts like glue between the application controller and the view. Scopes are arranged in a hierarchical structure and impersonate the DOM ( Document Object Model) structure of the application. It can watch expressions and propagate events.
4) Explain what is services in AngularJS ?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.
- 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
6) 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 ( ) ”>
7) 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 an 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.
8) Mention what are the advantages of using AngularJS ?AngularJS has several advantages in web development.
- AngularJS supports MVC pattern
- Can do two ways data binding using AngularJS
- It has per-defined form validations
- It supports both client server communication
- It supports animations
10) Explain what is 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
11) 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
12) 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.
13) 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
14) Explain what is directive and Mention what are the different types of Directive?During the compilation process when specific HTML constructs are encountered a behavior or function is triggered, this function is referred to as directive. It is executed when the compiler encounters it in the DOM. Different types of directives are
- Element directives
- Attribute directives
- CSS class directives
- Comment directives
15) 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
16) 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.
17) 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.
18) 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.
19) 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
20) 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
21) 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
22) Mention what are the advantages of using Angular.js framework ?Advantages of using Angular.js 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
- Support both client and server communication
- Support dependency injection
- Applying Animations
- Event Handlers
You may also like - Node Js Interview Questions And Answers
23) Explain the concept of 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.
24) 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).
25) Who created Angular JS ?Initially, it was developed by Misko Hevery and Adam Abrons. Currently, it is being developed & Maintained by Google.