Question Bank Solutions AngularJs FrontEnd (AJF) 2022-23

1. What is Angular? What are the advantages of using Angular?

Angular is a JavaScript framework for building web applications. It is developed and

maintained by Google. Angular uses a component-based architecture and a powerful
template language to build dynamic, interactive user interfaces.

Angular is a complete JavaScript framework for building web applications. It is based

on the Model-View-Controller (MVC) architectural pattern, which separates the
application into three main components: the model, which represents the data; the
view, which represents the user interface; and the controller, which handles the logic
of the application. Angular uses a component-based architecture, where each
component represents a specific piece of functionality in the application.

Advantages of using Angular include:

● Two-way data binding, which allows changes in the user interface to

automatically update the underlying data model and vice versa
● A powerful template language that allows developers to declaratively describe
the user interface
● A component-based architecture that makes it easy to build and maintain
large, complex web applications
● A rich set of built-in directives and services that make it easy to add
functionality to an application, such as routing and forms management
● Support for unit testing, which makes it easy to ensure that an application is
working correctly before it is deployed.
● Large Community and resources available for learning and troubleshooting
● Strongly typed language (Typescript) which help in catching errors during
development time.

One of the key features of Angular is its two-way data binding. This allows changes in
the user interface to automatically update the underlying data model and vice versa.
This means that when the user interacts with the application, the data model is
updated in real-time, and the changes are reflected in the user interface without the
need for manual updates.

Angular also has a powerful template language that allows developers to declaratively
describe the user interface. This language allows developers to create custom HTML
elements and attributes that can be reused across the application.

Angular also has a rich set of built-in directives and services that make it easy to add
functionality to an application, such as routing and forms management. This means
that developers do not have to write code to handle these tasks, as Angular provides
pre-built solutions that can be easily integrated into the application.

Angular also has good support for unit testing, which makes it easy to ensure that an
application is working correctly before it is deployed. This means that developers can
write automated tests for their code, which can be run on a regular basis to ensure
that the application is functioning as expected.
AngularJs FrontEnd (AJF) 2022-23 1
 Finally, Angular has a large community and many resources available for learning and
troubleshooting. This makes it easy for developers to find help and solutions when
they encounter problems.

2. Express the general characteristics of JavaScript frameworks

JavaScript frameworks are libraries or collections of pre-written JavaScript code that

provide a set of features and tools to help developers build web applications more
efficiently. Some general characteristics of JavaScript frameworks include:

● Component-based architecture: Many JavaScript frameworks use a

component-based architecture, where each component represents a specific
piece of functionality in the application. This allows for better organization and
maintainability of code.
● Two-way data binding: Many JavaScript frameworks provide two-way data
binding, which allows changes in the user interface to automatically update
the underlying data model and vice versa. This simplifies the process of
keeping the user interface and data model in sync.
● Routing: Many JavaScript frameworks provide routing, which allows
developers to map different URLs to different views or components in the
application. This makes it easy to create single-page applications that can be
navigated like traditional multi-page applications.
● DOM manipulation: JavaScript frameworks provide methods and tools for
manipulating the Document Object Model (DOM), which is the tree-like
structure that represents the elements of a web page. This allows developers
to change the appearance and behavior of web pages without having to
directly manipulate the HTML and CSS code.
● Event handling: JavaScript frameworks provide event handling, which allows
developers to respond to events, such as button clicks or form submissions, in
the application.
● Templating: Many JavaScript frameworks provide a powerful template
language that allows developers to declaratively describe the user interface.
This allows for a more efficient way of creating and maintaining the views of
the applications.
● Testing: Many JavaScript frameworks provide built-in support for unit testing,
which makes it easy to ensure that the application is working correctly before
it is deployed.
● Cross-browser compatibility: JavaScript frameworks are designed to work on
a variety of different web browsers, so developers do not have to worry about
compatibility issues when building their applications.

3. What is Full-stack Development? Explain the 3 types of developers

Full-stack development refers to the practice of developing both the front-end and
back-end aspects of a web application. Full-stack developers are responsible for the
entire development process of a web application, from the user interface to the
database and servers.

