This is an Angular 6 Project Report. Made By M-R-X. Lovely Professional University

1. ACKNOWLEDGEMENT
I would like to express my special thanks of gratitude to lovely Professional University, who
gave me the golden opportunity to do this wonder project of Angular 6. I came to know
about so many new things I am really thankful for this. Secondly, I would like to thanks my
parents and my friend who help me a lot to finalizing this project within the limited time
frame.
Deepanshu
Reg No. 11715635

2. Content
 INTRODUCTION OF ANGULAR 6
 ANGULAR 6 ARCHITURE
 ANGULAR 6 FORMS
 DATA BINDING
 PIPES
 SERVICES
 ROUTING
 MODULE

3. Introduction to Angular 6
Angular is an open-source JavaScript framework developed by Google. It helps you to
create single-page applications, one-page web applications that only require HTML, CSS,
and JavaScript on the client side. It is based on MVC. pattern and build well structured,
easily testable, and maintainable front-end applications.
Angular has changed the way to web development. It does not base on jQuery to perform
its operations. Till now you are using ASP.NET, ASP.NET MVC, PHP, 6P, Ruby on Rails for
web development but now you can do your complete web development by using most
powerful and adaptive JavaScript Framework Angular. There is no doubt, JavaScript
frameworks like Angular Ember etc. are the future of web development

4. Angular 6 Architecture
Angular 6 Follows the MVC architecture, the diagram of the MVC framework as shown
below.
Controller
View
Module
 The Controller represents the: layer that has the business logic. User events trigger
the functions which be stored inside your controller. The user events are part of the
controller.
 Views are used to represent the presentation layer which is provided to the end
user
 Models are used to represent your data. The data in your model can be as simple as
just having primitive declarations for example, if you are maintaining a student
application your data model could just have a student id and a name or can also be
complex by having a structured data model. If you are maintaining a car ownership
application, you can have structures to define the vehicle itself in terms of its engine
capacity, seating capacity, etc.

5. Angular 6 Forms
Angular 6 facilitates you to create a form enriches with data binding and validation of
input controls
Input controls are ways for a user to enter data. A form is a collection of controls for the
purpose of grouping related controls together. Following are the input controls used in
Angular6 forms:
 input element
 selects element
 button element
 text area elements
Angular provides multiple events that can be associated with the HTML controls. These
events are associated with the different HTML Input elements.
Following is a list of events supported in Angular:
 ng-click
 ng-dblclick
 ng-mousedown
 ng-mouseup
 ng-mouseenter
 ng-mouseleave
 ng-mousemove
 ng-mouseover
 ng-keydown
 ng-keyup
 ng-keypress
 ng-change

6. Angular 6 Data Binding
Data binding is a very useful and powerful feature used in software development
technologies. It acts as a bridge between the view and business logic of the application.
There is two type of data binding:
1. One-way data binding
The one-way data binding is an approach where n value is taken from the data model and
inserted into an HTML element. There is no way to update model from view. It is used in
classical template systems. These systems bind data in only one direction.
View
One Time Merge
Template Model
2. Two-way data binding
Data-binding in Angular apps is the automatic synchronization of data between the model
and view components.
Data binding lets you treat the model as the single-source-of-truth in your application the
view is a projection of the model at all times. If the model is changed, the view reflects the
change and vice versa.
Template
View
Model

7. Pipes
Every application starts out with what seems like a simple task gal data, transform them
and show them to users. Getting data could be as simple as creating a local variable or as
complex as streaming data over a WebSocket
Once data arrives, you could push their raw to String values directly to the view, but that
rarely makes for a good user experience. For example, in most use cases, users prefer to
see a date in a simple format like April 15. 1988 rather than the raw string format Fri Apr
15 1988 00:00:00 GMT-0700 (Pacific Daylight Time).
Clearly, some values benefit from a bit of editing. You may notice that you desire many of
the same transformations repeatedly, both within and across many applications. You can
almost think of them as styles. In fact, you might like to apply them in your HTML templates
as you do styles
Introducing Angular pipes, a way to write display-value transformations that you can
declare in your HTML

8. Services
Angular 6 services are substitutable objects that are wired together using dependency
injection (DI). You can use services to organize and share code across your app
Angular 6 service types: -
Angular comes with different types of services. Each one with its own use cases
All of these services are singletons. You probably want to use Factory all the time.
Provider
 Is the parent of all other services (except constant)
 can be configured using app.config(function (Provider)
 a little complex
Factory
 simpler than Provider, but without configuration
 definition: 'app.factory(name', some Function)
 some Function is called when the name service is instantiated and should return
an object
Service
 just like Factory, but:
 instead of a function. it receives a JavaScript class a constructor function as
argument
 simplest service type, but also least flexible
Value
 just stores a single value
 use it like app.value('name' value")
Constant
 just like value, but
 can be injected everywhere
 is not constant Oo, but may be changed

9. Routing
In Angular routing is what you to create Single Page Applications
 Angular 6 routes enable you to create different URL for different content in your
application
 Angular routes allow one to show multiple contents depending on which route is
chosen.
 A route is specified in the URL after the # sign.
Let's take an example of a site which is hosted via the URL
http://example.com/inder.html.
On this page you would host the main page of your application Suppose if the application
was organizing an Event and one wanted to see what the various events on display are,
or wanted to see the details of a particular event or delete an event. In a Single Page
application, when routing is enabled, all of this functionality would be available via the
following links
http://example.com/index.html#ShowEvent
http://example.com/index.html#Display Event
http://example.com/index.html#DeleteEvent
The # symbol would be used along with the different routes (Show Event Display Event,
and Delete Event).
 So, if the user wanted to see all Events, they would Be directed to the link
(http://example.com/index.html#Show Event) else
 If they wanted to just see a particular event they would be redirected to the link
(http://example.com/index.html#Display Event) or
 If they wanted to delete an event, they would be directed to the link
http://example.com/index.html#DeleteEvent
Note that the main URL stays the same.

10. Angular 6 Module
In Angular, a module defines an application. It is a container for the different parts of
your application like controller, services, liters, directives etc.
A module is used as a Main method. Controller always belongs to a module.
How to Create a Module?
The angular object module method is used to create a module. It is also called Angular 6
function angular. Module
<div ng-app="myApp">…</div>
<script>
var app = angular.module("myApp" []);
</script>
Here, "myApp" specifies an HTML clement in which the application will run
Now we can add controllers’ directives, filters, and more to Angular application
How to add controller to a module: -
If you want to add a controller to your application refer to the controller with the ng-
controller directive
See this example:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angular6/1.4.angular.min.6"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl> firstName +"" + lastName )) </div>
<script>
var app angular.module("myApp. 1);
app.controller("myCtrl function(Sscope)
{$scope firstName "Ajeet";
$scope.lastName="Mourya":}
</script>
</body>
</html>

11. Declaration
I hereby declare that I have completed my six weeks summer training at Internshala from
01/06/2019 to 13/07/2019 under the guidance of Internshala. I hereby undertake that
project undertaken by me is the genuine work of mine.
DATE: 22 Feb 2020 (Signature of student)
Deepanshu
Reg no.11715635

12. SIX WEEKS SUMMER TRANING REPORT
(15/05/2019 to 26/06/2019)
ON
(Angular 6)
Submitted by:
Deepanshu
Reg No. 11715635
Program Name BCA
School of Computer Application
Lovely Professional University, Phagwara Punjab
(2020)