Data Structures

ANGULAR JS
Unit-1
Why AngularJS?
HTML is great for declaring static documents, but it falters when we try to use it for declaring
dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your
application. The resulting environment is extraordinarily expressive, readable, and quick to
develop.
Alternatives: Other frameworks deal with HTML’s shortcomings by either abstracting away
HTML, CSS, and/or JavaScript or by providing an imperative way for manipulating the DOM.
Neither of these address the root problem that HTML was not designed for dynamic views.
Extensibility
AngularJS is a toolset for building the framework most suited to your application development.
It is fully extensible and works well with other libraries. Every feature can be modified or
replaced to suit your unique development workflow and feature needs. Read on to find out how.
Node.js: Node.js is a popular choice for building web applications for a number of reasons:
1. JavaScript Everywhere: It allows developers to use JavaScript on both the frontend and
backend, streamlining development and reducing the need to switch between languages.
2. Fast and Efficient: Powered by the V8 engine, Node.js executes JavaScript code at high speed,
making it ideal for applications requiring real-time interactions and high performance. Its non-
blocking, event-driven architecture handles concurrent requests efficiently, enabling scalability
and responsiveness.
3. Scalability: Node.js is designed to handle a large number of concurrent connections, making
it well-suited for building scalable applications that can handle growing user bases.
4. Large Ecosytem: Node.js boasts a vast package manager (npm) with a wide array of libraries
and modules, allowing developers to easily add functionalities and accelerate development.
5. Cost-Effective: Using JavaScript on both the frontend and backend can reduce the need for
specialized teams, leading to cost savings in development and maintenance.
6. Great for Real-Time Applications: Node.js is a natural fit for real-time applications like chat
applications, collaborative tools, and live dashboards due to its event-driven nature and
efficient handling of concurrent connections.
7. Easy to Learn: If you already know JavaScript, learning Node.js is relatively straightforward,
making it an accessible choice for developers.
When talking about Angular versions, it's important to distinguish between AngularJS (the
original framework) and Angular (the newer, completely rewritten framework).
AngularJS Versions:
1.8: The latest and final version of AngularJS, released in June 2020. This version is under Long
Term Support (LTS) until July 18, 2024.

R S Ravindra Babu, Asst. Prof., Dept. of CSE, LIET. Page|1

 Data Structures

Angular Versions:
19: The latest version of Angular, released in November 2024.
18: Released in May 2024, this version is under LTS.
17: Released in November 2023, this version is also under LTS.
 AngularJS and Angular are different frameworks. Angular is a complete rewrite of
AngularJS, and they are not directly compatible.
 AngularJS is in maintenance mode. While it is still supported, no new features are being
added.
 Angular uses a different versioning scheme. Angular dropped the "JS" and started with