There are three types of developers that make up a full-stack development team:

AngularJs FrontEnd (AJF) 2022-23 2

 1. Front-end developers: These developers are responsible for the design and
user experience of the web application. They use technologies such as HTML,
CSS, and JavaScript to create the user interface and make it interactive. They
work closely with designers to ensure that the final product is visually
appealing and user-friendly.

2. Back-end developers: These developers are responsible for the server-side of

the web application. They use technologies such as Node.js, Python, Ruby,
and Java to create the logic and functionality of the web application. They
work with databases and servers to ensure that the web application is fast and
secure.

3. Full-stack developers: These developers have expertise in both front-end and

back-end development, and are able to work on both sides of the web
application. They are able to bridge the gap between the front-end and
back-end, and ensure that the web application is working seamlessly.

It's worth noting that some people may use the term "Full-stack developer" to refer to
someone who is able to work on all layers of the stack, including infrastructure and
deployment.

In general, full-stack development is a multidisciplinary field that requires knowledge

of a wide range of technologies and skills. It requires the ability to understand and
work with different parts of the web application, as well as the ability to troubleshoot
and solve problems that may arise.

4. Give an overview of the Angular Filters used in Angular Framework.

Angular filters are used to format and transform data in Angular templates. They can
be used to format dates, numbers, and strings, as well as to filter arrays and objects.

Here are some common filters used in Angular:

● currency: Formats a number as a currency value. For example, {{ price |

currency }} would display the price as a currency value, such as $10.00.
● date: Formats a date using a specified format. For example, {{ date | date:
'MM/dd/yyyy' }} would display the date in the format of Month/Day/Year.
● filter: Filters an array of items based on a specific criteria. For example, {{ items
| filter:searchText }} would filter an array of items based on the searchText
entered by the user.
● json: Converts an object to a JSON string. For example, {{ data | json }} would
display the data object as a JSON string.
● limitTo: Limits the number of items in an array. For example, {{ items | limitTo:5
}} would only display the first five items in the array.
● lowercase: Converts a string to lowercase. For example, {{ name | lowercase }}
would display the name in lowercase.
● number: Formats a number with a specified number of decimal places. For
example, {{ price | number:2 }} would display the price with 2 decimal places.
● orderBy: Orders an array of items by a specific criteria. For example, {{ items |
orderBy: 'name' }} would order the items by their name.
● uppercase: Converts a string to uppercase. For example, {{ name | uppercase
}} would display the name in uppercase.

AngularJs FrontEnd (AJF) 2022-23 3

 These are some of the most common filters used in Angular, but Angular also
provides the ability to create custom filters. Custom filters can be created to perform
specific tasks and can be reused throughout the application.

5. What are the building blocks of Angular, Give overview of Angular

architecture?

The building blocks of Angular are:

● Modules: Modules are the basic building blocks of an Angular application.

They help in organizing and grouping different parts of an application, such as
components, services, and directives.

● Components: Components are the building blocks of an Angular application.

They define the view and logic of an application, and consist of a template, a
class, and metadata.

● Templates: Templates are the views of an Angular application. They are

written in HTML and define the layout and structure of the user interface.

● Directives: Directives are used to add behavior to an element in a template.

They are used to add functionality to an application, such as displaying or
hiding elements based on certain conditions.

● Services: Services are used to share data and functionality between different
parts of an application. They are used to encapsulate business logic and can
be injected into different components.

● Dependency Injection: Angular uses dependency injection to manage the

dependencies between different parts of an application. This allows for easier
testing and maintainability of code.

● Data binding: Angular uses two-way data binding to automatically update the
user interface when the underlying data model changes. This allows for a
seamless connection between the user interface and the data model.

● Routing: Angular provides a powerful routing system that allows developers to

map different URLs to different views or components in the application. This
makes it easy to create single-page applications that can be navigated like
traditional multi-page applications.

In summary, Angular architecture is based on a component-based architecture, where

