An

Industrial Training
ReportOn

"Full stack Web development"

CompletedBy

Ms. Shravani Suresh Patil

UnderTheGuidanceof

Mr. Vivek V. Bhat (Software developer)

I-Gap Technologies,
Kolhapur

AcademicYear: 2024-25
 Certificate

Thisis tocertify that theindustrial training from3 June2024to 13July 2024 entitled

“Full stack Web development”

Has been successfully completed by

Mr.Milind Hanmant Kamble

I-Gap Technologies,
Kolhapur

Complied with
Sanjay Ghodawat Polytechnic,Atigre(1644)

During the academic year 2024-25 under the guidance & mentoredby

Mr.S.V.Chavan Mr. S.V.Chavan

InplantTrainingCoordinator H.O.D
 ACKNOWLEDGEMENT

At I-Gap technologies,

kolhapurwegainedplethoraofknowledgeandinformationthroughvideoslecturesrecorded by “Mr. Vivek V.

Bhat ”.I am glad to have

theseexperiencedinstructorswhomadetoughesttopicintosimplestone.Theseinstructorstaughtusalltopics

while Web development in real world applications.

AcademicYear2024-25
 ABSTRACT
Thisin-planttrainingisdealingwithFull stack Web development. WEB DEVELOPMENT is the

main objective of this internship. To develop a web based application or software there are several

programming languages that are in use. Some of them are only used for the frontend and backend

design of the software. For example-HTML, JavaScript, CSS, Bootstrap Framework,React,Online

databaseete. There are also some other programming languages that are used to develop the

dynamic functions of the software or application. Nowadays there are also some framework's that

use vastly. Frameworks are basically structured programming by using Model, View, and

Controller. It is also called as MVC. If we develop web based application that is very useful for us

because we can access it from anywhere of the world. It is very helpful for our daily life. That is

why I choose subject of my report is "WEB DEVELOPMENT"

 INDEX

CH.NO. CHAPTERNAME PAGENO

1 Introduction of I-gap Technologies 1-1

2 Overview of Course 2-3

3 HTML 4-10

4 CSS 4-5

5 Bootstrap 5.0 6-7

6 JavaScript 8

7 Angular boot camp 9

8 Conclusion 10
 1. INTRODUCTIONTOI-Gap Technologies
iGAP Technologies is a leading software development and training company specializing in real-time
project development for web, mobile, and data technologies. Our team of expert trainers, who are also
active developers, brings a wealth of hands-on experience and industry insights to our training programs.
This dual expertise ensures that our clients not only learn the theoretical aspects of software development
but also gain practical, real-world skills that are immediately applicable in today's fast-paced tech
landscape.

At iGAP Technologies, we pride ourselves on our commitment to delivering high-quality training that
bridges the gap between education and industry practice. Our courses are designed to provide a
comprehensive understanding of the latest technologies and development methodologies, equipping our
clients with the tools they need to succeed. Whether you are looking to upskill your team or embark on a
new career in tech, iGAP Technologies offers the resources and support to help you achieve your goals.
Join us and experience the difference that expert-led, real-time project training can make.

I-Gap Page1
TechnoloT
echn
 2. OVERVIEWOFCOURSE
1. Full stack Web development -Buildresponsive Website:-

Full-stack developers have a high level of competency in both frontend and backend languages. They are
skilled in HTML, CSS, JavaScript, NodeJS, Bootstrap,React. Equally, full-stack developers understand
various database management systems (DBMS) like MySQL, PostgreSQL, MongoDB, and more.But we
learnt only online database.
WhatI’lllearnt:-

 CompleteHTML
 Basics of CSS
 Bootstrap Framework
 LearnaboutJavaScript
 Learn aboutReact,NodeJS
 Learn aboutOnline Database

I-Gap Page2
TechnoloT
echn
 2. Full stack Web development –Created Simple Page website using
HTML,CSS,Bootstrap5:-

