Advanced Application

Development
(CSE-214)
week-3 : Angular Application
Architecture, MVC, CLI

Dr. Alper ÖZCAN

Akdeniz University
alper.ozcan@gmail.com

1
Angular Features

2
Angular Architecture

3
 1. View Templates (User Interface for
Components)

view template is the HTML structure of an Angular component. It defines

how the UI looks.

{{ message }} → Displays a dynamic message.

(click)="sayHello()" → Calls the sayHello() function when the

button is clicked.

4
 2. Components (The Main Player in
Angular)
component consists of:
view (HTML template) – what the user sees,
class (TypeScript) – contains logic and event handling,
stylesheet (CSS) – styles the component.

@Component → Declares an Angular

component.

template → Defines the HTML view.

styles → Adds CSS to the component.

sayHello() → Updates the message

when the button is clicked.

5
 3. Services (Helper Classes for Business
Logic)
Services fetch data, perform calculations, and handle business logic.

Services are independent of components and can be reused in multiple

parts of the application.

@Injectable({ providedIn: 'root' }) →

Makes this service available everywhere.

getData() → Returns an array of

technologies.

6
 3. Services (Helper Classes for Business
Logic)
DataService is injected into the component.

*ngFor loops through the frameworks list and displays the items.

7
 4. Directives (Adding Custom Behavior to
HTML)
directive modifies the behavior of an HTML element.

Angular has built-in directives like *ngIf and *ngFor.

*ngIf for Conditional Display

*ngFor for Looping Through Data and displays each item as a list element

8
 5. Modules (Organizing Angular Apps)
A module is a collection of related components, directives, and services.

Every Angular application has at least one module: AppModule

declarations → Lists
components (AppComponent,
HelloComponent).

imports → Includes necessary

modules (BrowserModule).

providers → Lists services (if

any).

bootstrap → The starting

component (AppComponent).

9
Key Terms

10
Application UI Composition

11
Application Interaction

12
Angular Project

13
Creating an Angular Project

14
Angular CLI

15
Creating New Project with Angular CLI

16
Running the Angular App

17
Changing the Server Port

18
 Model-View-Controller (MVC) Design Pattern

Model: Manages the data, logic, and rules of the application.

View: Represents the user interface (UI) and displays data from the model.
Controller: Acts as a mediator between the Model and View, Handles user
interactions and updates the model or view

19
 Model-View-Controller (MVC) Design
Pattern

The Model demonstrates the data and business logic of an application. It

is responsible for managing the application’s data, processing business
rules, and responding to requests for information from other
components, such as the View and the Controller.

20
 Model-View-Controller (MVC) Design
Pattern

The View displays the data from the Model to the user and sends user
inputs to the Controller. It is passive and does not directly interact with
the Model. Instead, it receives data from the Model and sends user
inputs to the Controller for processing.

21
 Model-View-Controller (MVC) Design
Pattern

Controller acts as an intermediary between the Model and the View. It

handles user input and updates the Model accordingly and updates the
View to reflect changes in the Model. It contains application logic, such
as input validation and data transformation.

22
Angular application architecture (1)

23
Angular application architecture (2)
•Angular.json file will contain all the configurations of the
app.

24
 package.json file

The package.json file is the heart of an Angular project.

It contains:

•Scripts → Commands to run and build the Angular app.

•Dependencies → Libraries required to run the app.

•DevDependencies → Tools required only during

development

25
 package.json file - Scripts Section

This section defines commands that you can run using

npm run <script_name>

26
 package.json file - Dependencies Section

This section lists the core Angular libraries required to run the
application.

27
 package.json file - DevDependencies
Section
These packages are only needed during development (not in
production).

28
 package.json file - How to Use These
Scripts?
Run the app locally

• Runs ng serve → Opens the app in a browser at http://localhost:4200/

Build the app for production

• Generates the compiled files inside the dist/ folder.

Serve the built app

• Runs the production build using node dist

29
 dist/ Folder in Angular
It contains the compiled and optimized version of your Angular application,
ready for deployment.

Inside dist/ Folder

• Minified HTML, CSS, and JavaScript files.

• Pre-compiled Angular components and modules.

• Assets like images and fonts.

• index.html file (the main entry point for your app).