each component represents a specific piece of functionality in the application. Angular
uses a template language that allows developers to declaratively describe the user
interface. Angular uses two-way data binding to automatically update the user
interface when the underlying data model changes. Angular also provides powerful
routing, dependency injection, and other features that make it easy to build and
maintain large, complex web applications.

AngularJs FrontEnd (AJF) 2022-23 4

6. What is meant by full-stack web development,describe the Technologies used
in Full stack development.

Full-stack web development refers to the practice of developing both the front-end
and back-end aspects of a web application. A full-stack web developer is proficient in
working with a variety of technologies that are used to build web applications.

Here are some common technologies used in full-stack web development:

Front-end Technologies:

● HTML, CSS, and JavaScript: These are the core technologies used to create
the user interface and make it interactive.
● JavaScript Frameworks and Libraries: Popular frameworks include Angular,
React and VueJS, which provide a set of features and tools to help developers
build web applications more efficiently.
● CSS Frameworks: Frameworks such as Bootstrap, Foundation and Bulma are
used to create responsive, mobile-friendly designs and make it easy to quickly
create a polished, professional-looking website.

Back-end Technologies:

● Server-side languages: Common server-side languages include JavaScript

(Node.js), Python, Ruby, and Java. These languages are used to create the
logic and functionality of the web application.
● Databases: Popular databases include MySQL, MongoDB, and SQL Server.
These are used to store, retrieve and manipulate data for the web application.
● Web Server: Apache, Nginx, and IIS are commonly used web servers that
handle the request and response between the client and the server.

Other Technologies:

● Git: Git is a version control system that is used to track changes in code,
collaborate with other developers, and deploy code to a production
environment.
● Cloud Services: Cloud services such as Amazon Web Services, Google
Cloud, and Microsoft Azure are often used to host web applications and store
data.
● Other tools such as npm, yarn, webpack, etc. can be used to manage and
bundle the packages and dependencies of the project.
● It's important to note that this is not an exhaustive list and depending on the
project, other technologies may be used as well. As Full-stack development is
an ever-evolving field, developers are expected to keep learning new
technologies and tools to stay current in their skills.

7. (i) Explain grunt and gulp used in Angular.

Grunt and Gulp are JavaScript task runners that are commonly used in Angular
development to automate repetitive tasks such as minification, compilation, and
testing.

AngularJs FrontEnd (AJF) 2022-23 5

Grunt is a JavaScript task runner that runs on Node.js. It uses a configuration file
(Gruntfile.js) to define the tasks that need to be executed. Grunt can be used to
perform a variety of tasks such as concatenation, minification, linting, and testing.
Grunt also has a large number of plugins available to perform specific tasks.

Gulp is another JavaScript task runner that also runs on Node.js. Like Grunt, it can be
used to automate repetitive tasks. However, it uses a code-over-configuration
approach, which means that tasks are defined using JavaScript code rather than a
configuration file. This allows for more flexibility in defining tasks and makes it easier
to understand and maintain the code.

Both Grunt and Gulp can perform similar tasks, such as minifying and concatenating
files. However, the main difference between the two is how the tasks are defined.
Grunt uses a configuration file, while Gulp uses JavaScript code. This makes Gulp
more flexible and easier to understand and maintain.

In summary, Grunt and Gulp are both JavaScript task runners that can be used to
automate repetitive tasks in Angular development. Both have their own strengths and
weaknesses, and the choice between the two depends on the specific needs of the
project and the preference of the developer.

(ii) Explain two types of binding in AngularJS.

In AngularJS, there are two types of binding: one-way binding and two-way binding.

● One-way binding: In one-way binding, changes made in the model are

reflected in the view, but changes made in the view are not reflected in the
model. This type of binding is useful when you want to display data but do not
want the user to be able to modify it.

● Two-way binding: In two-way binding, changes made in the model are

reflected in the view and changes made in the view are also reflected in the
model. This type of binding is useful when you want to allow the user to
interact with the data and modify it.

Both types of binding are achieved by using AngularJS directives such as ng-bind,
ng-model and {{expression}} .

AngularJs FrontEnd (AJF) 2022-23 6

