ANGULAR – JS WEB

FRAMEWORK
INTRODUCTION
what is angular ?
• Angular is one of the most known TypeScript ( is a superset of
JavaScript) front-end framework developed by Google to create
dynamic and modern web apps.
• First introduced in 2009, the framework has gained huge traction over
the years for eliminating unnecessary code and ensuring lighter and
faster apps.
Having rapidly evolved from Angular JS in 2010 to Angular 5 in 2017
and to Angular 8 in 2019, the front-end framework is today used by
more than 44.3% of software engineers to create user interfaces.
Why choosing Angular instead of other frameworks ?
1. Supported by Google
2. TypeScript
3. Declarative UI
4. POJO (Plain old Java object)
5. Simplified MVC Pattern MVVM
6. Modular Structure
7. Code Consistency
Supported by Google :
• Google is an american company known as one of the biggest
pillars in technology and the best part about it is Google’s Long-
Term Support (LTS) for Angular means Google is scaling up the
project and that the project is going further with time.
• Another important point to mention is that a lot of Google
projects are using Angular.
TypeScript :

• Currently angular projects are built with Typescript, as I

already mentioned, is a superset of JavaScript which primarily
provides optional static typing, classes and interfaces.
• One of the its salient benefits is to enable IDEs to provide a
richer environment for spotting common errors as you type
the code.
• Unlike CoffeeScript or Dart, TypeScript is not a stand-alone
language. With TypeScript, you can easily take the existing
ES5 or ES2015+ JS code and it will compile it down based on
what you are configuring.
• It fully supports core ES2015 and ES2016/ES2017 features
such as decorators or async/await. Check the following figure
for further understanding.
• This language ensures an improved refactoring,
navigation, and auto-completion services. You can
even opt out of its inbuilt features when needed.
Declarative UI :
• Angular uses HTML to define the UI of the application. HTML,
as compared to JavaScript, is a less convoluted language. HTML
is also a declarative and intuitive language.
How will it help ? You don’t need to invest your time in program
flows and deciding what loads first. Define what you require and
Angular will do the job.
POJO (Plain old Java object) :
With Angular, you don’t need any additional getter and setter
functions. Since, every object it uses is POJO , which enables
object manipulation by providing all the conventional JavaScript
functionalities. You can remove or add properties from the objects,
while also looping over these objects when required.
Angular Testing :
• In Angular, testing is extremely simple. Angular.js modules has the
application parts that are easy to manipulate. With module
separation, you can load the necessary services, while effectively
performing automatic testing using Jasmine, Karma.. etc .
• You don’t even need to remember module loading order if you
follow “one file-one module” principle.
Simplified MVC Pattern MVVM :
Angular framework is embedded with original MVC but it’s more
of an MVVM software architectural setup. Angular does not ask
developers to split an application into different MVC components
and build a code that could unite them.
• Its framework uses the MVVM(Model-View-ViewModel)
architecture better than an MVC (Model-View-Controller) one.
The MVVM model supports two-way data binding between View
and ViewModel.
• This allows the automatic propagation to change within
ViewModel’s state to the view. Typically, ViewModel uses the
observer model to inform changes to the ViewModel model to
model.
• Furthermore, it only asks to divide the app and takes care of
everything else. Therefore, Angular and MVVM (Model-
View-View-Model) design structure are quite similar.
Angular ensures easy development as it eliminates the need
for unnecessary code. It has a simplified MVC architecture,
which makes writing getters and setters needless.
• Directives can be managed by some other teams as these
are not part of app code.
• All in all, developers are promised less coding along with
lighter and faster apps.
• According to Amazon, every 100-millisecond
improvement in page loading speed led to 1% increase in
revenue.
Modular Structure :
• Angular organizes code into buckets, whether it is
components, directives, pipes or services.
• Those who are familiar with Angular refer to these buckets
as modules.
• Modules make application functionality organization easy
through dividing it into features and reusable chunks.
• Modules also allow lazy loading, which paves way for application
feature loading in the background or on-demand.
• Angular makes it an achievable goal to divide the labor across
different team members while ensuring organized code.
• In fact, you can make the best modules when you have a proper
understanding of it. Developers can improve productivity with
appropriate modules built.
Code Consistency :
• Any code base requires consistent coding. A writer knows
how important consistency is in their content.
• We know if the content fails to resonate with the readers to a
deeper level at any touch-point, we are on a downward slope
of lead conversions, and coding is no different.
• Inconsistent coding increases the risks of delayed launches
or elevated costs.
• However, consistent coding has several benefits, such as making
sites easier to use and enabling the use of templates or pre-defined
code snippets.
• Angular framework is based on components, which begin in the
same style.
• For instance, each component places the code in a component class
or defines a @Component decorator (metadata).
AngularJS Features :
1.MVC
2.Data Model Binding
3.Writing less code
4.Unit Testing
MVC — The framework is built on the famous concept of
MVC (Model-View-Controller). This is a design pattern
used in all modern-day web applications.
This pattern is based on splitting the business logic layer, the
data layer, and presentation layer into separate sections. The
division into different sections is done so that each one could
be managed more easily.
Data Model Binding — You don’t need to write special
code to bind data to the HTML controls. This can be done
by Angular by just adding a few snippets of code.
Writing less code — When carrying out DOM manipulation
a lot of JavaScript was required to be written to design any
application. But with Angular, you will be amazed by the
lesser amount of code you need to write for DOM
manipulation.
Unit Testing ready — The designers at Google not only
developed Angular but also developed a testing framework
called “Karma” which helps in designing unit tests for
AngularJS applications.