HTML (Hypertext Markup Language) is a text-based approach to describing how content contained within
an HTML file is structured.Cascading Style Sheets (CSS) is a style sheet language used for specifying the
presentation and styling of a document written in a markup language such as HTML or XML .Originally
created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end
frameworks and open source projects in the world.Bootstrap was created at Twitter in mid-2010
by @mdo and @fat. Prior to being an open-sourced framework, Bootstrap was known as Twitter Blueprint.

Whatyou’ll learnt : -

 Build simple website 

 In this website we used colorfullbuttons,table,images 
 We developed navbar& footer using bootstrap framework 

I-Gap Page3
TechnoloT
echn
 3. HTML

Hypertext Markup Language is the standard markup language for documents designed to be displayed
in a web browser. It defines the content and structure of web content. It is often assisted by technologies
such as Cascading Style Sheets and scripting languages such as JavaScript.
The HTML tags are enclosed within open tags (<>) and closed tags (</>). Suppose we have to create
a paragraph, so in HTML, the paragraph is created by typing the open paragraph tag <p> and then
entering a closed paragraph tag </p>. After writing a line of code, you can simply press Enter to go on
the next line.

I-Gap Page4
TechnoloT
echn
 3.1 . Tags :-

<!DOCTYPE html>

All HTML documents must start with a <!DOCTYPE> declaration.The declaration is not an HTML
tag. It is an "information" to the browser about what document type to expect.

<head>

The <head> element is a container for metadata (data about data) and is placed between
the <html> tag and the <body>tag.Metadata is data about the HTML document. Metadata is not
displayed.Metadata typically define the document title, character set, styles, scripts, and other meta
information.

<body>

The <body> tag defines the document's body.The <body> element contains all the
contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

<p>

The <p> tag defines a paragraph.Browsers automatically add a single blank line before and
after each <p> element.

<h1> to <h6>

The <h1> to <h6> tags are used to define HTML headings.<h1> defines the most
important heading. <h6> defines the least important heading.

<input>

The <input> tag specifies an input field where the user can enter data.The <input> element
is the most important form element.The <input> element can be displayed in several ways, depending on
the type attribute.The different input types are as follows:

 <input type="checkbox">
 <input type="image">
 <input type="number">
 <input type="password">
 <input type="radio">
 <input type="search">
 <input type="text">

I-Gap Page5
TechnoloT
echn
 4. CSS
What is CSS?

 CSS stands for Cascading Style Sheets

 CSS describes how HTML elements are to be displayed on screen, paper, or in other media
 CSS saves a lot of work. It can control the layout of multiple web pages all at once
 External stylesheets are stored in CSS files.
 CSS is the language we use to style a Web page.

Why Use CSS?

CSS is used to define styles for your web pages, including the design, layout and variations in display for
different devices and screen sizes.

CSS Saves a Lot of Work!

The style definitions are normally saved in external .css files.

With an external stylesheet file, you can change the look of an entire website by changing just one file!

I-Gap Page6
TechnoloT
echn
 4.1Types of CSS:

CSS has 3 types:

 Inline - by using the style attribute inside HTML elements.

 Internal - by using a <style> element in the <head> section.
 External - by using a <link> element to link to an external CSS file

1) Inline CSS

An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

Advantages of Inline CSS:

 Inline takes precedence over all other styles. Any styles defined in the internal and external style sheets are
overridden by inline styles.

 You can quickly and easily insert CSS rules into an HTML page, which is useful for testing or previewing
changes and performing quick fixes on your website.

 There is no need to create an additional file.

 To apply styling in JavaScript, use the style attribute.

Disadvantages of Inline CSS:

 Adding CSS rules to each HTML element takes time and makes your HTML structure unorganized. It's
difficult to keep up, reuse, and scale.

 The size and download time of your page can be affected by styling multiple elements.

 Inline styles cannot be used to style pseudo-elements and pseudo-classes. For example, you can style the

visited, hover, active, and link colors of an anchor tag using external and internal style sheets.

I-Gap Page7
TechnoloT
echn
 2) Internal CSS