8. Illustrate the MVC architecture of AngularJS with the Hello World program.

The MVC (Model-View-Controller) architecture is used in AngularJS to separate the

application logic into three different components:

I. Model: The model represents the data of the application, which is usually
retrieved from a database. In a "Hello World" program, the model may simply
contain a string variable that stores the message "Hello World".

II. View: The view is responsible for displaying the data from the model to the
user. In a "Hello World" program, the view may be an HTML template that
displays the message "Hello World" to the user.

III. Controller: The controller acts as a link between the model and the view. It
retrieves data from the model and updates the view when the data changes. In
a "Hello World" program, the controller may be a JavaScript function that
retrieves the message from the model and sets it as the value of the HTML
template.

Here's an example of a simple "Hello World" program in AngularJS:

In this example, the model is the variable message in the controller, the view is the `p`
element in the HTML template, and the controller is the `HelloWorldController`
function. The `ng-app` and `ng-controller` directives are used to link the model and

AngularJs FrontEnd (AJF) 2022-23 7

 view with the controller. The `{{message}}` is an AngularJS expression that binds the
model to the view.

9. Explain the different types of input element is the Angular forms.

In Angular, there are several types of input elements that can be used in forms,
including:

● <input>: This is the standard HTML input element and can be used for various
types of input, such as text, number, date, etc.

● <textarea>: This element is used for multi-line text input.

● <select>: This element is used for creating dropdown lists of options.

● <checkbox>: This element is used for creating checkboxes.

● <radio>: This element is used for creating radio buttons.

● <ng-select>: This is a third-party package that provides advanced select

functionality, such as search, tagging, and more.

● <ng-multiselect-dropdown>: This is a third-party package that provides

multi-select functionality.

All of these input elements can be used with Angular's forms module and can be
easily integrated with validation and error handling.

10. Write a HTML Code for a User Registration Form using proper input elements
and required form validations
Here's an example of a user registration form with proper input elements and required
form validations:

<form name="userForm" ng-submit="submitForm()" novalidate>

<div>
<label for="name">Name:</label>
<input type="text" id="name" name="name" ng-model="user.name" required>
<div ng-show="userForm.name.$invalid && userForm.name.$touched">
<p ng-show="userForm.name.$error.required">Name is required</p>
</div>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" ng-model="user.email" required>
<div ng-show="userForm.email.$invalid && userForm.email.$touched">
<p ng-show="userForm.email.$error.required">Email is required</p>
<p ng-show="userForm.email.$error.email">Invalid email address</p>
</div>
</div>
<div>

AngularJs FrontEnd (AJF) 2022-23 8

 <label for="password">Password:</label>
<input type="password" id="password" name="password" ng-model="user.password"
ng-minlength="8" required>
<div ng-show="userForm.password.$invalid && userForm.password.$touched">
<p ng-show="userForm.password.$error.required">Password is required</p>
<p ng-show="userForm.password.$error.minlength">Password must be at least 8
characters</p>
</div>
</div>
<div>
<label for="confirm-password">Confirm Password:</label>
<input type="password" id="confirm-password" name="confirmPassword"
ng-model="user.confirmPassword" required>
<div ng-show="userForm.confirmPassword.$invalid &&
userForm.confirmPassword.$touched">
<p ng-show="userForm.confirmPassword.$error.required">Confirm password is
required</p>
<p ng-show="user.password != user.confirmPassword">Passwords do not match</p>
</div>
</div>
<div>
<button type="submit" ng-disabled="userForm.$invalid">Submit</button>
</div>
</form>

Here is what is happening in this code:

● form element has name attribute which will be used to reference the form and inputs
in AngularJS.
● ng-submit directive is used to call a function when the form is submitted.
● novalidate attribute is added to disable the browser's default form validation.
● required attribute is added to the input elements to make them mandatory fields.
● ng-model directive is used to bind the input elements to the scope properties.
● ng-show directive is used to show the error message when the input fields are invalid
and touched.
● ng-disabled directive is used to disable the submit button when the form is invalid.

11. Explain the scope characteristics and concept of scope hierarchy in Angular.

