AngularJS

AngularJS is a JavaScript framework. It can be added to an HTML page with a

<script> tag.
AngularJS extends HTML attributes with Directives, and binds data to HTML with
Expressions.

What is Covered in Course

Component and Data-Binding
Pipes
Directive
Services
Routing
Angular Modules

Component and Data-Binding:-

In Angular, components and data binding are fundamental concepts that allow you
to build dynamic and interactive web applications. Let's explore each of these
concepts:

Components:
● A component is a basic building block of an Angular application.
● It encapsulates the application's logic and user interface.
● Components consist of a TypeScript class (with properties and methods) and
an associated HTML template.

Data Binding:
Data binding is a mechanism in Angular that synchronizes the data between the
component and the DOM (view). There are several types of data binding:

1. Interpolation ({{ expression }}):

● Binds a component property to a placeholder in the template.

2. Property Binding ([property]="expression"):

● Binds a component property to an HTML element property.
3. Event Binding ((event)="expression"):
● Binds an HTML event to a method in the component.

4. Two-Way Binding ([(ngModel)]="property"):

● Combines property binding and event binding to achieve two-way data
binding. Requires the FormsModule for forms.

Directive:
Angular directives are a powerful feature that allows you to extend the
functionality of HTML elements. Directives are markers on a DOM element that
tell Angular to do something to that element or its children. There are three types
of directives in Angular: structural directives, attribute directives, and custom
directives.

1. Structural Directives:
Structural directives are responsible for altering the layout of the DOM by adding
or removing elements.
ngIf:
The ngIf directive conditionally renders content based on the truthiness of an
expression.
<div *ngIf="isUserLoggedIn">Welcome, User!</div>
ngFor:
The ngFor directive is used for rendering a list of items.
ngSwitch:
The ngSwitch directive lets you add/remove HTML elements depending on a
match expression. ngSwitch directive used along with ngSwitchCase and
ngSwitchDefault
<div [ngSwitch]="Switch_Expression">
<div *ngSwitchCase="MatchExpression1”> First Template</div>
<div *ngSwitchCase="MatchExpression2">Second template</div>
<div *ngSwitchCase="MatchExpression3">Third Template</div>
<div *ngSwitchCase="MatchExpression4">Third Template</div>
<div *ngSwitchDefault?>Default Template</div>
</div>
2. Attribute Directives:
Attribute directives modify the appearance or behavior of an element.

a. ngClass:
The ngClass directive allows you to conditionally apply CSS classes.
<div [ngClass]="{'active': isActive, 'disabled': isDisabled}">Element</div>

b. ngStyle:
The ngStyle directive allows you to conditionally apply inline styles.
<div [ngStyle]="{'color': textColor, 'font-size': fontSize + 'px'}">Styled
Element</div>
3. Custom Directives:
You can create your own custom directives to encapsulate and reuse behavior.

a. Creating a Custom Directive:

b. Using the Custom Directive:

Services:
services are a way to organize and share code across components. They provide a
mechanism for encapsulating and reusing functionality, promoting modularity and
maintainability in your application. Services are typically used for tasks such as
fetching data from a server, sharing data between components, and encapsulating
business logic.

1. Creating a Service:
You can use the Angular CLI to generate a service:
● ng generate service my-service
This creates a service file (e.g., my-service.service.ts) and registers the service with
the Angular dependency injection system.

2. Service Class:
The service class is where you define the functionality that you want to share
across components. It is a regular TypeScript class decorated with the @Injectable
decorator.
3. Injecting a Service:
You can inject a service into a component, directive, or another service by
including it in the constructor. Angular's dependency injection system takes care of
providing the instance of the service.

4. Providing Services:
The providedIn: 'root' configuration in the @Injectable decorator indicates that the
service should be provided at the root level. This means there will be a single
instance of the service for the entire application.

5. HTTP Service:
Angular's HttpClient service is commonly used to perform HTTP requests. It is
usually provided by importing the HttpClientModule in your application module.

