Angular

Framework
Sayed Taha, PhD
Contents
• What is the Angular?
• Single-Page-Applications
• Angular Development Timeline
• IDE and tools.
• TypeScript-in-action
• Angular-in-action.
Angular-in-action.
 Angular
• Framework for building modern single page applications.
• Official documentation is @ www, angular.io
• Main features:-
• Provides clean separation of HTML (template) coding and business
logic
• Component-based framework
• Supports data-binding and inversion of control (IOC) of control /
dependency injection (DI)
• Supports responsive design via simple integration with modern
framework such as Bootstrap
 Architectural view of Angular
• Angular is a component based modularized framework
MODULES

Module 1 Module 2 Module n

View Templates Service

Components
(HTML) (Front-end Business Logic)

C1 C2 Cn
Directives
 Angular Key Players
• Component: is the main player in the framework and composed of
• View: represents the user interface.
• Class: contains the client-side business logic, and view events handlers.

• View Templates : is the user interface which contains static as well as

dynamic HTML elements
• Directives: allows custom behavior to the view such as conditions,
loops,…ect.
• Services: classes which handles the basic behavior such as validation,
and communication with backend for data get/post/delete.
• Module : set of related components which handles certain use cases.
Single-page Application Templating

• Most of applications are mainly composed of the

following components
• Header component.
• Footer component.
• Side-bar component.
• Main component
• Navigation component
Full-stack Application Architecture
• Angular project communicates via services (TypeScript classes)
to backend systems.
• Data exchange occurs over the network using Rest APIs.
• Backend (any) such as Spring boot is to perform CRUD
operation on the database.

Angular Backend
Services DB
(Components) (Spring Boot)
Angular Project Files view
• Any angular project is composed of the following set of files
categories
• HTML
• CSS
• Assests
• Images
• …

• TS
• Config
Angular CLI Commonly Used Commands
• Checking the installed Angular version
• ng version  current is 16.2.10 release on 18-OCT-23
Angular CLI Useful Commands
• Angular help
• ng help
Angular Project Creation
• Angular CLI helps to generate the project by executing the following command:

• ng new <project name>

• This command generates the needed files for project bootstrapping

SCSS: Syntactically CSS subset of CSS support

preprocessor scripting lang
SASS: Syntactically Awesom SS, most mature, stable
and powerful grade of CSS
Angular Project Running
• Angular CLI helps to run the project by executing the following command:
• ng serve [- -port n] [- - open]

• This command do the following:

• Traspile (build) the project
• Start the embedded application server
• Watches the source file
• Perform hot reloading : rebuild the project upon source updates.

• The port option specifying the port on which the project will run
• Default port is 4200
• Default project path on the server is http://localhost:4200
• Using the open option will open the browser for you.
Angular Project Running
Angular Project Files details
• One you issued ng new command you
should get the following project view in the
VS Code explorer.
 Angular Project Files details
Environments
Angular app configuration
: profiles for different
& list of env.;
execution
dev, test,
targets
prod

Index.html : End
maintobootstrap
End testing
/ launch page

Polyfill.ts: enables
Local support
repository for for
nodedifferent
modulesbrowsers

Project meta-data
Test.ts:/ set
nodeof dependencies
unit test cases(maven like)

Tsconfig.ts: contains compiler

Main source configurations
folder

App components, templates,…

Web assets such as images

Inside Angular Loader
• What happens behind the scenes when we run the application?
• How it is loaded into the browser?
Inside Angular Loader
• When the applications starts the bootstrap html file is being
loaded
Inside Angular Loader
• The <app-root> is a custom tag defined by Angular
• The selector app-root is replaced by the main app component
Inside Angular Loader
• The component is defined in TS file contains:
• Definition with decorator @Component similar to annotations in Java
• @Component decorator is imported from @angular/core module
• TS class defines whatever attributes and methods related to
component business
• Class attributes and methods may be used in the HTML template
Inside Angular Loader
• The component definition contains 3 main attributes
• Selector: Tag name in the HTML
• HTML template URL
• CSS URL
Inside Angular Loader
• Component HTML template URL:
• Static HTML with will refer to component class attributes using
interpolation {{--}}
• Interpolation allows reading the attributes of the related component
Inside Angular Loader
• In the runtime, component template output in injected into the index.html
 Inside Angular Loader: Application Module
• Defines the collection of components
of our application
• declarations:[]

• Needed imports for the application

from the node modules.
• imports:[]

• Boorstrp/entry-point component
• providers:[]
• Services for provided in DI
Angular First Project
• Lets create a students grade table such as the
one shown.
• We have to follow the following steps:
1. Create new project
2. Edit the main template page
3. Generate new Component
4. Add the new component selector to the app template
5. Create students class
6. In the new component, create test array of students
7. In the new component HTML template loop over the
students list to build the shown table.
Step 1: create the project
• ng new students-project
Step 2: update the main template page
• Remove all the generated place holders and
add your own HTML
Step 3: create new component
• Using the CLI command
• ng generate component students-list
• ng g c students-list

• This will generate component files and updates

app.module.ts
• Files generated are discussed before excepts
• .spec.ts: the unit test specifications
Step 4: add the component selector to app
template page
Step 5: Generate a student class
• Using the CLI command
• ng generate class students-list/Student

• An empty class will be generated

Step 5: Generate a student class
• Define the attributes name, marks using public parameter
properties.
• Unlike Java, Angular developers commonly defines the attributes
with public modifiers
Step 6: Add sample data to StudentsListComponent class
• Define member/attribute Student array with set of static data
Step 7: Build the student table in student-list component
First App Results View
*ngFor Directive
• Special Angular directive which allows looping inside the HTML code
End of text