After running ng build, the dist/ folder contains everything needed to run the
app.

You can deploy this folder (the contents of dist/) to a web server like Apache, Nginx

30
 AOT (Ahead-of-Time) vs. JIT (Just-in-
Time) Compilation in Angular
Angular provides two types of compilation:

AOT (Ahead-of-Time) Compilation

• Faster page load time (precompiled

templates).
This command builds an optimized
•
production version using AOT
Detects errors during build time (safer).
•
Smaller JavaScript bundles.
31
Angular application architecture (3)
•The builder looks at this file to find the entry point
(main.ts) of the application
•The main.ts file creates a browser environment for the
application to run
•Calls a function called bootstrapModule, which bootstraps
the application via AppModule (declared in the
app.module.ts file. )

32
main.ts file

33
Angular application architecture (4)
•AppModule contains declarations of all the components,
this will bootstrap AppComponent (defined in
app.component.ts file)

•AppComponent interacts with the webpage and serves

data to it.

34
 app.module.ts file
app.module.ts is the root module file in an Angular application. It is responsible for:

1.Declaring components that belong to the module.

2.Importing other modules (e.g., FormsModule, HttpClientModule).
3.Bootstrapping the main component (AppComponent).

35
 app.component.ts file
app.component.ts is the main component file in an Angular application. It defines:

1.The HTML template (app.component.html).

2.The CSS styles (app.component.css).
3.The TypeScript logic (class properties, methods, event handling).

36
 app.component.ts file

1. main.ts loads app.module.ts.

2. app.module.ts loads AppComponent

(app.component.ts).

3. The HTML <app-root></app-root> is replaced with

the UI from app.component.html

37
Angular application architecture (5)
•Each component is declared with three properties:
•Selector - used for accessing the component
•Template/TemplateURL - contains HTML of the
component
•StylesURL - contains component-specific stylesheets

38
Angular application architecture (6)

•After this, Angular calls the index.html file. This file consequently
calls the root component that is app-root. The root component is
defined in app.component.ts

39
 index.html file
index.html is the main HTML file where the Angular app runs.

It contains the root element <app-root> where Angular injects the

AppComponent.

It loads all JavaScript and CSS files needed for the app

40
 Angular CLI

Angular CLI stands for Angular Command Line Interface, and it helps developers
to create projects easily and quickly and automate the development workflow.
41
 Angular CLI

Angular comes with a powerful command-line tool known as

Angular CLI (Command Line Interface)
Prerequisites
1. Ensure you have Node.js and npm (Node Package Manager)
installed on your machine.
2. Install Angular CLI globally by running the following command
in your terminal or command prompt:

npm install -g @angular/cli

42
 Angular CLI
1. npm : This is the Node Package Manager, which is used to
install and manage packages for Node.js applications.

1. -g (or --global) : This flag tells npm to install the package

globally, making it available across your system. Global
packages are typically used for command-line tools.

1. @angular/cli: This is the package you are installing. It is the

Angular Command Line Interface (CLI), which provides various
commands for creating, building, and managing Angular
applications.

43
 Creating a New Angular Project

1.Open your terminal or command prompt.

2.Run the following command to generate a new Angular project:

ng new your-project-name --no-standalone

3. Once the project setup is complete, navigate into the newly

created project directory:

cd your-project-name

44
Angular-Files and Folder Structure

45
 Angular-Files and Folder Structure
1. /node_modules/ : All 3rd party libraries are installed to this folder using npm
install
2. /src/ : contains the source code of the application. Most work will be done
here
3. /src/app/: This is where your application’s components, services, modules,
and other related files are stored. It’s the heart of your application.
4. index.html : The main HTML file that serves as the entry point for your
application.
5. main.ts : the main starting file from where the AppModule is bootstrapped
6. styles.css : the global stylesheet file for the project
7. tsconfig.*.json : the configuration files for TypeScript
8. angular.json : contains the configurations for CLI. This configuration file
defines various settings for your Angular project, including build options, asset
paths, and other project-specific configurations.
9. package.json : contains the basic information of the project (name,
description and dependencies)
46
Angular-Files and Folder Structure

47
 angular.json File Structure