Internal CSS is a method for defining CSS styles directly within an HTML document. It’s particularly
useful for applying unique styles to a single web page, and it’s embedded within the <style> element
located in the <head> section of the HTML file.To use internal CSS, you need to include CSS rules
within a <style> tag inside the HTML document’s <head>. This allows you to define styles by selecting
HTML elements or classes and applying styling rules within the tag. The styles defined by internal CSS
apply only to the specific web page where they are included.

Advantages of Internal CSS

 You can include CSS in HTML texts by utilising a type of CSS known as internal CSS. A single HTML web
page’s layout can be designed, and styles can be modified within the HTML code.
 You need not upload several files because the code will only be added to one HTML file.
 Developers create cascading style sheets to specify a style, and by just referring to that CSS file, they can use
that style across multiple pages. As a result, styling effort is reduced, and repetition is done away with.
 The designer can use earlier functions that weren’t specified in the HTML that was used to create the web
pages.
 The forms within external style sheets become overruled by internal or embedded styles. Internal CSS stands
second in the priority list after Inline CSS.
Disadvantages of Internal CSS
When we use the head section to encompass all the styles we desire, the code will have more lines. Long code
will make debugging challenging. It is not advised if the task is complicated. It will take longer to load.
 The same styling code would need to be written at the beginning of every site page if you wanted the same
styling across each page. This would make the code seem cluttered and, if you were building a large site,
could take quite some time.
 Internal CSS is only useful for HTML websites with a single page. You are unable to make a reference to this
stylesheet from the link> components if your new HTML website uses internal CSS. It may make website
modifications and updates more difficult and complex.
 The most popular technique to apply CSS is to retain the style in external CSS files since internal CSS is not
ideal for large projects when more than one web page is required.

I-Gap Page8
TechnoloT
echn
3) External CSS

The external style sheet is generally used when you want to make changes on multiple pages. It is ideal for this
condition because it facilitates you to change the look of the entire web site by changing just one file.

It uses the <link> tag on every pages and the <link> tag should be put inside the head section.

The external style sheet may be written in any text editor but must be saved with a .css extension. This file
should not contain HTML elements.

Advantages of External CSS

 With the help of External Style Sheets, the styles of numerous documents can be organized from one single
file.
 In External Style Sheets, Classes can be made for use on numerous HTML element types in many forms of
the site.
 In complex contexts, Methods like selector and grouping can be implemented to apply styles .

Disadvantages of External CSS

 An extra download is essential to import style information for each file.

 The execution of the file may be deferred till the external style sheet is loaded.
 While implementing style sheets, we need to test Web pages with multiple browsers in order to check
compatibility issues.

I-Gap Page9
TechnoloT
echn
 5. Bootstrap 5

5.1 What is Bootstrap?

Bootstrap is a free, open source front-end development framework for the creation of websites and web apps.
Designed to enable responsive development of mobile-first websites, Bootstrap provides a collection of syntax
for template designs.
As a framework, Bootstrap includes the basics for responsive web development, so developers only need to
insert the code into a pre-defined grid system. The Bootstrap framework is built on Hypertext Markup
Language (HTML), cascading style sheets (CSS) and JavaScript. Web developers using Bootstrap can build
websites much faster without spending time worrying about basic commands and functions.

5.2 Need of Bootstrap in web development

Bootstrap enables designers and developers to build completely responsive websites quickly. It can be
considered the most popular CSS framework for developing responsive and Mobile-First applications.
Bootstrap is easy to learn and implement, making it accessible to both beginners and experienced developers.
Bootstrap's extensive customization options also allow you to personalize the appearance and style of your
website. Being open-source and free, Bootstrap provides a cost-effective solution for web designers.

What is Responsive Web Design?

Responsive web design is about creating web sites which automatically adjust themselves to look good on all
devices, from small phones to large desktops.

Which Bootstrap5 Main code we used in website?

I. Navbar
II. Carousel
III. Card
IV. Footer

I-Gap Page10
TechnoloT
echn
Bootstrap5 Navbar
Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar.
Includes support for branding, navigation, and more, including support for our collapse plugin. Bootstrap
gives us readymade code of the navbar like following:

I-Gap Page11
TechnoloT
echn
Bootstrap5 Carousel
The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a
bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for
previous/next controls and indicators.It also gives us various code of carousel :

