Unit 1- Introduction to Angular

Unit 1

Introduction to Angular

Introduction to Angular

Outline

 What is Angular ?

 Angular Architecture

 What is MVVM ?

 Hello World Angular

M.Romdhani, 2022 2

1
 Unit 1- Introduction to Angular

What is Angular ?

Introduction to Angular

What is Angular ?
 Angular is a development framework for building mobile and
desktop web applications.
 It's a large development platform
 Angular is Cross platform
 General Web Applications
 Mobile Web (responsive)
 Android / iOS: Native with NativeScript & Ionic 2 Native
 Windows / Mac / Linux: Desktop using Electron

 Components are fundamental building blocks of Angular

applications
 Components contain application logic that controls a region of the UI (view)
 Components have well-defined inputs and outputs.
 They have well-defined lifecycle.

M.Romdhani, 2022 4

2
 Unit 1- Introduction to Angular

Introduction to Angular

Angular History
 Angular 2.0 and above are now simply called “Angular”, any 1.0
version is “AngularJS”.
 Angular 2 is a complete rewrite of AngularJS but Angular 4 is an upgrade
of Angular 2. There exist no Angular 3 version !
 Angular 2 has been released in September 2016
 Angular 4 has been released in March 2017
 …
 Angular 11 has been released in November 2020
 Angular 12 has been released in May 2021

 Angular apps are written in TypeScript, which compiles into

JavaScript. TypeScript is similar to strongly typed languages.

 Angular relies on webpack for module loading.

 Angular projects can be generated and managed with

the Angular CLI.

M.Romdhani, 2022 5

Introduction to Angular