1. Projects : This section contains configurations for one or more projects within your
Angular workspace. Each project represents an application, library, or other
related code within your workspace.
2. architect: This subsection defines the various build, test, and serve tasks you can
run on your project.
3. build: Configures options for building your project for production or development.
You can specify the output paths, assets, styles, scripts, and more.
4. test: Configures testing settings using testing frameworks
5. serve: Configures the development server settings for serving your application
locally during development.
6. sourceRoot: Specifies the root directory where your application’s source code
resides.

48
 Bootstrapping the AppModule (main.ts)

• Acts as the starting point (entry point) for the application lifecycle.

• This file is the bootstrap file of the Angular application. Angular uses main.ts to
load the Angular module and start the app.

• platformBrowserDynamic: Angular's function for bootstrapping applications in

the browser.

• AppModule: The root module of the application.

49
 index.html

• This is the entry point for the application.

• When the app starts, the browser loads index.html. It contains the root
<app-root></app-root> element, AppComponent is rendered in the index.html file's
<app-root></app-root> element

• it includes references to the stylesheets and JavaScript files, including the

bundled Angular code. 50
 Main Module (AppModule), app.module.ts

This file defines the root NgModule (Angular Module) of the application. It
tells Angular which components, directives, and services are part of the
app.
51
 AppComponent (app.component.ts)

• This is the root component that is rendered inside <app-root></app-

root> in index.html.

• It is defined in app.component.ts, where the logic for the root

component is implemented.

• The AppComponent acts as the main component that interacts with

other components, binds data, and defines the application's structure.

• It is typically bootstrapped in app.module.ts under the bootstrap array.

52
Angular Files Execution Flow

53
Execution Flow
index.html is loaded first when the browser requests the
app. It includes a reference to the Angular application and
the root component (<app-root></app-root>).

main.ts is executed next. It bootstraps the Angular

application by calling
platformBrowserDynamic().bootstrapModule(AppModule) to
initialize the Angular module (AppModule).

app.module.ts is processed, and Angular sets up the

application module, registers components, imports other
necessary modules, and prepares the app for rendering.

AppComponent is the root component declared in

app.module.ts, and Angular renders this component inside
the <app-root></app-root> element in index.html.

54
Relationships

• index.html references the root component

<app-root></app-root>.

• main.ts boots the AppModule, which then uses

AppComponent as the root component.

• AppModule imports and declares AppComponent,

and AppComponent becomes the starting point for
the UI.

55
 Running the Development Server
1.Use the following command to start the development server and
run your Angular application locally
ng serve

2. Open your web browser and navigate to http://localhost:4200/

You should see your Angular application running.

3. Additional Options
To specify a different port for the development server, you can use
the -- port option.
ng serve -- port 3000

56
 Running the Development Server
ng serve

• This command is part of the Angular CLI (Command Line

Interface).

• When you run ng serve , it uses the configuration specified in the

angular.json file for your project.

• It starts the development server and serves your Angular

application using the settings defined in the Angular CLI
configuration.

57
 Generating Angular Artifacts

Angular CLI provides an ng generate command which helps

developers generate basic Angular artifacts such as modules,
components, directives, pipes, and services:

ng generate component my-component

my-component is the name of the component. The Angular CLI

will automatically add a reference to components, directives
and pipes in the src/app.module.ts file.

58
 Generating Angular Artifacts
If you want to add your component, directive or pipe to another
module (other than the main application module, app.module.ts),
you can simply prefix the name of the component with the module
name and a slash :

ng g component my-module/my-component

my-module is the name of an existing module.

59
 Component in Angular

A Component is a key feature of Angular that acts as the basic

UI building block of an Angular application

Components are designed to be reusable. Once you create a

component for a particular part of your application, you can use
it multiple times throughout your application. This reusability
reduces code duplication and promotes consistency.

60
 Component in Angular
• A component consists of a template(HTML view of UI), styles(CSS
appearance/design) and a typescript class which contains
business logic.
• To indicate a class as component @Component decorator is used.
• The @Component decorator provides metadata to the
component.
• The component metadata properties consist of selectors,
directives, providers, styleUrls and templateUrls.

61
 Component in Angular

• Every Angular application, consisting of one or more Angular Components, is

