Unit 3 :

FRONT END TECHNOLOGIES

1
Angular Version 10+

2
Syllabus
Front-End Frameworks: What is web framework? Why Web Framework? Web Framework Types.

MVC: What is MVC, MVC Architecture, MVC in Practical, MVC in Web Frameworks.

TypeScript: Introduction to TypeScript (TS), Variables and Constants, Modules in TS.

Angular Version 10+: Angular CLI, Angular Architecture, Angular Project Structure, Angular Lifecycle,
Angular Modules, Angular Components, Angular Data Binding, Directives and Pipes, Angular Services
and Dependency Injections (DI), Angular Routers, Angular Forms.

ReactJS: Introduction to ReactJS, React Components, Inter Components Communication, Components

Styling, Routing, Redux- Architecture, Hooks- Basic hooks, useState() hook, useEffect() hook,
useContext() hook.

3
What is Angular?
Angular is a typescript based free and open source web application framework developed by Google.

Angular 10+ is a JavaScript framework which is used to create single page application.

The Angular applications are created with the help of HTML and TypeScript.

It follows the MVC architecture.

Angular Vs AngularJS

4
Angular CLI

Angular CLI is a command-line interface tool.

Used to perform various operations related to an Angular project. It lets developers create, run,

test and build Angular projects using simple commands. It also lets developers create

components, services, guards, etc.

Angular CLI is available as a NodeJS module and therefore, to use it, we need to download and

install NodeJS first.

5
Installing Angular CLI
Step 1: Check your machine for node.js and npm
node –v
npm –v
Step 2: Install Angular CLI
npm install -g @angular/cli
Step 3: Check version of Angular
ng version
Step 4: Create workspace folder
ng new Proj_name
Would you like to add Angular routing? Y
Which stylesheet format would you like to use? CSS
Step 5: Change directory to the proj_name folder and issue command
ng serve -o
6
Angular Project Structure

The folder structure of Angular project is:

1. node_modules: contains folders of packages which are installed

2. src folder: this is the place where we need to put all our application source code

3. app folder: When we want to create any component, service or module, we need to create it
within this app folder.

4. assets folder: you can store static assets like images, icons etc.

5. environment folder: used to set up different environments.

7
Angular Project Structure

6. favicon.ico: It is the icon file that displays on the browser

7. index.html: Starting point of our application.

8. main.ts file

9. polyfills.ts: used for browser-related configuration

10. angular.json file: It contains the configuration of your angular project

11. test.ts and karma.config.js: used for testing purpose

12. Package.json: mandatory for every npm project

8
Angular Architecture

9
Angular Modules
Angular modules combines components, directives and pipes.

Every angular app has a root module which is called as AppModule. It provides bootstrap mechanism that

launches the application.

If we want to use another custom angular module, then we need to register that module inside the

app.module.ts file.

For defining the module we use the ngModule.

Every angular application has at least one ngModule class named AppModule and resides in a file

app.module.ts

The @ngModule() is a function that takes a single metadata object, whose properties describe the module.

10
Angular Component
The component in the application defines a class which contains application logic and data.
The application logic is written in TypeScript and view of the page is in HTML.
Every angular app has at least one component known as root component.
Each component consist of:
 - HTML declares what displays on the web page
 - A TypeScript class that defines behavior
 - A CSS selector that defines how the component is used
Command to create custom component
ng generate component component_name
On issuing this command the folder gets created inside the src-> app folder.
It will automatically create .css, .ts, .css and update app.module.ts
11
Angular Data Binding
Data binding defines the communication between components and its view.
Property binding: one way binding in which we can set the properties of the element to the user interface
page.

Example:-

Take one image and save it to src->assets folder.

Go to src->app folder and open the file app.component.ts and add image variable public image =
“path of image” in AddComponent class

open app.component.html file and set the property value to image

<img [src] = “path of file” alt = “Rajmata”>

12
Angular Data Binding
Event binding: flow of data from view component.

The event is triggered on the view. The view page sends data to the component.
Example:
Open the app.component.html page and add
<button (click) = “display()”> submit </button>
Open the app.component.ts page and add
display()
{
alert(“Submitted”);
}
in AddComponent class

13
Directives and Pipes

Directives is a technique in Angular that adds additional behavior to the elements in the Angular
applications.
There are three types of directives-

1. components 2. Structural Directives 3. Attribute Directive

The structural directive’s name always start with an asterisk(*) prefix.

There are three most popularly used structural directives- 1. ngIf 2. ngFor 3. ngSwitch

You can create custom directives by using

ng g directive directive_name

14
Directives and Pipes
ngIf Directive:- modify structure of DOM depending on a condition.
Syntax:-
<div *ngIf = “condition”> Content to display when condition is true </div>
Example:
1. Open app.component.html and write
<div *ngIf = “courses.length > 0” >
List of courses
</div>
2. Open app.component.ts and write
courses = [1, 2];
in AddComponent class
15
ngFor Directive: shows the template/repeats itself for each item in the list.

Syntax:
<li *ngFor = “let item of items”> … </li>

Example:
1. Open app.component.ts file and write
students = [
{roll:2,name:’Abhi’},
{roll:4,name:’Shree’}
];
in AddComponent class

2. Open app.component.html file and write

<table>
<th> Roll_No </th>
<th> Name </th>
<tr *ngFor= “let student of students”>
<td> {{student.roll}} </td>
<td> {{student.name}} </td>
</tr>
</table> 16
ngSwitch Directive: The [ngSwitch] directive specifies an expression to match against.

The expression for matching are provided by ngSwitchCase directives

Every view that matches is displayed.

Example:

Open app.component.ts file and write

count = 1;

in AddComponent class

2. Open app.component.html file and write

<div [ngSwitch] = “count”>

<div *ngSwitchCase= “1”> 1 is selected </div>

<div *ngSwitchDefault> Default Value </div>

</div>

17
Pipes
Pipes are used to transform the data.

The pipes are written using pipe operator which is denoted by |.

Built-in pipes:

1. Lowercase 2. Uppercase 3. Currency 4. Date 5. JSON

Example:

Open app.component.ts file and write

create student array in AddComponent class
student = {roll:101,name:”Abhi”,City:”Pune”,fees:100,DOB:”31/05/1992”}

Open app.component.html file and write

Name in lowercase: {{student.name | lowercase}}
City in uppercase: {{student.city | uppercase}}
DOB: {{student.DOB | date}}
Fees: {{student.fees| currency:’INR’}}
18
19