What is TypeScript?

 Superset of JavaScript
 It was designed by Anders Hejlsberg (designer of C#) at Microsoft.
The first version (0.8) was released in 2012. TypeScript is both a
language and a set of tools
 Compiles to plain JavaScript
 Transpilation

 Strongly typed
 Primitives: boolean, number, string, void,
null, undefined
 Objects: array, enum, classes,
interfaces
 The Any type: In some situations,
not all type information is available.

 Class-based object-orientation

M.Romdhani, 2022 6

3
 Unit 1- Introduction to Angular

Angular Architecture and

Building Blocs

Introduction to Angular

Angular Architecture
 Angular is a platform and framework for building client
applications in HTML and TypeScript. Angular is written in
TypeScript. It implements core and optional functionality as a set
of TypeScript libraries that you import into your apps.

https://angular.io/generated/images/guide/architecture/overview2.png

M.Romdhani, 2022 8

4
 Unit 1- Introduction to Angular

Introduction to Angular
Basic Building blocs : Modules and
Components
 The basic building blocks of an Angular application are NgModules,
which provide a compilation context for components.

 NgModules collect related code into functional sets; an Angular app

is defined by a set of NgModules. An app always has at least a root
module that enables bootstrapping, and typically has many more
feature modules.
 Components define views, which are sets of screen elements that Angular
can choose among and modify according to your program logic and data.
 Components use services, which provide specific functionality not directly
related to views. Service providers can be injected into components as
dependencies, making your code modular, reusable, and efficient.

M.Romdhani, 2022 9

Angular Modules and

Components

10

5
 Unit 1- Introduction to Angular

Introduction to Angular

Angular modules

 Every Angular app has a root module, conventionally named

AppModule, which provides the bootstrap mechanism that
launches the application.
 An app typically contains many functional modules.

 Organizing your code into distinct functional modules helps in

managing development of complex applications, and in
designing for reusability.
 In addition, this technique lets you take advantage of lazy-loading—that
is, loading modules on demand—to minimize the amount of code that
needs to be loaded at startup.

M.Romdhani, 2022 11

11

Introduction to Angular

Components

 Every Angular application has at least one component, the root

component that connects a component hierarchy with the page
document object model (DOM).
 Each component defines a class that contains application data and logic,
and is associated with an HTML template that defines a view to be
displayed in a target environment.

 The @Component() decorator identifies the class immediately

below it as a component, and provides the template and related
component-specific metadata.

M.Romdhani, 2022 12

12

6
 Unit 1- Introduction to Angular

Introduction to Angular

Components in Angular
 Components are the building blocks of your application. Imagine
building a site like Amazon.com:

M.Romdhani, 2022 13

13

Introduction to Angular

Components adhere to MV-VM Pattern

 The View : The component template

 The ViewModel : The component class
 The Model : The Angular service
UI
• User actions,
commands
• Data binding
• Notifications

Business
Logic and
Data • Data Access
• Update ViewModel about
change
M.Romdhani, 2022 14

14

7
 Unit 1- Introduction to Angular

Services and Dependency

injection

15

Introduction to Angular
The services provide the logic for
components

 The main objective of a service is to organize and share business

logic, models, or data and functions with different components of
an Angular application.
 Angular services are singleton objects that get instantiated only once
during the lifetime of an application.

M.Romdhani, 2022 16

16

8
 Unit 1- Introduction to Angular

Introduction to Angular

Dependency Injection (DI)

 DI is wired into the Angular framework and used everywhere to
provide new components with the services or other things they
need.
 Components consume services; that is, you can inject a service into a
component, giving the component access to that service class.

 To define a class as a service in Angular, use the @Injectable()

decorator to provide the metadata that allows Angular to inject it
into a component as a dependency.
 Similarly, use the @Injectable() decorator to indicate that a component or
other class (such as another service, a pipe, or an NgModule) has a
dependency.

 The injector is the main mechanism. Angular creates an

application-wide injector for you during the bootstrap process,
and additional injectors as needed. You don't have to create
injectors.

M.Romdhani, 2022 17

17

Routing

18

9
 Unit 1- Introduction to Angular

Introduction to Angular

Single Page Application (SPA)

 A single-page application (SPA) is a
web application or web site that
interacts with the user by SPA Demo
http://www.myspa.com
dynamically rewriting the current
page rather than loading entire new
pages from a server. View View
 So in a SPA, only one page is
requested from the server.

 Advantages of Single Page Apps

 Limit page requests for UX View View
 Load content up front (bundled)
 Load additional data through async
requests
 Route-first
 Data-binding
 Module management

M.Romdhani, 2022 19

19

Introduction to Angular

Routing basics

 The Angular Router enables

navigation from one view to the next
as users perform application tasks.

 Configuration
 A routed Angular application has
one singleton instance of the
Router service. When the
browser's URL changes, that
router looks for a corresponding
Route from which it can determine
the component to display.
 A router has no routes until you
configure it. The following example
creates five route definitions,
configures the router via the
RouterModule.forRoot() method,
and adds the result to the
AppModule's imports array.

M.Romdhani, 2022 20

20

10
 Unit 1- Introduction to Angular

Introduction to Angular

Routing basics
 The appRoutes array of routes describes how to navigate.
 Pass it to the RouterModule.forRoot() method in the module imports to
configure the router.

 Each Route maps a URL path to a component.

 There are no leading slashes in the path. The router parses and builds the
final URL for you, allowing you to use both relative and absolute paths when
navigating between application views.
 The :id in the second route is a token for a route parameter. In a URL such
as /hero/42, "42" is the value of the id parameter.
 The data property in the third route is a place to store arbitrary data
associated with this specific route.
 The empty path in the fourth route represents the default path for the
application, the place to go when the path in the URL is empty, as it typically
is at the start

M.Romdhani, 2022 21

21

Angular Installation

22

11
 Unit 1- Introduction to Angular

Introduction to Angular

Installing Angular CLI

 CLI for Angular applications [https://github.com/angular/angular-cli] is a
scaffolding tool for Angular
 The CLI is now in 12.0.0 (May 2021)
 Both the CLI and generated project have dependencies that require Node 10.13 or
higher

 Installation
npm install -g @angular/cli
(This installs the latest stable version)

 Usage
ng help

 Generating and serving an Angular project via a development server

ng new PROJECT-NAME
cd PROJECT-NAME
ng serve # option –o launches your default browser and open the app in it
 Navigate to http://localhost:4200/. The app will automatically reload if you change
any of the source files.

 You can configure the default HTTP host and port used by the development
server with two command-line options :
ng serve --host 0.0.0.0 --port 4201
M.Romdhani, 2022 23

23

Introduction to Angular
Generating Components, Directives,
Pipes and Services
 You can use the ng generate (or just ng g) command to generate
Angular components:

M.Romdhani, 2022 24

24

12
 Unit 1- Introduction to Angular

Introduction to Angular
Generating Components, Directives,
Pipes and Services
 You can find all possible blueprints in the table below:

M.Romdhani, 2022 25

25

Hello World Angular

26

13
 Unit 1- Introduction to Angular

Introduction to Angular

Setting Up an Angular project

 Create New Angular Project
ng new angular-app
 That command will generate Angular project and install npm packages, so
wait for minutes. Now, type this command to run the Angular 4 application.
ng serve –o
 It will open the browser automatically then go to this URL
http://localhost:4200. You should see this in the browser.

M.Romdhani, 2022 27

27

Introduction to Angular

Managing dependencies with npm

 npm – or "Node Package Manager" – is the default package
manager for JavaScript's runtime Node.js
 NPM consists of two main parts:
 a CLI (command-line interface) tool for publishing and downloading
packages, and
 an online repository that hosts JavaScript packages (npmjs.com)

 Package.json
 Each npm project has a package.json that contains meta-data for the
project, the scripts, and the dependencies
 Dependencies vs. DevDependencies
 Dependencies are to be used for production.
 DevDependencies are to be used for development/quality/tests.
 Package-lock.json contains the exact versions of Packages
 package-lock.json is not meant to be read line-by-line by developers (unless
we're desperate to resolve "works in my machine" issues)

 Packages version format (major.minor.patch) SemVer

 caret (^). Example ^3.9.2 accepts all 3.*.*
 tilde (~). Example ~3.9.2 accepts all 3.9.*
M.Romdhani, 2022 28

28

14
 Unit 1- Introduction to Angular

Introduction to Angular

Managing dependecies with npm

 npm CLI Commands

 Create an npm project
 npm init
 Install globally a package
 npm install --global typescript
 Install a dependency
 npm install --save bootstrap@4
 Install a devDependency
 Npm install --save-dev jasmine
 Run a test script
 npm run tests

M.Romdhani, 2022 29

29

Introduction to Angular

Adding Bootstrap and Font-awesome

 Install Bootstrap
 npm install --save bootstrap

 Install Font-awesome
 npm install --save font-awesome

 Import Bootstrap and Font-awesome

 In styles.scss (under src), ad the following lines
@import "~bootstrap/scss/bootstrap";

$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";

 Adding the NgBootstrap (Angular Bootstrap Powered

Components) https://ng-bootstrap.github.io
 ng add @ng-bootstrap/ng-bootstrap
 It will install ng-bootstrap for the default application specified in your
angular.json.
M.Romdhani, 2022 30

30

15