built from Components.
• Angular Components are simple JavaScript/Typescript classes with HTML
templates and names.
• A component’s HTML template may access data from its corresponding JavaScript
/ Typescript class. Angular components may have CSS styles associated with
them and the HTML template may access them. 62
 Template in Angular

• The template is an HTML super set. It includes all the features of

HTML, as well as additional functionality that binds component
data into the HTML and generates HTML DOM elements
dynamically.
63
 Template in Angular
•The user interface or the view of the end users is defined using the template.

•Templates are created using HTML and it binds the component properties and
methods thus helping us to render data dynamically.

64
 AppComponent
When you create a new Angular project using the Angular cli command
(ng new project-name), by default it will create a component called
AppComponent in src/app.

65
 AppComponent
This AppComponent is the root component, and it holds the
template for the entire application. This root component can nest
several components as its child component. An angular project must
have at least one component.

66
 Component in Angular
@Component
This @Component decorator is used to make a class an angular
component and provide additional metadata that determines how
the component should be processed. In the below example, the
component decorator has three properties.
selector: The selector property specifies the custom HTML element selector that represents
the root component.
templateUrl: The templateUrl property specifies the path to the HTML template file that
defines the component’s view.
styleUrls: The styleUrls property is an array that lists the paths to external style files (CSS or
SCSS) for styling the component.

67
 Component in Angular
selector: The selector
property specifies the custom
HTML element selector that
represents the root
component.

templateUrl: The templateUrl

property specifies the path to
the HTML template file that
defines the component’s view.

styleUrls: The styleUrls

property is an array that lists
the paths to external style
files (CSS or SCSS) for styling
the component.
68
 Component in Angular
For example, if the selector is ‘app-root’, we can use <app-root></app-root> in
the HTML file (index.html) to include this component. This <app-root> tag is
replaced by the html code written in app.component.html, which is defined in
the templateUrl.

69
 Child Component in Angular
Angular applications typically have a hierarchical structure where components
are organized in a tree-like fashion. At the root, you have the main
component, and it can have child components
For example, to create a webpage like the template shown in the figure,
define the components separately for the nav bar, header, footer, and main
content area. These components can be reused wherever we want.

70
 Main.ts file

The entry point to any Angular application is Main.ts.

71
 app.module.ts
The app.module.ts is the root module of the Angular application. It's where you
define the structure, components, services, and other features of your
application.

you can see a class named ‘AppModule’ and it is bootstrapped in Main.ts.

72
Generating Component

73
Generating Component

74
 Angular Modules

Angular is a Modular framework. Modularity is the property which measures the

amount to which components connected together within a system can be
separated as an individual unit and can function by themselves without depending
on each other.

You can also import and export functionalities from one module to the other for
efficient and clean programming. 75
 Angular Modules

Module is a unit that groups Components, Pipes, Directives, and

Services. An angular application can contain several modules.

There is minimum one module present in every angular application,

which is NgModule.

The default NgModule is AppModule and is presented in

app.module.ts file.

When you launch the application, this is the module that gets
bootstrapped.

76
Angular Architecture

77
 Angular Modules
• Angular Applications are modular and
Angular has its own modularity system
called NgModule

• Every Angular application has at least

one class with a @NgModule decorator,
it is the root module, conventionally
named as AppModule.

• To use any component into an

application you need to declare it into
the related module. Angular Module is
class with a @NgModule decorator.

78
 Angular Modules
declarations: declaration property contains a list of the
component which you define for this module.

exports: if you want to use component or directive of this

module into another module then you need to add that
component or directive name here.

imports: if you want to use external modules(libraries) like

BrowserModule, AppRoutingModule etc then you need to
add that module name here.

providers: whatever service you create in that module you

need to provide it here.

bootstrap: you need to provide the name of the

component which you want to load when the application
loaded on the browser. Generally, it is the name of the root
component.

79
 Angular Modules
Launch an application by bootstrapping its root module. During
development you're likely to bootstrap the AppModule in a main.ts

80
 Component
The component is the basic building block of User Interface(UI)
Each component is mapped to the template.
Angular Application is a tree of Angular Component
Angular creates, updates and destroys components as the user moves through
the application.

81
 Component
selector: the name given in this property is used
on HTML page as a tag to load that component
the screen. For example, to load app-root on
screen you need to use <app-root> on HTML
page.

