0% found this document useful (0 votes)
16 views28 pages

Lec 5

This document provides an overview of client-side development with Angular. It discusses what Angular is and its main building blocks, including modules, components, templates, directives, services, and dependency injection. Components in Angular control parts of the screen and consist of a template, decorator, and TypeScript class. Data binding in Angular allows communication between templates and components. Services contain business logic rather than residing in components.

Uploaded by

hatemzomor
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
0% found this document useful (0 votes)
16 views28 pages

Lec 5

This document provides an overview of client-side development with Angular. It discusses what Angular is and its main building blocks, including modules, components, templates, directives, services, and dependency injection. Components in Angular control parts of the screen and consist of a template, decorator, and TypeScript class. Data binding in Angular allows communication between templates and components. Services contain business logic rather than residing in components.

Uploaded by

hatemzomor
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/ 28

Lecture 5: Client-Side Development with Angular

1
 What is Angular?
 Angular Modularity
 Angular AppModule
 Angular Architecture
 Angular Components
◦ Template
◦ Decorator
◦ TypeScript Class
 Angular Services
 Dependency Injection

2
 Angular is a platform that helps you create
advanced web applications in HTML using
Typescript
 It helps you to structure your code, separate your
concerns and remove trivial code

3
 Angular Apps are based on Modules
◦ Angular Modules helps organizing the application into
cohesive blocks of functionality
 A Module is implemented as a Class
◦ Declares which components, services, etc. that belongs
together
 Angular AppModule
◦ Every Angular applications have at least one module
◦ The RootModule by convention named AppModule
◦ Larger Angular applications will have feature and route
modules as well

4
5
 Eight main building blocks of an Angular App

6
 Modules
 Components
 Templates
 Metadata
 Data Binding
 Directives
 Services
 Dependency Injection

7
A component controls a piece of
the screen called a view
 The component's application logic:
◦ Define what it does to support the view
◦ It is defined in a Class
◦ The class interacts with the view
through an API of Properties and
Methods

8
 A component consists of three parts:
◦ A Template
◦ A Decorator
◦ A TypeScript Class

9
 You define a Component's View with
its companion Template
 A Template is a form of HTML that
tells Angular how to render the
Component

10
11
 Metadata tells Angular how to process
a Class
 To tell Angular that it’s a Component,
attach Metadata to the Class
 In TypeScript, you attach Metadata by
using a Decorator

12
 Plain Old TypeScript Object
 Exposes Properties and Methods to be
used in the Template

13
 Without a Framework
◦ You would be responsible for pushing
data values into the HTML controls
◦ And turning user responses into actions
and value updates
 Angular supports Data Binding:
◦ A mechanism for coordinating parts of a
Template with parts of a Component

14
 Plays an important role in
communication between a Template and
its Component
 Also important for communication
between Parent and Child components

15
16
 The {{hero.name}} interpolation:
◦ Displays the component’s hero.name property
value within the <li> element
 The [hero] property binding:
◦ Passes the value of selectedHero from the parent
HeroListComponent to the hero property of the
child HeroDetailComponent
 The (click) event binding:
◦ Calls the component’s selectHero method when
the user clicks a hero’s name

17
 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 the property binding
◦ The user’s changes also flows back to the
component, resetting the property to the latest
value, as with event binding

18
 Angular Templates are Dynamic
◦ When Angular renders them, it
transforms the DOM according to the
instructions given by directives
 A directive is a Class with a
@Directive decorator
 Two other kinds of directives exist:
◦ Structural and Attribute directives

19
 Structural directives alter layout by:
◦ Adding, Removing, and Replacing
elements in DOM

20
 Attribute directives alter the
appearance or behavior of an existing
element:
◦ In templates they look like regular HTML
attributes, hence the name

21
 Service is a broad category
encompassing any Value, Function, or
Feature that your application needs:
◦ Almost anything can be a Service
◦ A Service is typically a TypeScript Class
with a narrow, well-defined purpose, but
can just as well be a function or value
◦ Services should contain the business logic
– not the component

22
 Angular has no definition of a Service
◦ There is no service base class
◦ There is no place to register a service
 Component Classes should be Lean
◦ They don't fetch data from the server or
validate user input
◦ They delegate such tasks to services
◦ A component's job is to enable the user
experience and nothing more
◦ A good component presents properties
and methods for data binding
 It delegates everything nontrivial to
services

23
 An example of a service class that
logs to the browser console

24
 A way to supply a new instance of a
Class with the 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

25
 A way to supply a new instance of a
Class with the 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

26
 When Angular creates a component, it
first asks an injector for the services
that the component requires
 An injector maintains a container of
service instances that it has
previously created
 If a requested service instance is not
in the container, the injector makes
one and adds it to the container
before returning the service to
Angular
27
28

You might also like