Subject Name: Modern Practical Tools Unit No: 01 Subject Code: 4340705

UNIT: 1
Introduction to Angular Framework
❖ Why Angular :
Angular is an open-source, JavaScript framework written in TypeScript. Google maintains it, and its
primary purpose is to develop single-page applications. As a framework, Angular has clear advantages
while also providing a standard structure for developers to work with. It enables users to create large
applications in a maintainable manner.

❖ Development Environment:

Environment Setup required for Angular:

To install Angular, we require the following –

• Nodejs
• Npm
• Angular CLI
• IDE for writing your code

Nodejs:
To install nodejs, go to the homepage, https://nodejs.org/en/download/ of nodejs and install the
package based on OS.
To check if nodejs is installed on system, type node -v in the terminal.
C:\>node –v

Npm:
Once nodejs is installed, npm will also get installed along with it.
To check if npm is installed or not, type npm –v in the terminal as given below. It will display the
version of the npm.
C:\>npm –v

Angular CLI:
Refer https://cli.angular.io/ of angular to get the reference of the command.
Type npm install –g @angular/cli in your command prompt, to install angular CLI on your system.
Once installation done check the version using below command −
ng version
It will display version details of angular - cli as well version of others packages.

Prepared By: Department of Computer Engineering Page 1

Subject Name: Modern Practical Tools Unit No: 01 Subject Code: 4340705

IDE for writing your code-Visual Studio Code

To download Visual Studio Code, go to https://code.visualstudio.com/.
Click Download for Windows for installing the IDE and run the setup to start using IDE.

❖ Starting Your First Angular Project:

Running first Application for Hello World

1) Create a workspace and initial application

✓ To create a new workspace and initial starter app. Run the CLI command ng new and provide the name
my-app, as shown here:
ng new my-app
✓ The ng new command prompts you for information about features to include in the initial app. accept the
defaults by pressing the Enter or Return key.
✓ The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a
few minutes.
✓ The CLI creates a new workspace and a simple Welcome app, ready to run.

2) Run the application

✓ The Angular CLI includes a server, for you to build and serve your app locally.
✓ Navigate to the workspace folder, such as my-app.
✓ Run the following command:
cd my-app
Prepared By: Department of Computer Engineering Page 2
Subject Name: Modern Practical Tools Unit No: 01 Subject Code: 4340705

ng serve --open
✓ The ng serve command launches the server, watches your files, and rebuilds the app as you make
changes to those files.
✓ The --open (or just -o) option automatically opens your browser to http://localhost:4200/.
✓ If your installation and setup was successful, you should see a page similar to the following.

Update following files:

Prepared By: Department of Computer Engineering Page 3

Subject Name: Modern Practical Tools Unit No: 01 Subject Code: 4340705

App.component.html file:

<div>
<div class="center-screen">
<h1>{{text1}}</h1>
</div>

</div>

App.component.ts file

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'practical1';
text1 = "Hello World"
}

❖ Basics of an Angular Application:

RootHTML--index.html
The Entry Point--main.ts
Main Module--app.module.ts
Root Component-AppComponent

RootHTML--index.html and The Entry Point--main.ts:

Angular is a framework which allows us to create "Single Page Applications", and here the index. html
is the single page which was provided by the server.
index. html - this is the page the component will be rendered in.
app/main. ts - is the glue that combines the component and page together.

Angular application gets loaded as:

Prepared By: Department of Computer Engineering Page 4
Subject Name: Modern Practical Tools Unit No: 01 Subject Code: 4340705

1. main.ts >> app.Module.ts >> app.component.ts >> index.html >> app.component.html

The default root component in an Angular application is app.

❖ Creating a Component:

To create a component using the Angular CLI:

Run the ng generate component <component-name> command; where <component-name> is the name
of new component.
For Example: ng generate component student-component

Now, if we go and check the file structure, we will get the student-component new folder created under
the src/app folder.
By default, this command creates the following:
A directory named after the component
A component file, <component-name>.component.ts
A template file, <component-name>.component.html
A CSS file, <component-name>.component.css
A testing specification file, <component-name>.component.spec.ts
Where <component-name> is the name of component.