6. Use of Services:
Services are often used for various purposes such as:

● Fetching and managing data.

● Sharing state or data between components.
● Encapsulating business logic.
● Handling communication with external APIs.

7. Dependency Injection:
Angular's dependency injection system automatically injects the required services
into the components, making it easy to manage dependencies and promote code
reusability.

Routing:
Routing in Angular allows you to create single-page applications (SPAs) where
different views (or components) are displayed based on the URL. Angular provides
a powerful router module that helps in navigation and managing application state.
Here's an overview of how to set up and use routing in Angular:

1. Setting Up Routes:
To get started with routing, you need to define routes in your Angular application.
Routes are typically defined in the app-routing.module.ts file.
2. Creating Components:
Create components for each route. For example, create home.component.ts and
about.component.ts.

3. Adding the Router Outlet:

In your main app.component.html, add the <router-outlet></router-outlet> tag.
This is where Angular will dynamically load the component associated with the
current route.

4. Navigation Links:
To navigate between routes, you can use the routerLink directive in your templates.

<!-- app.component.html -->

<nav>
<a routerLink="/">Home</a>
<a routerLink="/about">About</a>
</nav>

5. Router Navigation in Code:

You can also navigate programmatically in your component code using the Router
service.

6. Route Parameters:
You can pass parameters to routes for dynamic content.

7. Nested Routes:
You can also have nested routes for more complex applications.

// app-routing.module.ts
const routes: Routes = [
{ path: 'dashboard', component: DashboardComponent,
children: [
{ path: 'profile', component: ProfileComponent },
{ path: 'settings', component: SettingsComponent }
]
},
];

Modules:
modules play a crucial role in organizing and structuring an application. They help
in dividing an application into smaller, manageable pieces, providing a way to
bundle related components, directives, pipes, and services together. There are two
types of modules in Angular: the root module and feature modules.

1. Root Module (AppModule):

The root module is the entry point of an Angular application. It is commonly
named AppModule and is responsible for bootstrapping the application. The root
module is where you define the components, directives, pipes, and services that
form the main structure of your application.

2. Feature Modules:
Feature modules are additional modules created to organize and encapsulate
specific features or functionality within your application. These modules are
designed to be imported into the root module or other feature modules as needed.

Angular Architecture
Angular is a popular open-source framework for building web applications. It
follows the Model-View-Controller (MVC) architectural pattern, but in Angular, it
is often referred to as Model-View-ViewModel (MVVM) due to the way data
binding is implemented. Here's an overview of the key components and concepts in
Angular architecture:

Modules:- Angular applications are modular, and each module encapsulates a set
of related components, directives, pipes, and services.
Modules are defined using the @NgModule decorator.

Components:
● Components are the basic building blocks of an Angular application.
● They encapsulate the application logic and user interface.
● Each component is associated with an HTML template, a style sheet, and a
class containing the component's code.
Templates:
● Templates define the structure of the user interface using HTML enhanced
with Angular directives and binding syntax.
● Data binding allows the synchronization of the model and the view.
Directives:
● Directives are markers on the DOM elements that tell Angular to do
something with a DOM element.
● Examples include ngIf, ngFor, and custom directives.

Services:
● Services are singleton objects that can be injected into components and other
services.
● They are used to encapsulate and share functionality across different parts of
an application.

Dependency Injection (DI):

● Angular has a built-in dependency injection system that allows components
and services to be injected with their dependencies.
● This promotes modular and testable code.

Routing:
● Angular provides a powerful router for building single-page applications
with navigation between different views.

RxJS (Reactive Extensions for JavaScript):

● Angular heavily utilizes RxJS for handling asynchronous operations, events,
and data streams.
● Observable patterns are commonly used for handling asynchronous tasks.

Angular's architecture is designed to promote modularity, maintainability, and

testability. Understanding these key components and their relationships is essential
for building robust and scalable Angular applications.