version 2.
Required Tools / Softwares to be installed
Why Node JS - Angular application written in Typescript cannot be opened in browsers.
Browsers only can understand javascript. By installing node js environment, Angular
application written in typescript can be converted to javascript. so that you can open in
browser.
Why Angular CLI
Angular command line interface. If you want to create angular application manually it takes
long time. CLI creates the project structure and arranges so that we can make
modifications/changes easily.
Why VS Code
Best editor for angular
Angular is popular front end frame work. It is popular Single Page Application (SPA's). i.e. once
page is loaded, it doesn't need to reload for every tab. It rather show all the tabs in the same
page.
Front End Frame Works
-React (Meta)
-Angular (Google)
-Vue (Evan You is creator)
Angular Features - A list of most important features and benefits of Angular:
 Angular supports multiple platforms
 Angular is a cross platform language. It supports multiple platforms. You can build
different types of apps by using Angular.
 Desktop applications: Angular facilitates you to create desktop installed apps on
different types of operating systems i.e. Windows, Mac or Linux by using the same
Angular methods which we use for creating web and native apps.
 Native applications: You can built native apps by using Angular with strategies from
Cordova, Ionic, or NativeScript.
 Progressive web applications: Progressive web applications are the most common apps
which are built with Angular. Angular provides modern web platform capabilities to
deliver high performance, offline, and zero-step installation apps.

R S Ravindra Babu, Asst. Prof., Dept. of CSE, LIET. Page|2

 Data Structures

 High Speed, Ultimate Performance: Angular is amazingly fast and provides a great
performance due to the following reasons:
 Universal support: Angular can be used as a front-end web development tool for the
programming languages like Node.js, .Net, PHP, Java Struts and Spring and other servers
for near-instant rendering in just HTML and CSS. It also optimizes the website for better
SEO.
 Code splitting: Angular apps are fast and loads quickly with the new Component Router,
which delivers automatic code-splitting so users only load code required to render the
view they request.
 Code generation: Angular makes your templates in highly optimized code for today?s
JavaScript virtual machines which gives the benefits of hand-written code.
 Productivity: Angular provides a better productivity due to its simple and powerful
template syntax, command line tools and popular editors and IDEs.
 Powerful templates: Angular provides simple and powerful template syntax to create UI
view quickly.
 IDEs: Angular provides intelligent code completion, instant errors, and other feedback
in popular editors and IDEs.
 Angular CLI: Angular CLI provides command line tools start building fast, add
components and tests, and then instantly deploy.
 Full Stack Development: Angular is a complete framework of JavaScript. It provides
Testing, animation and Accessibility. It provides full stack development along with
Node.js, Express.js, and MongoDB.
 Testing: Angular provides Karma and Jasmine for unit testing. B y using it, you can check
your broken things every time you save. Karma is a JavaScript test runner tool created
by Angular team. Jasmine is the testing framework form unit testing in Angular apps,
and Karma provides helpful tools that make it easier to us to call our Jasmine tests whilst
we are writing code.
 Animation Support: Angular facilitates you to create high-performance, complex
choreographies and animation timelines with very little code through Angular's
intuitive API.
 Accessibility: In Angular, you can create accessible applications with ARIA-enabled
components, developer guides, and built-in a11y test infrastructure.
With just Node.js installed, you can work on a variety of JavaScript-based projects including:
simple web servers, command-line applications, basic web scraping tools, real-time
applications like chatbots, small APIs, data processing scripts, and prototypes for more complex
web applications by utilizing the extensive ecosystem of packages available through npm (Node
Package Manager) which comes bundled with Node.js; essentially, you can build the backend
logic for web applications without needing a separate server-side language.
Key points about working with only Node.js:
JavaScript is the primary language: You write code entirely in JavaScript, taking advantage of
its features for both front-end and back-end development.

R S Ravindra Babu, Asst. Prof., Dept. of CSE, LIET. Page|3

 Data Structures

npm packages: Access a vast library of packages through npm to add functionalities like
database interactions, file system manipulation, routing, and more to your projects.
Basic web server capabilities: Node.js includes built-in HTTP modules to create simple web
servers to serve static content or handle API requests.
Real-time applications: Node's event-driven architecture is well-suited for building
applications that require real-time updates, like chat systems or live dashboards.

Why Angular instead of Angular JS?

o AngularJS was no longer meeting the needs of modern web development. It was released
in 2010, when web technologies were very different from what they are today.
o Due to the component-based architecture and more effective data binding, Angular apps
can be five times faster than AngularJS.
o Mobile-First Approach: AngularJS was not designed with mobile in mind. Angular, on the
other hand, has mobile development at its core, offering features for better performance
and responsiveness on mobile devices.
o Component-Based Architecture: Angular embraces a component-based architecture,
making code more modular, reusable, and easier to maintain. This approach aligns better
with modern web development practices.
o TypeScript: Angular uses TypeScript, a superset of JavaScript, providing static typing,
better tooling, and improved code quality.
o Simpler Syntax: Angular's template syntax is more intuitive and easier to learn than
AngularJS's.
o Future-Proofing: Angular has a more robust and well-defined roadmap for future
development, ensuring its continued support and evolution.
o Community and Ecosystem: Angular has a larger and more active community, leading to
better support, resources, and libraries.
What is CLI in Angular?
The Angular CLI is a command-line interface tool which allows you to scaffold, develop, test,
deploy, and maintain Angular applications directly from a command shell. Angular CLI is
published on npm as the @angular/cli package and includes a binary named ng . Commands
invoking ng are using the Angular CLI.
Examples of projects you can build with just Node.js:
 A simple API endpoint: Create a basic REST API to serve data from a JSON file.
 A command-line tool: Develop a utility script to automate tasks like file manipulation or
data processing.
 A static website server: Set up a basic web server to host HTML, CSS, and JavaScript files.
 A basic chat application: Implement a simple real-time chat feature using web sockets.
 Data scraping script: Fetch data from websites using Node.js's HTTP module and built-in
parsing tools.
First, we have to understand Angular application structure i.e. Angular Project Structure Src
and related files. We popular see the 'ng' word in angular which is from Angular.
The import building blocks of Angular are
 Components - Each page is a component in Webpage
 Data Binding / Templates - linking data to webpage from javascript file to html.
R S Ravindra Babu, Asst. Prof., Dept. of CSE, LIET. Page|4
 Data Structures

 Component Communication - Passing data from one component to another component

in the webpage.
 Directives- ngClass, ngStyle, ngModel are some directives. By using directive concept we
can write, for loops, switch case, if conditions can be used in html document.
 Routing - Navigation goes from one component to another component not from one web
page to another webpage. This can be implemented by routing.
 Forms - In angular, we can handle forms in better way when compared to html forms
 Pipes - pipes or filters. Converts data from one format to another format. we can create
own pipes.
 Services - In Angular applications from database we bring by using services
 HTTP Clients - sends request to database.
 Observables
 Testing

To start with
First install Node js
Second install Angular CLI - at command prompt type : npm install -g @angular/cli
npm - node package manager (All Node js libraries are present in npm)
To check whether Angular CLI is installed or not
@cmd - type
ng --version
Now create new Project Application
go to project folder and the give the below command to create Angular Project Application
@cmd –type - ng new DemoApp or SampleApp
Now go to vscode editor
you can also do above command @ terminal in vscode
now check angularclasses for all the installed folders and filnpm install -g @angular/clies of the
project.
go to terminal and run the default project
go to the folder and type
ng serve
now it will compile and run in the server
copy the http://localhost:4200/ in browser and see the result
the code is present in app.component.html
to run in different port you have to type - ng serve -p <portno>

R S Ravindra Babu, Asst. Prof., Dept. of CSE, LIET. Page|5

 Data Structures

npm -version
node
>console.log("Hello");

Important files
 index.html - complete project html file
 main.ts - complete project type script file
 styles.css - complete project css file
The above three files are global files.
app -
 app.component.html
 app.component.css
 app.component.ts
 app.module.ts

To Run the Project:

Goto Terminal in the vscode project press ...
in taskmanger folder> ng serve (enter) ( It will build entire project and run)
we consider components as Angular is created with components
app root conponent is created first

Key points about working with only Node.js:

JavaScript is the primary language:
You write code entirely in JavaScript, taking advantage of its features for both front-end and
back-end development.
npm packages: Access a vast library of packages through npm to add functionalities like
database interactions, file system manipulation, routing, and more to your projects.
Basic web server capabilities: Node.js includes built-in HTTP modules to create simple web
servers to serve static content or handle API requests.
Real-time applications: Node's event-driven architecture is well-suited for building
applications that require real-time updates, like chat systems or live dashboards.
Examples of projects you can build with just Node.js:
 A simple API endpoint: Create a basic REST API to serve data from a JSON file.
 A command-line tool: Develop a utility script to automate tasks like file manipulation or
data processing.
 A static website server: Set up a basic web server to host HTML, CSS, and JavaScript files.
 A basic chat application: Implement a simple real-time chat feature using web sockets.
 Data scraping script: Fetch data from websites using Node.js's HTTP module and built-
in parsing tools.

R S Ravindra Babu, Asst. Prof., Dept. of CSE, LIET. Page|6

 Data Structures

Important considerations:
 Front-end development limitations:
While you can use Node.js for basic front-end tasks, for complex web interfaces, you'll
usually need to integrate a front-end framework like React, Angular, or Vue.js.
 Database integration:
To work with databases, you'll need to install additional packages like Mongoose or
Sequelize depending on the database technology you choose.
 Deployment considerations:
Deploying a Node.js application might require setting up a server environment
depending on the complexity of your project.

Describe the process of installation of node NPM.

The name npm (Node Package Manager) stems from when npm first was created as a
package manager for Node. js. All npm packages are defined in files called package. json.
NPM is basically a package manager which acts as a dependency provider. If there are
many small packages, required to build a large one, NPM is the one hotspot which will
provide us with the packages. Angular-CLI is one of those packages. As far as NG is
concerned, it is the core module of Angular.

The Angular Framework, Angular CLI, and components used by Angular applications are
packaged as npm packages and distributed using the npm registry.
You can download and install these npm packages by using the npm CLI client, which is
installed with and runs as a Node.js® application. By default, the Angular CLI uses the
npm
client.
Download https://nodejs.org/en/
Then install and enter the following commands
D:\ajs\nodejs>cd..
D:\ajs>node -v
v16.17.0
D:\ajs>npm -v
8.15.0
Download Angular CLI:
https://angular.io/cli Here you can find below command
D:\ajs>npm install -g @angular/cli
Alternatively, you can use the yarn client for downloading and installing npm packages.
Both npm and yarn install the packages that are identified in a package.json file.

R S Ravindra Babu, Asst. Prof., Dept. of CSE, LIET. Page|7

 Data Structures

Data types in Typescript

In Typescript, a data type defines the kind of values a variable can hold, ensuring type safety
and enhancing code clarity.
 Primitive Types: Basic types like number, string, boolean, null, undefined, and symbol.
 Object Types: Complex structures including arrays, classes, interfaces, and functions.
Primitive Types
Primitive types are the most basic data types in TypeScript. They represent simple, immutable
values and are directly assigned.
Type Keyword Description
Number number Represents both integer and floating-point numbers.
String string Represents textual data.
Boolean boolean Represents logical values: true or false.
Null null Represents the intentional absence of any object value.
Undefined undefined Represents an uninitialized variable.
Symbol symbol Represents a unique, immutable value, often used as object keys.
BigInt bigint Represents integers with arbitrary precision.
Object Types
Object types are more complex structures that can contain multiple values and functions.
They are mutable and can be manipulated after creation.
Type Description
Represents any non-primitive type; however, its use is discouraged in favor of
Object
more specific types.
Array Represents a collection of elements of a specific type.
Tuple Represents an array with a fixed number of elements of specific types.
Enum Represents a set of named constants, allowing for a collection of related values.
Function Represents a callable entity; can define parameter and return types.
Class Defines a blueprint for creating objects with specific properties and methods.
Interface Describes the shape of an object, specifying property names and types.

Write a program to print all angular datatypes

let b: number = 123;
let c: number = 123.456;
let d: string = 'Peter';
let e: undefined = undefined;
let f: boolean = true;
let g: number = 0b111001; // Binary
let h: number = 0o436; // Octal
let i: number = 0xadf0d; // Hexa-Decimal
console.log(b);
console.log(c);
console.log(d);
console.log(e);
console.log(f);
console.log(g);
console.log(h);
console.log(i)

R S Ravindra Babu, Asst. Prof., Dept. of CSE, LIET. Page|8

 Data Structures

AngularJS MVC Architecture

MVC stands for Model View Controller. It is a software design pattern for developing web
applications. It is very popular because it isolates the application logic from the user interface
layer and supports separation of concerns.
The MVC pattern is made up of the following three parts:
o Model: It is responsible for managing application data. It responds to the requests from
view and to the instructions from controller to update itself.
o View: It is responsible for displaying all data or only a portion of data to the users. It also
specifies the data in a particular format triggered by the controller's decision to present
the data. They are script-based template systems such as JSP, ASP, PHP and very easy to
integrate with AJAX technology.
o Controller: It is responsible to control the relation between models and views. It
responds to user input and performs interactions on the data model objects. The
controller receives input, validates it, and then performs business operations that
modify the state of the data model.

Representation of Components and Modules: Angular project structure would appear in

the Visual Studio Code sidebar (explorer view), here is a text representation.
src/
|-- app/
| |-- app.module.ts # Root module
| |-- app.component.ts # Root component
| |-- app.component.html # Template for root component
| |-- app.component.css # Styles for root component
| |
| |-- header/
| | |-- header.component.ts # Header component
| | |-- header.component.html # Template for header component
| | |-- header.component.css # Styles for header component
| |
| |-- footer/
| | |-- footer.component.ts # Footer component
| | |-- footer.component.html # Template for footer component
| | |-- footer.component.css # Styles for footer component
| |
| |-- main/
| |-- main.component.ts # Main component
| |-- main.component.html # Template for main component
| |-- main.component.css # Styles for main component
|
|-- assets/
| |-- images/ # Folder for images
| |-- fonts/ # Folder for fonts
|
|-- environments/
|-- environment.ts # Development environment settings
|-- environment.prod.ts # Production environment settings

R S Ravindra Babu, Asst. Prof., Dept. of CSE, LIET. Page|9

 Data Structures

What are Modules in Angular?

o In Angular, a module is like a container that bundles together parts of an app such as
components, services, and directives. It helps organize the application into blocks of
functionality.
o Each Angular application starts with at least one module, known as the root module.
This is typically called AppModule and it’s where the application begins.
o Modules can also use functionalities from other modules by importing them. This way,
Angular apps can be modular and scalable, breaking down features into manageable
pieces.
Key Aspects of Modules
o Declarations: This section declares which components, directives, and pipes belong to
the module.
o Imports: Here, you can import functionality from other modules. For instance, if you
need Angular’s forms features, you import FormsModule .
o Providers: Services that are to be used within the module are listed here.
o Bootstrap: The root module uses this to define the root component that Angular should
load first.

Why Modules are Important

Modules provide context for your components. They help organize your application into
cohesive blocks of functionality. They also play a critical role in lazy loading, which means
loading parts of the application on demand.

Building an Angular Module

Building a module is also a task easily accomplished with Angular CLI. A command like
cmd  ng generate module my-module
Creates a new module. You can then add components to this module and specify how they
interact.

Components in a module of an angular project

Components are typically included in an Angular module using a basic example with sample
component names.

Here’s a demonstration using TypeScript:

// Import NgModule to define a module

import { NgModule } from '@angular/core';
// Import BrowserModule for browser-specific features
import { BrowserModule } from '@angular/platform-browser';

// Import the components used in this module

import { AppComponent } from './app.component';
import { HeaderComponent } from './header.component';

R S Ravindra Babu, Asst. Prof., Dept. of CSE, LIET. Page|10

 Data Structures

import { FooterComponent } from './footer.component';

import { MainComponent } from './main.component';

// Define the module using the NgModule decorator

@NgModule({
declarations: [
AppComponent, // Declare AppComponent
HeaderComponent, // Declare HeaderComponent
FooterComponent, // Declare FooterComponent
MainComponent // Declare MainComponent
],
imports: [
BrowserModule // Import BrowserModule
],
providers: [], // Services that this module contributes to the global
collection of services
bootstrap: [AppComponent] // Bootstrap AppComponent as the root component
})
export class AppModule { }

Difference between JavaScript and AngularJS:

JavaScript AngularJS
Google developed it.
Netscape developed it.
It is a lightweight and object-oriented It is an open-source framework.
scripting language
It works on the model view controller (MVC)
It works on the concept of dynamic typing. concept for building apps.

JavaScript is fast in comparison to AngularJS. It is slow in comparison to JavaScript.

While it supports both dependency injection
It does not support dependency injection. and data binding.
It is easy to learn AngularJS for beginners
It is complicated for beginners to learn
who know JavaScript.
JavaScript.
It provides support for filters.
It does not provide support for filters.
It is generally suited for building large
It is used for dynamic web applications. single-page applications

Module vs Component in Angular

In Angular, both modules and components are essential building blocks, but they serve different
purposes and operate at different levels of the application architecture.

A module in Angular acts as a container for a group of related features. It organizes code into
cohesive blocks, making the application easier to manage and scale. Modules encapsulate
components, services, directives, and pipes, and they define dependencies that other modules

R S Ravindra Babu, Asst. Prof., Dept. of CSE, LIET. Page|11

 Data Structures

need to operate. This organizational scheme allows for lazy loading—loading code only when
needed—which can greatly improve the performance of an application.

A component, on the other hand, is focused on the user interface. Each component controls a
part of the screen—a view—where Angular can render data and respond to user interactions.
A component consists of a template for the HTML, a class to handle data and logic, and metadata
that defines how the component fits into the view structure, such as its selector and the
template URLs.

Understanding the distinction and interplay between modules and components is crucial for
developing efficient Angular applications. Modules provide the framework that supports the
modular and scalable structure of an application, while components handle the details of
interacting with the user. Together, they create a powerful architecture that supports complex
and efficient web applications.

Angular components

Angular apps are built around components, which are Angular's building blocks. Components
contain the code, HTML layout, and CSS style information that provide the function and
appearance of an element in the app. In Angular, components can contain other components.
An app's functions and appearance can be divided and partitioned into components.

In Angular, components have metadata that define its properties. When you create your Own
Component, you use these properties:

 Selector: to describe how Angular refers to the component in templates.

 Standalone: to describe whether the component requires a NgModule.
 Imports: to describe the component's dependencies.
 Template: to describe the component's HTML markup and layout.
 StyleUrls: to list the URLs of the CSS files that the component uses in an array.

A Sample Program
-------------------------
sample.html
-------------------------
<html>
<head> <title> LEIT PAGE</title> </head>
<body style="background-color: rgb(206, 239, 166);">
<h1>Lendi Institute of Engineering and Technology</h1>
<h2 class = solid>Care Character Career (CCC)</h2>
</body>
<hr style = "height:4px;background-color: red;">
<body style="background-color: antiquewhite;">
<p class = dotted >Addition of two no's: {{ 5 + 5 }}</p>
<p class = sample >Date:</p>
<div style = "height:10px"></div>
<form>

R S Ravindra Babu, Asst. Prof., Dept. of CSE, LIET. Page|12

 Data Structures

<label for="name">NAME: </label>

<input type ="text" id="name" name="name">&ensp;&ensp;
<label for="gender">Gender: </label>
<label for="male">Male </label>
<input type ="radio" id="mgender" name="Gender">&ensp;
<label for="female">Female </label>
<input type ="radio" id="fgender" name="Gender">&ensp;<br> <br>

<label for="clang">Select Courses: </label>

<input type ="checkbox" id="chk1" name="chk1">&ensp;
<label for="clang">C lang </label>

<input type ="checkbox" id="chk2" name="chk2">&ensp;

<label for="java">Java </label>

<input type ="checkbox" id="chk3" name="chk3">&ensp;

<label for="python">Python </label>&ensp;<br> <br>

<label for="name">E-Mail: </label>

<input type ="email" id="" name="email"><br><br>
<label for="name">Message: </label>
<input type ="textarea" id="" name="textarea"> <br><br>
<input type ="submit" id="" name="submit"><br><br>
</form>
</body>
</html>
-------------------------
sample.css
-------------------------
h1 {
background-color: antiquewhite; text-align: center;color: rgb(158, 5, 152);
}

p.dotted {border-style: solid; text-align: right;}

p.samp {text-align: right;}

h2 { text-align: center; }

R S Ravindra Babu, Asst. Prof., Dept. of CSE, LIET. Page|13

 Data Structures

Output:
--------------------------

A shortcoming of MVC is that if we make any change in the view it doesn’t get updated
in the model. This problem was addressed in Angular2 by shifting to the MVVM architecture.
MVVM Architecture : it includes 3 things:
 Model
 View
 View Model
The controller is actually replaced by View Model in MMVM design pattern. View Model is
nothing but a JavaScript function which is again like a controller and is responsible for
maintaining relationship between view and model, but the difference here is, if we updatem
anything in view, it gets updated in model, change anything in model, it shows up in view, which
is what we call 2-way binding.

R S Ravindra Babu, Asst. Prof., Dept. of CSE, LIET. Page|14