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