templateUrl: templateUrl is used to map an

external HTML page to that component. As shown
above, the app.component.html page is mapped
with AppComponent.

styleUrls: styleUrls is used to insert the list of CSS

files which you want to use for that component.
As shown above, the app.component.css file
contains the style of AppComponent.

82
 Component Example

For example, this HeroListComponent has

a heroes property that returns an array of
heroes that it acquires from a service.

HeroListComponent also has

a selectHero() method that sets
a selectedHero property when the user
clicks to choose a hero from that list.

83
 Template Example
Each component is mapped to one template.
template is a form of HTML that tells Angular how to render the component on
the screen.
Although this template uses typical HTML elements like <h2> and <p>, it also has
some differences. Code like *ngFor, {{hero.name}}, (click), [hero], and <app-
hero-detail>
In the last line of the template, the <app-hero-detail> tag is a custom element
that represents a new component, HeroDetailComponent

84
Template

85
 Data Binding
Data Binding in Angular is a mechanism that connects the
component (TypeScript) and the view (HTML), ensuring
seamless synchronization between them.

86
 Data Binding

Angular supports the data binding for coordinating parts of a template with the
parts of a component.
Angular supports following types of data binding :
1.Interpolation
2.Property Binding
3.Event Binding
4.Two-way Data Binding
87
Data Binding

88
Data Binding

89
 Data Binding

1. The {{hero.name}} interpolation displays the component's hero.name

property value within the <li> element.

2. The [hero] property binding passes the value of selectedHero from the
parent HeroListComponent to the hero property of the child
HeroDetailComponent.

3. The (click) event binding calls the component's selectHero method when
the user clicks a hero's name. 90
Two-way Data Binding
4. Two-way data binding combines
property and event binding in a single
notation, using the ngModel directive.

In two-way binding, a data property value

flows to the input box from the
component as with property binding. The
user's changes also flow back to the
component, resetting the property to the
latest value, as with event binding.

91
 Metadata
All the parts of angular like component, directive, module or service, all are
basic typescript classes
but the question is How angular know type of class?

Metadata tells Angular how to process a class.

In typescript, you attach metadata by using @Component, @NgModule,

@Injectable or @Directive

92
 Directives

Angular Templates are dynamic. When Angular renders them, it

transforms the DOM according to the instructions given by the directives.

Angular provides two types of directives :

Structural Directive: Structural directives change the structure of DOM

template. For example, *ngFor, *ngSwitch, *ngIf etc are structural
directives.

Attribute Directive: Attribute directive updates the attribute of specific

HTML control for example [ngClass] is an attribute directive.

93
 Structural Directives

*ngFor tells Angular to stamp out one <li> per hero in the heroes list.

*ngIf includes the HeroDetail component only if a selected hero exists

94
 Attribute Directives

The ngModel directive, which implements two-way data binding, is an example

of an attribute directive. ngModel modifies the behavior of an existing element
(typically an <input>) by setting its display value property and responding to
change events.

95
 Service
Services are used for reusable data services to share between components
throughout an application.

As shown below @Injectable() decorator is used to declare any typescript class

as Service.

This can be also used as data sharing class, to share data between components
throughout an application as well as writing business logic.

Examples include:
• logging service
• data service
• application configuration

96
Service

97
 Dependency Injection
Dependency injection is a way to supply a new instance of a class with the fully-
formed dependencies it requires. Most dependencies are services. Angular uses
dependency injection to provide new components with the services they need.

Angular can tell which services

a component needs by looking
at the types of its constructor
parameters. For example, the
constructor of your
HeroListComponent needs a
HeroService

When Angular creates a

component, it first asks
an injector for the services that
the component requires

98
 Dependency Injection
Injector maintains the list of Services which you are going to use in the
application. Whenever any component requires the service, injector will give the
instance to that component.

If the injector doesn't have a

HeroService, how does it know how to
make one?

you must have previously registered a

provider of the HeroService with the
injector. A provider is something that
can create or return a service, typically
the service class itself.

add providers to the root module so

that the same instance of a service is
available everywhere.

99
Dependency Injection

100
Angular Loading Application

101
Loading Angular App

102
Loading Angular App

103
Loading Angular App

104
Loading Angular App

105
Loading Angular App

106