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 :)