Scribd
Upload
2 views

Introduction to Angular

Angular is a JavaScript framework designed for building reactive single-page applications (SPAs) using a component-based architecture. It consists of modules, components, templates, data binding, directives, and services, enabling developers to create interactive web applications. Popular applications built with Angular include YouTube, Netflix, and Gmail.

Uploaded by

jawagebhushan
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

Introduction to Angular

Angular is a JavaScript framework designed for building reactive single-page applications (SPAs) using a component-based architecture. It consists of modules, components, templates, data binding, directives, and services, enabling developers to create interactive web applications. Popular applications built with Angular include YouTube, Netflix, and Gmail.

Uploaded by

jawagebhushan
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 19

Introduction

to Angular
Bhushan Jawage
What is Angular ?
 Angular is a JavaScript framework, which makes you able to create reactive
single Page Application (SPA’s).

 Angular is completely based on components.

 It consists of serval components which forms a tree structure with Parent and
child components.

 Version beyond 2+ are generally known as Angular Only. The very first version
angular 1.0 is known as AngularJS.
 Angular is oriented to develop the front end uncoupled of the
backend.

 Example of Application built on Angular Platforms are :-

YouTube, Netflix, Gmail, Upwork etc.


Angular Architecture :-
 Modules

 Components

 Templates

 Metadata

 Data Binding

 Directives

 Services
Modules :-

 Modules are building blocks of Angular application.

 It consist of components , Templates, Directive, Pipes and Services.

 Modules are reusable, One Module’s components and services can be used
by another Modules
Components In Angular :-
 An Angular component represents a portion of a view.

 Generally, an interactive web page is made of HTML, CSS, and JavaScript.


Angular component is no different

 Angular Component = HTML Template + Component Class + Component


Metadata
Components In Angular :-
 HTML Template :-
It is Nothing but Regular HTML Code with additional Angular Specific syntax to
communicate with the component class.

 Class :-
a component class is a Typescript class that includes properties and methods.
Eventually, this class will be complied into JavaScript.

 Metadata :-
It is some extra data for a component used by Angular to execute the component , such
as location of HTML and CSS files of the component.
Components :-
When you create new component, using Angular CLI Command
Each component consists of:

 A template file, <component-name>.component.html

 A component file, <component-name>.component.html

 A CSS file, <component-name>.component.css

 A testing specification file, <component-


name>.component.spec.ts
Template :-
 You define a component’s view with its companion template.

 A template is form of HTML that tells Angular how to render


the component.
Template

Data Binding:-
Data binding is the core concept of Angular 8 and used to
define the communication between a component and the
DOM. It is a technique to link your data to your view layer
 In simple words, you can say that data binding is a
communication between your typescript code of your
component and your template which user sees.
 Data binding can be either one-way data binding or two-
way data binding.
Template Data Binding:-
 One Way Data Binding :-

String Interpolation.

Property Binding

Event Binding

 Two way Data Binding:

Combination of Property & Event Binding Together


Directives :-
 Directives are classes that add new behavior or modify the
existing behavior to the elements in the template.
 Types of Directives :-

1. Component Directive – They are special directives in Angular. They are the directive
with a own template. e.g. <my-grid></my grid>

2. Structural Directive – Change the HTML DOM layout by adding and removing
elements. e.g. ngIf, ngFor ngSwitch etc.

3. Attribute Directive – Change the appearance & behaviour of HTML elements .


e.g. [ngClass], [ngStyle]
Directives :-
Services :-
 Services in Angular are simply typescript classes with the @injectible
decorator.

 This decorator tells angular that the class is a service and can be
injected into components that need that service.

 As mentioned earlier, these services are used to share a single


piece of code across multiple components. These services are
used to hold business logic.
Project Flow :-

You might also like