I-Gap Page12
TechnoloT
echn
 3.1. JavaScript
History of the JS :

JavaScript was invented by Brendan Eich in 1995.It was developed for Netscape 2, and became
the ECMA-262 standard in 1997.After Netscape handed JavaScript over to ECMA, the Mozilla
foundation continued to develop JavaScript for the Firefox browser. Mozilla's latest version was 1.8.5.
(Identical to ES5).Internet Explorer (IE4) was the first browser to support ECMA-262 Edition 1 (ES1).

Brendan Eich developed JavaScript, a computer language, in just ten days in May 1995. Initially called
Mocha, then LiveScript, it finally became known as JavaScript. It was designed for the client-side of
websites to add dynamic and interactive elements to static HTML pages.

Why is it called JavaScript?

Initially known as LiveScript, Netscape changed the name to JavaScript so they could position it as a
companion for the Java language, a product of their partner, Sun Microsystems. Apart from some
superficial syntactic similarities, though, JavaScript is in no way related to the Java programming
language.

Functions of the JavaScript :

JavaScript has a vast number of built-in functions as part of its standard library. Here's a list of some
common JavaScript functions, grouped by their usage:
String Functions :
- charAt(index): Returns the character at the specified index.
- concat(): Joins two or more strings.
- includes(): Checks if a string contains a specified value.
- indexOf(): Returns the position of the first found occurrence of a specified value.
- slice(): Extracts a part of a string.
- split(): Splits a string into an array of substrings.
- substring(): Extracts the characters from a string between two specified indices.
- toLowerCase(): Converts a string to lowercase letters.
- toUpperCase(): Converts a string to uppercase letters.
- trim(): Removes whitespace from both ends of a string.
Array Functions :
- concat(): Merges two or more arrays.
- every(): Checks if all elements in an array pass a test.
- filter(): Creates a new array with all elements that pass a test.
- forEach(): Calls a function for each array element.
- indexOf(): Searches the array for an element and returns its position.
- map(): Creates a new array with the results of calling a function for every array element.
- pop(): Removes the last element of an array.
- push(): Adds new elements to the end of an array.
- reduce(): Reduces the array to a single value.
- shift(): Removes the first element of an array.
- slice(): Selects a part of an array.
I-Gap Page13
TechnoloT
echn
- some(): Checks if any of the elements in an array pass a test.
- sort(): Sorts the elements of an array.
- splice(): Adds/removes items to/from an array.
- unshift(): Adds new elements to the beginning of an array.
Number Functions :
- isFinite(): Determines whether the passed value is a finite number.
- isInteger(): Determines whether the passed value is an integer.
- isNaN(): Determines whether a value is NaN.
- parseFloat(): Parses a string and returns a floating-point number.
- parseInt(): Parses a string and returns an integer.
Math Functions :
- abs(): Returns the absolute value of a number.
- ceil(): Returns the smallest integer greater than or equal to a number.
- floor(): Returns the largest integer less than or equal to a number.
- max(): Returns the largest of zero or more numbers.
- min(): Returns the smallest of zero or more numbers.
- pow(): Returns the base to the exponent power.
- random(): Returns a random number between 0 and 1.
- round(): Rounds a number to the nearest integer.
- sqrt(): Returns the square root of a number.
Date Functions :
- getDate(): Returns the day of the month (1-31).
- getDay(): Returns the day of the week (0-6).
- getFullYear(): Returns the year.
- getHours(): Returns the hour (0-23).
- getMilliseconds(): Returns the milliseconds (0-999).
- getMinutes(): Returns the minutes (0-59).
- getMonth(): Returns the month (0-11).
- getSeconds(): Returns the seconds (0-59).
- getTime(): Returns the number of milliseconds since midnight Jan 1, 1970.
- setDate(): Sets the day of the month.
- setFullYear(): Sets the year.
- setHours(): Sets the hour.
- setMilliseconds(): Sets the milliseconds.
- setMinutes(): Sets the minutes.
- setMonth(): Sets the month.
- setSeconds(): Sets the seconds.
- setTime(): Sets the Date object to a specified number of milliseconds since January 1, 1970.
DOM Functions :
- getElementById(): Returns the element with the specified ID.
- getElementsByClassName(): Returns a collection of all elements with a specified class name.
- getElementsByTagName(): Returns a collection of all elements with a specified tag name.
- querySelector(): Returns the first element that matches a specified CSS selector.
- querySelectorAll(): Returns a collection of all elements that match a specified CSS selector.
- createElement(): Creates an element node.
- appendChild(): Adds a node as the last child of a node.
- removeChild(): Removes a child node from a node.

