Q. What is AngularJS & what is its use in web development?
Answer
AngularJS is a structural client-side open-source JavaScript Framework developed by Google.
As we know AngularJS follows the MVW* pattern and it allows us to build well-structured testable & maintainable front-end applications.
Its uses
- AngularJS helps us to create single-page (one-page) applications with the help of HTML, CSS, and JavaScript on the client side.
- AngularJS allows us to create custom directives which are reusable components & abstract your DOM manipulation.
- It supports two-way data binding. With the help of a way data binding model will update the view without any DOM manipulation.
- It supports services & dependency injection which can easily be injected into our controller & provide some utility code as per our requirement.
Q. What are the features used in AngularJS & why?
Answer
AngularJS supports some features that have uses for creating web apps.
AngularJS Feature
- Module: It is like a container for different components.
- Directive: It is a combination of AngularJS template markups and supporting Javascript code.
- Template: It is a combination of HTML, directives, filters & attributes.
- Scope: It is a Java script object that refers to the application module.
- Expression: It is much like JavaScript expression. It uses {{Expression}} to show data in html.
- Data binding: Data binding is synchronized data between model & view.
- MVC Pattern: MVC pattern is also called model view controller.
- Validation: AngularJS provides you built-in validation directive to validate from the client side.
- Filters: It is used to format data before displaying users.
- Services: It is called reusable business logic.
- Routing: It helps you to divide your app into multiple views and bind different views to controllers.
- Dependency Injection: It is a software design pattern that deals with how components get hold of their dependencies.
- Injector: Container of dependency injection.
- Testing: The unit test doesn't need to load all the apps, just loading that specific module is enough to start unit testing.
Q. What is Module & why do we use it?
Answer
It is a container. It divides apps into small components whose reusable, functional components are integrated with other components.
- It is the place where we write AngularJS code for web apps.
- Each module is identified by a unique name and can be dependent on another module.
- It is the place where we define dependencies.
- AngularJS module is single on every web page.
Why do we use Module?
- Modules are used to separate logics say services, controllers, applications, etc., and keep the code clean.
- We define modules in separate JS files and name them as per the module. Js file.
Q. Explain controller inheritance with an example
Answer
Controller inheritance also works like scope inheritance works. Implementing in controller inheritance the child controller will inherit prototypically from its parent's scope, so when we need to reuse that functionality from the parent controller all you need to add is the required method to the parent controller.
Example
<script type="text/javascript">
Module.controller('ParentCtrl', function($scope) {
$scope.$broadcast('event', args);
$scope.$on('event-response', function(result) {});
});
Module.controller('ChildCtrl', function($scope) {
$scope.$on('event', function(args) {
var result;
$scope.$emit('event-response', result);
});
});
</script>
Q. Can you describe the config () & run () method & why we use it?
Answer
- Config: Config block using for block creating in AngularJS.it will executed as provider register. It can only inject provider & constant in configuration block.
- Run: It use to put event handler at root lavel. Run block executed after configuration block.it inject instance & constants.it is like as c,c++ main method.
Q. What is a Dependent Module & which module load first?
Answer
- Dependent module is that which is dependent on other modules in AngularJS. Dependent module is loaded by AngularJS as per requirement.
- Dependent module is loaded first before requremodule loaded on AngularJS.
Example
<script type="text/javascript">
angular.module('App', []);
angular.module('App', ['dependentModule1', 'dependentModule2']);
</script>
Q. Can you define restrict option in directive & can we define it multiple in AngularJS custom directive?
Answer
Restrict option specify us how will you invoke your directive in your AngularJS app.
They are attribute, class, element& comment.
- Attribute: It denoted by “A” it is like as-<span my-directive></span>
- Class: It denoted by “c” it is like as-<span class=“my-directive: expression ;”>< /span>
- Element: It denoted by “E” it is like as-<my-directive></my-directive>
- Comment: It denoted by “M” it is like as-<!—directive: my-directive: expression-->
Yes we define multiple restrict option in AngularJS app.
As- restrict:’EAC’
Q. Why do you use ng-show and ng-hide & how are they different from each other?
Answer
ng-show & ng-hide is used for showing html elements in AngularJS; it is based on AngularJS expression. When expression goes true ng-show operation perform other wise ng-hide operation perform.
As
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<h3>ng-show & ng-hide</h3> <br/>
<script>
var app = angular.module("app", []);
app.controller("MyCtrl", function($scope) {
$scope.data = {};
$scope.data.isShow = true;
$scope.data.isHide = true;
});
</script>
<div ng-controller="MyCtrl">
<div ng-show="data.isShow">ng-show Visible</div>
<div ng-hide="data.isHide">ng-hide Invisible</div>
</div>
</body>
</html>
Q. Why do you use ng-include & what is its actual meaning in AngularJS?
Answer
- Ng-include are used for external html fragment for other file in html template view.
- Ng-include is an AngularJS directive.
Q. Explain about data binding.
Answer
Data binding is used for codeless writing and performing good operation in AngularJS. With the help of data binding the developer has no more responsibility for manual manipulation on DOM elements and attributes for reflection change in model or view.
AngularJS provides two-way data binding with help of that, you can easily changes your reflection corresponding with model and view.
It has two types.
- One way data binding: it works manually not reflect any changes.
- Two way data binding: it works automatically it reflects changes on model & view.
Read more articles on AngularJS
You can enhance your knowledge more, by reading the following articles.