In AngularJS, a scope is an object that refers to the application model and acts as an
execution context for expressions. The scope object is used to observe model
changes and propagate them to the view. Each AngularJS component directive
creates a new scope, which is a child of its parent scope. This creates a hierarchical
tree of scopes, with the root scope at the top.

The scope hierarchy plays a crucial role in the data binding between the model and
the view. When a model is updated within a child scope, the change is propagated to
all of its ancestors, allowing for two-way data binding between parent and child
scopes. This way the changes made to the model in a child scope are reflected in the
parent scope, and vice versa.
AngularJs FrontEnd (AJF) 2022-23 9
 Scopes can be nested to any level of depth, creating a hierarchical structure of
scopes. This structure allows for better encapsulation and separation of concerns
within an Angular application.

Scopes can inherit properties from their parent scopes, which means that a child
scope can access properties and methods of its parent scope. However, scopes can
also be isolated, which means they don't inherit properties from their parent.

This is important when creating reusable directives that can be used in different parts
of an application without interfering with each other. By isolating the scope of a
directive, it becomes less likely to cause conflicts with other directives or controllers.

In summary, the scope hierarchy in AngularJS is a way of structuring an application's

model, allowing for data binding, encapsulation, and separation of concerns. It's one
of the fundamental concepts in AngularJS, that allows you to organize your
application in a logical and maintainable way.

12. (Repeated Q.1)

13. (Repeated Q.3)
14. (Repeated Q.7)
15. (Repeated Q.8)
16. (Repeated Q.10)
17. (Repeated Q.11)

18. Explain in detail about services in AngularJs.

In AngularJS, a service is a singleton object that is used to organize and share code
across the application. Services are typically used for tasks such as connecting to a
database, making an HTTP request, or performing complex computations.

There are several built-in services provided by AngularJS, such as $http, $resource,
and $q, that can be used to perform common tasks. Additionally, developers can
create their own custom services to encapsulate specific functionality.

To create a custom service, you can use the AngularJS factory method. The factory
method takes a function as an argument, which is called when the service is first
created. The function should return an object that defines the service's methods and
properties.

For example, the following code creates a service called "MyService" that has a
method called "getData":

AngularJs FrontEnd (AJF) 2022-23 10

 To use a service in a controller, you can include it as a parameter in the controller's
constructor function.

For example, the following controller uses the "MyService" service created above:

You can also use service in a directive, filter and even in other services.

Services are singleton objects, which means that they are only created once during
the lifetime of an application and are shared among all of the controllers, directives,
and other components that depend on them. This allows services to maintain state
and share data between different parts of the application.

Services are a powerful feature of AngularJS that can be used to encapsulate and
reuse code, and to organize an application's logic in a modular and maintainable way.

19. Illustrate angular promise with suitable example.

A promise in AngularJS is an object that represents the eventual completion (or
failure) of an asynchronous operation, and its resulting value.

For example, let's say you have an AngularJS application that fetches data from a
server using the $http service. The $http service returns a promise that is resolved
when the server responds with the requested data. Here's an example of how you
would use the $http service to fetch data from a server and handle the promise:

AngularJs FrontEnd (AJF) 2022-23 11

 In this example, the $http.get method returns a promise that is assigned to the
variable "promise". The "then" method is used to attach two functions to the promise:
one to handle a successful response from the server, and one to handle an error. The
first function is passed the server's response as an argument, and the second
function is passed the error as an argument.

Promise also allows chaining, for example:

This way you can chain multiple asynchronous operations together and handle the
results in a logical and organized way, without having to nest multiple callback
functions.

Promise is a powerful feature of AngularJS that allows you to handle asynchronous

operations in a clean and manageable way.

20. (Repeated Q.18)

21. Illustrate angular promise with a suitable example.

Dependency injection (DI) is a design pattern and programming technique used in
AngularJS to manage the dependencies between different components of an
application. It allows a developer to easily manage the dependencies of a component,
and to change them without affecting the rest of the application.

AngularJs FrontEnd (AJF) 2022-23 12