I-Gap Page14
TechnoloT
echn
- addEventListener(): Attaches an event handler to the specified element.
- removeEventListener(): Removes an event handler from the specified element.
Utility Functions :
- alert(): Displays an alert box with a message.
- confirm(): Displays a dialog box with a message and OK and Cancel buttons.
- prompt(): Displays a dialog box that prompts the user for input.
- setTimeout(): Calls a function after a specified number of milliseconds.
- setInterval(): Calls a function at specified intervals (in milliseconds).
- clearTimeout(): Cancels a timeout set with setTimeout().
- clearInterval(): Cancels an interval set with setInterval().

This is not an exhaustive list, but it covers many of the common functions you might use in JavaScript.

Uses of JavaScript :

JavaScript is a versatile and widely-used programming language primarily used for:

1. Web Development :
- Client-Side Scripting: JavaScript is used to create dynamic and interactive web pages. It can
manipulate HTML and CSS, handle events, validate forms, and more.
- Server-Side Scripting: With Node.js, JavaScript can be used for server-side programming, enabling
full-stack development.

2. Web Applications:
- JavaScript frameworks and libraries like React, Angular, and Vue.js facilitate the development of
complex web applications.
- Single Page Applications (SPAs) use JavaScript to provide a seamless user experience without full
page reloads.

3. Mobile Applications:
- Frameworks like React Native and Ionic allow developers to build mobile applications using
JavaScript.

4. Game Development:
- JavaScript, along with HTML5 and WebGL, is used for creating browser-based games.

5. Desktop Applications:
- Tools like Electron allow developers to build cross-platform desktop applications using JavaScript.

6. Automation and Scripting:

- JavaScript can be used for automating repetitive tasks in web browsers, such as web scraping or form
filling.

7. Internet of Things (IoT):

- JavaScript can be used in IoT development with platforms like Node.js to handle device
communication and data processing.

I-Gap Page15
TechnoloT
echn
 Java used in project

I-Gap Page16
TechnoloT
echn
 3.2. React

React is a declarative, efficient, and flexible JavaScript library for

building user interfaces. It lets you compose complex UIs from
small and isolated pieces of code called “components”. React has a
few different kinds of components, but we'll start with
React.Component subclasses: class ShoppingList extends React.

Use of the react :

React is a JavaScript-based UI development library. Although React is a library rather than a language, it
is widely used in web development. The library first appeared in May 2013 and is now one of the most
commonly used frontend libraries for web development.

Installation of react :

npm install -g create-react-app.

How to install React JS using npm?

Ensure Node. js and npm are installed.
Install create-react-app globally: npm install -g create-react-app.
Create a new React app: create-react-app your_app_name.
Navigate into the created app directory: cd your_app_name.
Start the development server: npm start.

I-Gap Page17
TechnoloT
echn
 4.Angular BootCamp

4.1. IntroductionTo Angular

Angular is a platform and framework for building single-page client applications using HTMLand
TypeScript. Angular is written in TypeScript. It implements core and optional functionalityasa set
ofTypeScript libraries thatyouimport intoyour apps.

The architecture of an Angular application relies on certain fundamental concepts. The

basicbuildingblocksare NgModules,whichprovideacompilationcontextfor
components.NgModules collect related code into functional sets; an Angular app is defined by a
set ofNgModules. An app always has at least a root module that enables bootstrapping, and
typicallyhas manymorefeaturemodules.
 Components define views, which are sets of screen elements that Angular can
