Scribd
Upload
33 views19 pages

2024 - INF 354 Angular 1

The document discusses Angular, including its features, architecture, data binding, pipes, and how to create a new Angular project. Angular is a frontend framework for developing web applications using TypeScript. It uses concepts like components, templates, directives, services and dependency injection. Data binding in Angular allows two-way communication between components and templates. Pipes format output values. Creating a new project requires Node.js, Angular CLI and installing additional packages.

Uploaded by

maahlewest
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
33 views19 pages

2024 - INF 354 Angular 1

The document discusses Angular, including its features, architecture, data binding, pipes, and how to create a new Angular project. Angular is a frontend framework for developing web applications using TypeScript. It uses concepts like components, templates, directives, services and dependency injection. Data binding in Angular allows two-way communication between components and templates. Pipes format output values. Creating a new project requires Node.js, Angular CLI and installing additional packages.

Uploaded by

maahlewest
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

INF 354:

Advanced
Programming
Angular 1
Learning Outcome:

❖ Understand, develop, and deploy web applications


using the Angular framework and TypeScript.

Learning Objectives:

❖ To understand the purpose of using


Angular
❖ To develop an Angular project
Outline

❖ Introduction
❖ Features of Angular
❖ Angular Architecture
❖ Data Binding
❖ Practical
ANGULAR 1

Introduction
Angular

• Angular is a framework for frontend web development


• With the aid of the Angular framework, you may develop sophisticated
HTML web apps.
• It can be used on other frameworks such as Ionic to make native mobile
application
• Responsive, user-friendly, scalable
• Developed by Google
• Angular CLI enables you to create things faster
Angular

• Angular enhances the UI experience for users


• Angular uses the concept of single page application (SPA)
• Angular code is written in TypeScript language
Features
• An XML or HTML page is treated by the document object model (DOM) as a tree structure, with
each node denoting a distinct section of the content.

• Typescript - JavaScript users can write more understandable


code by using typescript, which specifies a set of types. Any platform can
easily support the smooth operation of the TypeScript code thanks to
JavaScript compilation.
Features
• The Angular framework provides a robust set of tools and components that
allow developers to create scalable, maintainable, and efficient web
applications.
• It includes features like
• two-way data binding,
• templating,
• RESTful API handling,
• modularization,
• AJAX handling,
• dependency injection,
• the use of directives to create reusable components.
Architecture

The architecture diagram identifies the eight main building blocks of


an Angular application:

1. Module
2. Components
3. Templates
4. Metadata
5. Data binding
6. Directives
7. Services
8. Dependency injection
Architecture

1. Module - A root module called AppModule serves as the application's bootstrap


mechanism in an Angular application.
2. Components:
A view is a portion of the screen that is controlled by a component.
The application logic of a component—what it does to assist the view—is
specified in a class.
Using a set of attributes and methods on the API, the class communicates with
the view.
3. Templates: is a form of HTML that tells Angular how to render the component
The Angular template combines the Angular markup with
HTML to modify HTML elements before they are displayed
Architecture

4. Metadata: Metadata tells Angular how to process a class. It is used


to decorate the class to configure the expected behavior of a class.
In Typescript, you attach metadata by using a decorator
5. Data binding: supported by Angular is a method for coordinating
parts of a template with parts of a component. It plays an important
role in communication between a template and its component
6. Directives are easily distinguished since they begin with the prefix "-
ng." Consider their markers on the DOM element that tell Angular to
alter the element entirely or to attach a specific behavior to it.
Architecture

7. Services: Any value, feature, or function that your application


requires falls under the wide category of service. A service can be
almost anything. A service might be a function or value as well as a
TypeScript class having a specific, well-defined purpose.
8. Dependency injection: A method for providing a new instance of a
class with the dependencies it needs is called dependency injection.
Dependencies are typically services. Dependency injection is a
technique used by Angular to supply new components with the
services they require. By examining the kinds of a component's
constructor parameters, Angular may determine which services the
component requires.
Data Binding

• Interpolation Binding
• Interpolation is a procedure that allows the user to bind a value to
the user interface element. Interpolation binds the data one way,
which means that data moves in one direction from the components
to HTML elements. It uses the “{{ }}" syntax for data binding.
Data Binding

• Property Binding
• Property binding is a one-way data binding mechanism that allows
you to set the properties for HTML elements. It uses the "[ ]" syntax
for data binding.

• Event Binding
• Event binding type is when information flows from the view to the
component when an event is triggered. The event could be a mouse
click or keypress. It uses the “( )" syntax for data binding.
Data Binding

• Two-way Data Binding


• is a mechanism where data flows from the component to the view
and back. This binding ensures that the component and view are
always in sync. It uses the “[( )]" syntax for data binding.
Pipes
• Angular Pipes transform the output. You can think of them as makeup rooms
where they beautify the data into a more desirable format. They do not alter
the data but change how they appear to the user.

• Pipes are defined using the pipe “|” symbol.


• Some commonly used predefined Angular pipes are:
• DatePipe: Formats a date value.
• UpperCasePipe: Transforms text to uppercase.
• LowerCasePipe: Transforms text to lowercase.
• CurrencyPipe: Transforms a number to the currency string.
• PercentPipe: Transforms a number to the percentage string.
• DecimalPipe: Transforms a number into a decimal point string.
Practical

• Prerequisites:

• NodeJS

• npm install @angular/cli –g or npm install –g @angular/cli

• Visual Studio 2022


• Visual Studio Code

• SQL Server Management Studio (SSMS),

To confirm installation

• node –version

• ng version
Create New Project

For Bootstrap:
npm install jquery --save
npm install popper.js --save
npm install bootstrap --save
npm install font-awesome --save
The End

You might also like