BCA

SEMESTER – 3

0302302

INTRODUCTION TO ANGULAR
 Introduction to Angular
●
Angular is the framework for building web applications
and mobile applications using HTML, Java Script and
CSS.
●
Angular is open source Java Script framework which
binds the Java Script object and HTML UI elements.
●
Angular was developed by the Google.
●
Basically invented to provide a good support to develop
web applications.
●
Angular is Java Script framework that was specifically
designed to help developer to build SPAs (Single Page
Applications) for web.
●
Angular provides inbuilt support for the
animation, http services and many more
things. Angular empower developer who
develops applications which live on the web,
mobile or the desktop.
●
Angular is written in typescript.
●
Angular is a JavaScript (actually a TypeScript based open-
source full-stack web application) framework which makes you
able to create reactive Single Page Applications (SPAs).
●
Angular is completely based on components and directives.
●
It consists of several components which forms a tree structure
with parent and child components.
●
Angular's versions beyond 2+ are generally known as Angular
only.
●
The very first version Angular 1.0 is known as AngularJS.
●
"Angular is a complete rewrite of AngularJS by the same team
that built AngularJS."
What is Single Page Application (SPA)?
●
A single page application is a web application or
a website which provides users a very fluid,
reactive and fast experience similar to a desktop
application.

●
It contains menu, buttons and blocks on a single
page and when a user clicks on any of them; it
dynamically rewrites the current page rather than
loading entire new pages from a server.
 History and different versions of Angular

●
The first version of Angular was Angular1.0
(also known as AngularJS) which was released
in 2010.
 History and different versions of Angular
Angular2
●
Angular 2.0 was first introduced in October
2014.
●
It was a complete rewrite of Angular so, the
drastic changes in the 2.0 version created
controversy among developers.
●
Its first version was published in May 2016 and
the final version was released on September
14, 2016.
 Angular4
●
Angular 4 version was announced on 13
December 2016.
●
Its final version was released on 23 March
2017.
 Angular5
●
This version was released on 1 Nov, 2017.
●
It provided some improvements to support for
progressive web apps, also provides
improvements related to Material Design.
 Angular6
●
This version was released on 4 may, 2018.
Angular 7
●
The latest version of Angular is Angular 7. It
was released on October 18, 2018. It consists
of many extensive features
1) Angular is open source Java Script framework.
a) true
b) false
2) Angular was developed by the _______.
a) Microsoft
3) Angular is Java Script framework that was specifically
designed to help developer to build.
a) Single page application
b) Multi page application
1)In Angular js we use typesscript.
a) true
b) false
2) Angular written in _______.
3) Angular 2 final version was released on
a)September 14, 2016
b) October 2014
Angular JS vs Angular
 Angular Features
1. Angular supports multiple platforms
Angular is a cross platform language. It supports multiple platforms. You can
build different types of apps by using Angular.
●
Desktop applications: Angular facilitates you to create desktop installed
apps on different types of operating systems i.e. Windows, Mac or Linux by
using the same Angular methods which we use for creating web and native
apps.
●
Native applications: You can built native apps by using Angular with
strategies from Cordova, Ionic, or NativeScript.
●
Progressive web applications: Progressive web applications are the most
common apps which are built with Angular. Angular provides modern web
platform capabilities to deliver high performance, offline, and zero-step
installation apps.
 2. High Speed, Ultimate Performance
Angular is amazingly fast and provides a great performance due to the
following reasons:
●
Universal support: Angular can be used as a front-end web development
tool for the programming languages like Node.js, .Net, PHP, Java Struts and
Spring and other servers for near-instant rendering in just HTML and CSS. It
also optimizes the website for better SEO.
●
Code splitting: Angular apps are fast and loads quickly with the new
Component Router, which delivers automatic code-splitting so users only
load code required to render the view they request.
●
Code generation: Angular makes your templates in highly optimized code.
JavaScript virtual machines which gives the benefits of hand-written code.
 3. Productivity
Angular provides a better productivity due to its simple and powerful
template syntax, command line tools and popular editors and IDEs.
●
Powerful templates: Angular provides simple and powerful template syntax
to create UI view quickly.
●
IDEs( integrated development environment): Angular provides intelligent
code completion, instant errors, and other feedback in popular editors and
IDEs.
●
Angular CLI ( command-line interface): Angular CLI provides command
line tools start building fast, add components and tests, and then instantly
deploy.
 4. Full Stack Development
Angular is a complete framework of JavaScript. It provides Testing,
animation and Accessibility. It provides full stack development along with
Node.js, Express.js, and MongoDB.
●
Testing: Angular provides Karma and Jasmine for unit testing. By using it,
you can check your broken things every time you save. Karma is a
JavaScript test runner tool created by Angular team. Jasmine is the testing
framework form unit testing in Angular apps, and Karma provides helpful
tools that make it easier to us to call our Jasmine tests whilst we are writing
code.
●
Animation Support: Angular facilitates you to create high-performance,
complex choreographies and animation timelines with very little code
through Angular's intuitive API.
●
Accessibility: In Angular, you can create accessible applications with ARIA-
enabled components, developer guides, and built-in a11y test infrastructure.
 Setting up the Environment for Angular

●
To setup the Angular environment we need the
following component:
1. Node js :
●
Node.js is useful to build fast and scalable
server-side networking applications. This
framework is best suited for building single-
page client-side web applications.
●
curl -sL https://deb.nodesource.com/setup_10.x
| sudo -E bash - sudo apt-get install -y nodejs
 2. Npm (Node Package Manager) :
●
Npm is a package manager for the JavaScript
programming language. It is the default
package manager for the JavaScript runtime
environment Node.js.
●
sudo npm install npm@latest -g
 3. Angular CLI (Command Line Interface) :
●
Angular CLI makes it easy to start with any
Angular project. Angular CLI comes with
commands that help us to create and start on
our project very fast.
●
npm install -g @angular/cli
 4. IDE for writing code :
●
It provide integrated development environment
to write Angular code.
●
Visual Studio Code
 Advantages of Angular

Consistency
●
Angular is framework is based on components and services.
In components based structure always look same, we can
add additional thing in to component but overall structure is
always look same.
Productivity
●
With greater consistency, we get the benefit of productivity.
When we learn how to write one component we can write
another component by same general guidelines and code
structure.
 Maintainability
●
Angular code can be built using TypeScript (it is improved
JavaScript) which provide lots of benefits along with easy
maintenance of the app.
Modularity
●
Angular is all about organizing code into modules. Everything
you create whether it’s components, services, pipes, or
directives has to be organized into one or more modules.

Catch Errors Early

●
Angular is built using TypeScript provide mechanism to find
out errors easily if any.
 Disadvantages of Angular

●
Angular manipulates actual DOM (Document Object Model)
which make it slower and less efficient.
●
Angular is difficult to learn. If we don’t know about TypeScript
then need require more time to learn.
●
Data Binding concept is difficult to implement in real world
applications.
●
It is difficult to implements server templates.
●
Testing is difficult. End to end tests are simplified only with
Angular CLI.
●
Full Forms
– IDE – Integrated Development Environment
– ARIA – Accessible Rich Internet Applications
– CLI – Command Line Interface
– NPM – Node Package Manager
– SEO – Search Engine Optimization