chooseamongand modifyaccordingtoyourprogram logic and data.
 Components use services, which provide specific functionality not directly relatedtoviews.
Service providers can be injected into components as dependencies, making
yourcodemodular, reusable,and efficient.

I-Gap Page18
TechnoloT
echn
 4.2. Typescript

TypeScriptstandsinanunusualrelationshiptoJavaScript.TypeScriptoffersallofJavaScript’sfeatu
res, andanadditionallayeron topofthese:TypeScript’s typesystem.

For example, JavaScript provides language primitives like string, number, and object, but
itdoesn’tcheckthatyou’veconsistentlyassignedthese.TypeScript does.

This means that your existing working JavaScript code is also TypeScript code. The
mainbenefit of TypeScript is that it can highlight unexpected behavior in your code, lowering
thechanceof bugs.

Example:-

I-Gap Page19
TechnoloT
echn
 4.2.1. TypeAnnotations :-

We know that JavaScript is not a typed language so we cannot specify the type of a
variablesuch as a number, string, Boolean in JavaScript. However, in TypeScript, we can
specify thetype of variables, function parameters, and object properties because TypeScript is
a typedlanguage.

Type Annotations are annotations which can be placed anywhere when we use a type. Theuse
of Type annotation is not mandatory in TypeScript. It helps the compiler in checking thetypesof
variableand avoiderrors when dealingwith thedata types.

Wecanspecify thetypeby using a colon(: Type) afteravariablename,parameter,orproperty.

There can be a space between the colon and variable name, parameter, or
property.TypeScriptincludesalltheprimitivedatatypesofJavaScriptsuchasnumber,string,Boolea
n,etc.

Example:

4.2.2. TypeInference:-
TypeScriptisa typedlanguage.However,it is not mandatory tospecify the
typeofavariable.TypeScriptinferstypesofvariableswhenthereisnoexplicitinformationav
ailableintheformoftypeannotations.

TypesareinferredbyTypeScriptcompilerwhen:
 Variablesareinitialized
 Defaultvaluesaresetforparameters
 Functionreturntypesaredetermined

Forexample,vara="sometext"

I-Gap Page20
TechnoloT
echn
 4.2.3. Decorators :-
Decorators are one the most powerful features Typescript has to offer, allowing us
toextend the functionality of classes and methods in a clean and declarative
fashion.Decorators are currently a stage 2 proposal for JavaScript but have already
gainedpopularity in the TypeScript eco-system, being used by leading open-source
projectssuchasAngularandInversify.
Syntax:

4.2.4. ClassGenerics:-
TypeScriptsupportsgenericclasses.Thegenerictypeparameterisspecifiedinangularbrack
etsafterthenameoftheclass.Agenericclasscanhavegenericfields(membervariables)orme
thods.
Example:

I-Gap Page21
TechnoloT
echn
 4.2.5. FunctionGenerics:-
Genericsofferawaytocreatereusablecomponents.Genericsprovideawaytomakecomponents
workwithanydatatypeandnotrestricttoonedatatype.
Example:

I-Gap Page22
TechnoloT
echn
 4.3. AngularForms

4.3.1. ReactiveForms:-
Reactive forms provide a model-driven approach to handling form inputs
whosevalueschange over time.Thisguide showsyouhow tocreate andupdate a
basicformcontrol,progresstousingmultiplecontrolsinagroup,validateformvalues,andcre
atedynamicformswhereyoucanaddorremovecontrolsatruntime.
Example:
a) Creatingformcontrol:

b) Bindingtotemplate:

I-Gap Page23
TechnoloT
echn
 4.4. Modules

In Angular, a module isa mechanism to group components, directives,pipes and

servicesthatarerelated,insuchaway
thatcanbecombinedwithothermodulestocreateanapplication. An Angular application can be
thought of as a puzzle where each piece (or eachmodule)is needed to beable to seethefull
picture.

Another analogy to understand Angular modulesis classes.In a class, we can define publicor
private methods. The public methods are the API that other parts of our code can use tointeract
with it while the private methods are implementation details that are hidden. In thesame way,
a module can export or hide components, directives, pipes and services. Theexported
elementsaremeant to be used by other modules,while the ones thatare notexported (hidden) are
just used inside the module itself and cannot be directly accessed byothermodulesof
ourapplication.