❖ Understanding Data Binding:

Data binding deals with how to bind your data from component to HTML DOM elements (Templates).
We can make connections in two different ways one way and two-way binding.
Any change in the template in one-way data binding was not reflected in the component.
The two-way binding, however, facilitates to update data from component to view and from view to the
component.
The automatic synchronization of data happens in Two Way Data Binding between the Model and the
View.
Both the property binding and event binding are combined in two-way data binding.

Syntax:

[(ngModel)] = "[property of the component]"

The ngModel directive needs to be enabled for two-way data binding. The FormsModule needs to be
added in imports[] array in the AppModule, because the ngModel directive depends upon FormsModule
in angular/forms package.

Example:
• Add the following code in app.module.ts:

Prepared By: Department of Computer Engineering Page 5

Subject Name: Modern Practical Tools Unit No: 01 Subject Code: 4340705

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

• Add the below code in app.component.ts:

import { Component } from "@angular/core";

@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
Name: string = "Hello World";
}

• Add the below code in app.component.html:

<h2>Two-way Binding</h2>
<input [(ngModel)]=" Name" /> <br/><br/>
<p> {{Name}} </p>

Output:

Prepared By: Department of Computer Engineering Page 6

Subject Name: Modern Practical Tools Unit No: 01 Subject Code: 4340705

❖ Understanding Property Binding:

Property Binding is also a one-way data-binding technique. It, however, binds a property of a DOM
element to a field which is a defined property in the component TypeScript code. The string
interpolation is internally converted into property binding by Angular.

Example:
<img [src]=”imgUrl” />

Property binding has an advantage of shorter and cleaner code over string interpolation.
For simply displaying some dynamic data from a component on the view between headings like h1, h2,
p etc, String interpolation is preferred.
If the field value in the component of the String Interpolation and Property binding changes, Angular
will automatically update the DOM. But since both the String Interpolation and Property binding
represents one-way data binding, thus any changes in the DOM will not be reflected in the component.

Example:
• Add the below code in app.component.ts:

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = "Property Binding";
imgUrl="angularlogo.jpg";
}

• Add the below code in app.component.html:

<h2>{{ title }}</h2> <!-- String Interpolation -->

<img [src]="imgUrl" /> <!-- Property Binding -->
Prepared By: Department of Computer Engineering Page 7
Subject Name: Modern Practical Tools Unit No: 01 Subject Code: 4340705

Output:

❖ Understanding Event Binding:

To handle the events raised from the DOM like button click, mouse movement, etc event binding is used
in Angular 8. The specified method is called by event binding in the component when the DOM event
happens (eg. click, change, key up).

The myClick() method in this example is called from the component when the button is clicked.

Ex:
In app.component.html:

<button (click)=" myClick()">Click Me</button>

In app.component.ts:

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
myClick ($event){
console.log("My Button is clicked!", $event);
Prepared By: Department of Computer Engineering Page 8
Subject Name: Modern Practical Tools Unit No: 01 Subject Code: 4340705

}
}

❖ Using Models for Cleaner Code:

Clean up subscriptions
When subscribing to observables, always make sure unsubscribe from them appropriately by using
operators like take, takeUntil, etc.

Cache commands
clean
ng cache clean
To write clean code, there are some key points here:
Write readable code. Focus on writing code that is easy to understand.
Separation of concerns. Encapsulate and limit logic inside your components, services and directives.
Each file should only be responsible for a single functionality.
Utilize TypeScript. TypeScript provides advanced autocompletion, navigation and refactoring. Having
such a tool at your disposal shouldn’t be taken for granted.
Use TSLint. TSLint checks if TypeScript code complies with the coding rules in place. Combined with
Prettier and Husky makes for an excellent workflow.
RxJS in Angular. RxJS comes packaged with Angular, it’s to our great advantage to make the most of
it.
Clean up imports with path aliases. We can clean up our imports considerably by using path aliases to
reference our files.

Prepared By: Department of Computer Engineering Page 9