Scribd
Upload
96 views11 pages

Angular Presentation

This document provides an introduction to Angular, including what it is, its development environment setup, and some of its core building blocks. Angular is a front-end JavaScript framework used to build single-page applications. It uses TypeScript and supports modularity, lazy loading, data binding between components and templates, and services to provide common functionality across modules. The document outlines how to set up Angular using Node, npm, and the Angular CLI, and describes modules, components, directives, and services as some of Angular's fundamental building blocks.

Uploaded by

Jinu Regi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODP, PDF, TXT or read online on Scribd
96 views11 pages

Angular Presentation

This document provides an introduction to Angular, including what it is, its development environment setup, and some of its core building blocks. Angular is a front-end JavaScript framework used to build single-page applications. It uses TypeScript and supports modularity, lazy loading, data binding between components and templates, and services to provide common functionality across modules. The document outlines how to set up Angular using Node, npm, and the Angular CLI, and describes modules, components, directives, and services as some of Angular's fundamental building blocks.

Uploaded by

Jinu Regi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODP, PDF, TXT or read online on Scribd
You are on page 1/ 11

Introduction to Angular

What and Why


● Angular is a front-end javascript framework to create Single Page Application(SPA).
● developed by Google.
● Modular Approach
● Angular uses the TypeScript, a super-set of JavaScript that implements many new ES2016+
features.
● Lazy Loading
Development Environment Setup
● Download suitable Node js installer (based on your operating system) from the url:
https://nodejs.org/en/download/
Note: You can check if the node has been installed successfully by running node -v
● Install npm: run the below command in command prompt
npm install
Note: You can check if the npm has been installed successfully by running npm -v
● Move to your workspace and install Angular-cli: run the below command in command
prompt
npm install -g @angular/cli
Note: You can check if the cli has been installed successfully by running ng -v
● Download any text-editor such as Visual Studio Code, SubLime Text, WebStorm etc.
Building Blocks
Contd.

Modules: A module is a mechanism to group components, directives, pipes and services that
are related, in such a way that can be combined with other modules to create an application.
Each angular application must have a root module commonly known as app.module.ts

Components: It is a logical piece of code which consist of following:


Template:This contains the HTML which needs to be rendered
Class: This is like a class defined in any language. This contains properties and methods. This
has the code which is used to support the view. It is defined in TypeScript.
Metadata − This has the extra data defined for the Angular class. It is defined with a
decorator.
Every Angular app has a root component commonly known as app.ccomponent.ts
Contd.

Data Binding: Angular provide the feature to bind data in the component to the view and
vice versa.
Angular supports the following types of bindings:
Property binding: A property on an HTML element can be bound to the value of a field in
the component’s class. Whenever value of the property in the component changes, it
automatically updates value of the HTML property it is bound to. The following snippet
shows a simple example of property binding:
<a [href]="url">Click here to visit the link</a>
Notice the square brackets around the HTML property in the above snippet. They indicate
that this field is bound to data.
Contd.

Event Binding: The events of any HTML element can be bound to public methods
of its component class. The method is called whenever the event is triggered by a
user’s action on the page. The following snippet shows an example of event
binding:
<button (click)="close()">Close</button>
Two-way Binding: It is a derived binding that uses both property binding and the
two-way binding under the hood. This binding is used to display a value and also to
update the value when a new value is entered in the UI. ngModel is a built-in
directive that supports two-way binding. The following snippet shows how it is
used:
<input type="text" [(ngModel)]="name" />
Contd.

Service: A service is used when a common functionality needs to be provided to various


modules. For example, we could have a database functionality that could be reused among
various modules. And hence you could create a service that could have the database
functionality.
Contd.

Directives: Directives allow you to attach behavior to elements in the DOM


There are three kinds of directives in Angular:
Components: directives with a template.

Structural directives: change the DOM layout by adding and removing DOM
elements. eg. NgFor, NgSwitch and NgIf.
Attribute directives: change the appearance or behavior of an element, component,
or another directive.
Reference

● https://angular.io/guide/quickstart
● https://angular-2-training-book.rangle.io/
Thank You :)

You might also like