I-Gap Page24
TechnoloT
echn
 4.5. Components

Simplyput,anAngularcomponentcontrolsapartoftheUIofyourapplication.Forexample, the
header, footer, or whole page can all be components. Depending on how muchreusability,you
want inyour code.

Technically, an Angular component is a TypeScript class decorated

withthe@Component decorator which is part ofthe Angular core.

A component has an associated view which is simply an HTML file (but can also containsome
special Angular template syntax which helps display data and bind events from
thecontrollercomponent)

Acomponenthasalsooneormoreassociatedstylesheetfilesforaddingstylestothecomponentview.
Thesefiles canbeinmanyformatslike CSS, Stylus,Sassor Less.

I-Gap Page25
TechnoloT
echn
 4.6. Routing

Routing basically means navigating between pages. You have seen many sites with links
thatdirect you to a new page. This can be achieved using routing. Here the pages that we
arereferring to will be in the form of components. We have already seen how tocreate
acomponent.Let us now createacomponent and seehow to useroutingwith it.

In the main parent component app.module.ts, we have to now include the router module
asshownbelow−

Thisis whatRoutingmodulelooks like:

I-Gap Page26
TechnoloT
echn
  LazyLoading:-
By default,NgModulesareeagerly
loaded,whichmeansthatassoonastheapploads,sodoalltheNgModules,whetherornott
heyareimmediatelynecessary. For large apps with lots of routes, consider lazy
loading—a
designpatternthatloadsNgModulesasneeded.Lazyloadinghelpskeepinitialbundlesiz

essmaller,whichinturnhelpsdecreaseloadtimes.

I-Gap Page27
TechnoloT
echn
 4.7. RXJS

The full form of RxJS is Reactive Extension for Javascript. It is a javascript library thatuses
observables to work with reactive programming that deals with asynchronous data
calls,callbacks and event-based programs. RxJS can be used with other Javascript libraries
andframeworks. It is supported byjavascript and alsowith typescript.

4.7.1. Features ofRxJS:-

InRxJS,thefollowingconceptstakes careofhandlingtheasync task−

 Observable
An observable is a function that creates an observer and attaches it to the
sourcewhere values are expected, for example, clicks, mouse events from a dom
elementoran Http request, etc.
 Observer
It is an object with next(), error() and complete() methods, that will get calledwhen
there is interaction to the with the observable i.e. the source interacts for
anexamplebutton click, Http request, etc.
 Subscription
When the observable is created, to execute the observable we need to subscribe
toit.It canalso be usedto cancel theexecution.
 Operators
An operator is a pure function that takes in observable as input and the output
isalsoan observable.
 Subject
A subject is an observable that can multicast i.e. talk to many observers. Considera
button with an event listener, the function attached to the event using addlisteneris
called every time the user clicks on the button similar functionality goes
forsubjecttoo.
 Schedulers
A scheduler controls the execution of whenthe subscription has to start andnotified.

I-Gap Page28
TechnoloT
echn
 4.8. Projects DevelopedinAngular

1. PasswordGenerator
2. CardsLandingPage
3. TypingGame
4. PipesPractice
5. ComponentsDemonstration
6. WikipediaSearch
7. RandomImageGenerator
8. CreditCardCheckout
9. Email
Form10.Math
Game11.Email
Client
12.Employee and Company
Map13.Multi Feature Landing
Page

I-Gap Page29
TechnoloT
echn
 CONSLUSION
In this 6 weeks of industrial training I have learned lot of things which is used in modern
ITindustry. I have learned React Native and angular from scratch and dived deep into it.
Thisindustrial training covered all bits and pieces of these two topics. I developed production
gradeapplication in this training and worked on these projects like they were corporate level
projects.Most important of all I learned skill of debugging and how to deal with bug when
application isgigantic. Instructors who taught these topics were highly professional and
demonstrated theirthoughtprocess whiledevelopingprojects.

I-Gap Page30
TechnoloT
echn