CASE STUDY ON

ANGULAR
FRAMEWORK

TEAM :- MANASI PARANJAPE (15646)

KAUSTUBH KHAIRNAR (15649)
NIKHIL GADILKAR (15650)
 INTRODUCTION
Angular is a popular open-source JavaScript
framework for building dynamic web applications.
Developed and maintained by Google, it is widely
used for building single-page applications (SPAs)
and progressive web apps (PWAs).
 OVERVIEW
● Angular is a comprehensive and powerful framework for
web development.
● It allows you to build interactive, client-side applications
with a strong emphasis on modularity and reusability.
● Key features include data binding, dependency injection,
and a rich ecosystem of libraries and tools.
 REQUIRED SOFTWARE
● Node.js: Angular uses Node.js for package management and
running development servers.
● npm (Node Package Manager): Used to install and manage
Angular dependencies.
● A code editor or IDE: Popular choices include Visual Studio
Code, WebStorm, and Sublime Text.
 REQUIRED IDE
● While you can use any code editor for Angular development, some IDEs
offer better support and features for Angular projects.
● Visual Studio Code (VS Code) is a highly recommended IDE for Angular
development:
● It has a rich ecosystem of extensions specifically designed for
Angular.
● Features include IntelliSense, debugging, and integrated terminal for
running Angular CLI commands.
 BUILDING BLOCKS
● TypeScript: TypeScript is the primary programming language used in Angular.
It's a statically-typed superset of JavaScript, providing strong typing and
advanced tooling support.
● Components: Components are the building blocks of Angular applications.
They encapsulate the application's UI and logic, promoting reusability and
maintainability.
● ANGULAR CLI : Angular Command Line Interface (CLI) is a powerful tool that
simplifies the process of creating, building, testing, and deploying Angular
applications.
● RxJS : Reactive Extensions for JavaScript (RxJS) is a library used in Angular for
handling asynchronous operations, data streams, and event-driven
programming.
● Routing: Angular provides a built-in router to manage application navigation
 STEPS TO INSTALL
● Install Node.js and npm: Download and install Node.js from the official website
(https://nodejs.org/), which includes npm.
● Install Angular CLI: Open your terminal and run the following command to
install Angular CLI globally: npm install -g @angular/cli
● Create a new Angular project: Use Angular CLI to create a new project with the
command: ng new my-angular-app
● Start the development server: Navigate to your project folder and run ng
serve to start a local development server.
● Access your app: Open your web browser and visit http://localhost:4200 to
see your Angular app in action.
 TECHNOLOGY
● Front-End Framework: Angular is a client-side, front-end framework primarily
used for building web applications. It focuses on enhancing the user interface
and user experience of web applications.
● Open Source: Angular is an open-source technology, which means it is freely
available for developers to use and contribute to its development. This open
nature has led to a vibrant community and a wealth of resources.
● Declarative UI: Angular allows developers to define the user interface (UI) of
an application declaratively using HTML templates. It offers a clear separation
of concerns between UI design and application logic.
● Cross-Platform: Angular can be used to build both web applications and
native mobile applications. With technologies like Angular for the web and
NativeScript or Ionic for mobile, you can share code and skills across platforms.
 DEVELOPMENT
METHOD
● Modular Architecture: Angular promotes a modular development
approach, where applications are divided into smaller, self-contained
modules. This modularity simplifies development, testing, and
maintenance.
● Component-Based Development: Angular is centered around
components, which are self-contained, reusable building blocks of an
application. Developers create components to represent specific parts of
the UI and functionality.
● Reusability: Components can be reused across an application or in
multiple applications, leading to consistent UI elements and reducing
redundancy in code.
● Separation of Concerns: Angular enforces a clear separation of
concerns by segregating the UI, application logic, and data management
into distinct components, services, and modules. This separation
enhances code maintainability and readability.
COMPONENTS
 LANGUAGES USED
● TypeScript as the Language: Angular is developed using
TypeScript, and it is the recommended language for building Angular
applications.
● Superset of JavaScript: TypeScript is a superset of JavaScript, which
means it includes all the features of JavaScript and extends it with
additional capabilities.
● Object-Oriented Programming: TypeScript supports object-
oriented programming concepts like classes, interfaces, and
inheritance, which are used extensively in Angular.
 MODULES AND TOOLS
● RxJS (Reactive Extensions for JavaScript)
❏ RxJS is a library for reactive programming used extensively in Angular.
❏ It enables the handling of asynchronous operations, such as HTTP requests
and user interactions, through observables and operators.
● ngRx (Redux for Angular):
❏ ngRx is a popular library that brings the Redux pattern to Angular
applications.
❏ It provides state management solutions, helping manage complex
application data and state changes.
● HttpClient Module:
❏ Angular's HttpClient module simplifies making HTTP requests to APIs and
services.
❏ It supports features like request and response handling, error
management, and observables for working with asynchronous data.
 FUNCTIONALITY
● Component-Based Architecture:
❏ Angular's core architecture is built around components, enabling developers to create
reusable, encapsulated UI elements with their own logic and templates.
● Dependency Injection:
❏ Angular provides a powerful dependency injection system that enables efficient
communication and data sharing between components and services.
● Two-Way Data Binding:
❏ Angular offers two-way data binding, meaning changes in the model automatically
update the view, and vice versa, reducing the need for manual DOM manipulation.
● Forms Handling:
❏ Angular provides robust form handling capabilities, supporting both template-driven and
reactive forms for capturing and validating user input.
● Lazy Loading:
❏ Angular supports lazy loading, allowing modules and components to be loaded on-demand,
enhancing application performance and reducing initial load times
 ADVANTAGES DISADVANTAGES
➢ Modular Structure ➢ Steep Learning Curve

➢ Strong Community ➢ Large Bundle Size

Support
➢ Built-In Testing ➢ Limited SEO without
Server-Side
Rendering
➢ Cross-Platform ➢ Frequent Updates
 OBJECTIVES
❖ Building Dynamic Web Applications
❖ Maintainability
❖ Cross-Platform Development
❖ Performance Optimization
❖ Enhanced User Experience
❖ Testability
 SCOPE
❖ Cross-Platform Compatibility
❖ Mobile Application Development
❖ E-commerce and Marketplaces
❖ Single-Page Applications (SPAs)
❖ Healthcare and Medical Applications
❖ Admin Panels and Control Systems
 CONCLUSION
Highlighting the significance of Angular in web
development, the importance of understanding its core
components and technology, and the potential
advantages and disadvantages of using the framework.
Conclude with an encouraging message about the future
of Angular in the web development landscape.
THANK YOU