Why Angular?

Angular 1 is a JavaScript framework from Google which was used for the development of web
applications.

Following are the reasons to migrate from Angular 1 to the latest version of Angular:

Cross-Browser Compliant

Internet has evolved significantly from the time Angular 1.x was designed. Creating a web application
that is cross-browser compliant was difficult with Angular 1.x framework. Developers had to come up
with various workarounds to overcome the issues. Angular helps to create cross-browser compliant
applications easily.

Typescript Support

Angular is written in Typescript and allows the user to build applications using Typescript. Typescript is a
superset of JavaScript and more powerful language. The use of Typescript in application development
improves productivity significantly.

Web Components Support

Component-based development is pretty much the future of web development. Angular is focused on
component-based development. The use of components helps in creating loosely coupled units of
application that can be developed, maintained, and tested easily.

Better support for Mobile App Development

Desktop and mobile applications have separate concerns and addressing these concerns using a single
framework becomes a challenge. Angular 1 had to address the concerns of a mobile application using
additional plugins. However, the Angular framework, addresses the concerns of both mobile as well as
desktop applications.

Better performance

The Angular framework is better in its performance in terms of browser rendering, animation, and
accessibility across all the components. This is due to the modern approach of handling issues compared
to earlier Angular version 1.x.
What is Angular?

A Single Page Application (SPA) is a web application that interacts with the user by dynamically redrawing
any part of the UI without requesting an entire new page from the server.

For example, have a look at the Amazon web application. When you click on the various links present in
the navbar present in any of the web pages of this application, the whole page gets refreshed. This is
because visibly, a new request is sent for the new page for almost each user click. You may hence
observe that it is not a SPA.

But, if you look at the Gmail web application, you will observe that all user interactions are being
handled without completely refreshing the page.

Modern web applications are generally SPAs. SPAs provide a good user experience by
communicating asynchronously (a preferable way of communication) with a remote web server
(generally using HTTP protocol) to dynamically check the user inputs or interactions and give constant
feedback to the user in case of any errors, or wrongful/invalid user interaction. They are built block-by-
block making all the functionalities independent of each other. All desktop apps are SPAs in the sense
that only the required area gets changed based on user requests.

Angular helps to create SPAs that will dynamically load contents in a single HTML file, giving the user an
illusion that the application is just a single page.

Let us look at the features of Angular:

 Easier to learn: Angular is more modern and easier for developers to learn. It is a more
streamlined framework where developers will be focusing on writing JavaScript classes.

 Good IDE support: Angular is written in TypeScript which is a superset of JavaScript and supports
all ECMAScript 6 features. Many IDEs like Eclipse, Microsoft Visual Studio, Sublime Text, etc.,
have good support for TypeScript.

 Familiar: Angular has retained many of its core concepts from the earlier version (Angular 1),
though it is a complete re-write. This means developers who are already proficient in Angular 1
will find it easy to migrate to Angular.

 Cross-Platform: Angular is a single platform that can be used to develop applications for multiple
devices.
 Performance: Angular performance has been improved a lot in the latest version. This has been
done by automatically adding or removing reflect metadata from the [Link] file which makes
the application smaller in production.

 Lean and Fast: Angular application's production bundle size is reduced by 100s of kilobytes due
to which it loads faster during execution.

 Bundle Budgets: Angular will take advantage of the bundle budgets feature in CLI which will
warn if the application size exceeds 2MB and will give errors if it exceeds 5MB. Developers can
change this in [Link].

 Simplicity: Angular 1 had 70+ directives like ng-if, ng-model, etc., whereas Angular has a very
less number of directives as you use [ ] and ( ) for bindings in HTML elements.

 Component-based:

o Angular follows component-based programming which is the future of web

development. Each component created is isolated from every other part of our
application. This kind of programming allows us to use components written using other
frameworks.

o Inside a component, you can write both business logic and view.

o Every Angular application must have one top-level component referred to as 'Root
Component' and several sub-components or child components.

 In this course, you will learn the Angular framework by

exploring the implementations of the business
requirements of an application called mCart.

 mCart is an online shopping application that helps

the users to purchase mobiles and tablet devices. This
application allows users to log in for purchasing mobiles
and tablet devices. They can select the products and
add them to the cart. Once the selection is done, they
can go to the cart page for payment. They can search for
a product, sort the products list based on rating or price,
and can filter the products list based on the
manufacturer, operating system, and price.


  User Stories

Login to the application to buy tablets/mobiles

Search for a specific product
Filter products based on manufacturer, price, and
operating system
View the details of a specific product
Sort the products based on popularity and price
Add products to the cart which you want to buy
Change the quantity of the products selected for
purchase
Checkout for closing the purchase
Log out from the application

You will learn the Angular course by building the mCart

application. Below is the roadmap to achieve it.

Highlights:

 Creating an Angular application using Angular CLI

 Exploring the Angular folder structure

Demosteps:

1. Create an application with the name 'MyApp' using the

following CLI command

1. D:\>ng new MyApp

2. The above command will display two questions. The first

question is as shown below. Typing 'y' will create a routing
module file ([Link]).

Next, you will learn about the [Link] file.

3. The next question is to select the stylesheet to use in the
application. Select CSS and press Enter as shown below:

This will create the following folder structure with the

dependencies installed inside the node_modules folder.

Note: If the above command gives errors while installing

dependencies, navigate to the project folder in the Node
command prompt and run "npm install" to install the
dependencies manually.

File / Folder Purpose

node_modul [Link] creates this folder and puts all npm
es/ modules installed as listed in [Link]
All application-related files will be stored inside
src/
it
Configuration file for Angular CLI where we set
[Link]
several defaults and also configure what files
n
to be included during project build
[Link] This is a node configuration file that contains
n all dependencies required for Angular
[Link] This is the Typescript configuration file where
n we can configure compiler options
From Angular version 13.0.0, .angular folder is
.angular generated in the root. This folder caches the
builds and is ignored by git.
ownload the mCart case study to your local machine. Click
the following link to download the case study.

Click here to download

After downloading the project, open the Node command

prompt and navigate to the mCart folder as shown below,
and run the 'npm install' command to install the npm
packages.

This will create a folder called node_modules with all the

dependencies installed inside it

Note: Sometimes Angular will throw errors during

installation. This can be due to the unavailability of some
additional dependencies in your machine. After installation,
always check if the node_modules folder is created under the
project root folder. If it is created, you can ignore the errors
that occurred during installation.

Type the following command to run the application. This will

open a browser with the default port as 4200.

1. D:\mCart>ng serve --open