This document provides an introduction and overview of Angular 4 including: - Angular is an open-source JavaScript framework used to build single page web applications. - It discusses TypeScript, single page applications, the development environment setup, and basic application structure in Angular. - The main building blocks of an Angular application are modules, components, directives, and services - which are defined through TypeScript classes and metadata.

1. Presented by DEBBABI Nader
Introduction To
Angular 4
Training Sessions Organized by
Club Jeunes Ingénieurs ISAMM

2. ANGULAR
One framework.
Web, Mobile & Desktop.

3. Agenda
>What is Angular ?
>Motivation
>TypeScript ?
>Single Page Application (SPA)
>Development Environment Setup
>Hello World!
>Bootstrapping the app
>Building Blocks & Architecture

4. What is Angular ?

5. What is Angular ?
An Open-Source JavaScript
Framework, used to build Single
Page based Web Application (SPA),
Developed by Google,
Release date March 2017,
Current version 4.4.4 (stable).

6. Motivation

7. Motivation
> Speed & Performance,
> Smaller application,
> Modular application,
> Cross-platform Web, Mobile & Desktop,
> SPA,
> RESTful API,
> Uses TypeScript,
> Rxjs API Integration,
> & It has a huge community on GitHub.

8. TypeScript ?

9. TypeScript ?
Free & Open-Source programming
language,
Developed & maintained by Microsoft,
A superset of JavaScript,
Full Object-Oriented Programming with
features like classes, interfaces &
modules…
Support for ECMAScript 5 and uses arrow
function syntax,
Compiles to plain JavaScript.

10. Single Page Application
(SPA)

11. Single Page Application ?
One and Only HTML page for the entire application,
Dynamically update the single page with new data if needed, as
the user interacts with the app,
Show and Hide some components during the interaction process,
No reloading or refreshing during navigation,
More responsive & fluid app as a result,
Full separation between the presentation logic & business logic,
Asynchronous Requests (AJAX), JSON response & RESTful API.

12. Traditional way

13. Single Page Application

14. ANGULAR for Client Web App

15. ANGULAR for Client Web App

16. Development Environment
Setup

17. Development Environment Setup
Node.js is an open-source, cross-platform JavaScript run-time environment,
we use it to:
> Run a development server,
> Use the npm tool.
npm is a Node.js Package Manager for
JavaScript programming language,
npm is automatically installed with Nodejs,

18. Development Environment Setup
To develop the application using TypeScript
we need to install the TypeScript package
using the command,
Angular CLI (Command Line Interface) is a tool
that allows us to create a project, generate it’s
parts, build it and run it on the development
server directly through the command line,

19. Development Environment Setup
Visual Studio Code as
a Text Editor,

20. Hello World!!

21. Hello World!!
> Go to workspace directory,
> Using Angular CLI ng new command create the Hello World application,
> Go to the Hello World directory,
> Run the application using another Angular CLI command ng serve,

22. Basic Structure of
ANGULAR Application

23. Basic Structure of ANGULAR Application
.angular-cli.json , package.json
and tsconfig.json are the
responsible files on the project
configuration, it’s dependency
management and it’s external
packages.

24. Basic Structure of ANGULAR Application
main.ts and index.html are the
entry point to the application,
Since we are developing a SPA
index.html is the only HTML
page in the whole project,
style.css is the style sheet for
the global app design.

25. Basic Structure of ANGULAR Application
node_modules folder contains
the packages installed by the
npm tool,
app folder contains all the work,
components, modules…

26. Bootstrapping the app

27. Bootstrapping the app

28. Building Blocks

29. Building Blocks
Every Angular app has at least one Module, the
root module named AppModule,
An Angular app is a Modular app,
A module is a TypeScript class with the Decorator
@NgModule,
Each module in the application has it’s own
Components, Directives, Services… They should
be declared in @NgModule decorator,
Modules can cooperate to achieve some app
functionalities.

30. Building Blocks
A Component controls a piece of screen called
view,
This view is defined by the Template associated to
the Component,
A Component handles the user interaction with the
view (Template), passes data and properties to the
view and updates it dynamically,
A Component is a TypeScript class with the
Decorator @Component.

31. Building Blocks
A Component view is defined by its associated
Template,
A Template is bunch of HTML tags,
Along side with the HTML, a Template typically
contains some particular expressions and syntax
which belong to Angular,
A Template may contain some Custom Tags, that
represent another Component, the selectors.

32. Building Blocks
A Module, a Component, a Directive or a Service
are just TypeScript Classes until we tell Angular
about the difference between them, and that is
done by the Metadata,
We attach Metadata in TypeScript to a class by
using Decorators, @NgModule, @Component,
@Injectable…
Metadata tells Angular which Template belongs to
which Component and which Component belongs
to which Module…
Class + @Component + Metadata = A Component

33. Building Blocks

34. Building Blocks
A Directive is a TypeScript class with the Decorator
@Directive,
Directives appear within HTML tag as attributes,
Two kind of directives: Structural & Attribute
Directives,
Structural Directives change the layout by adding or
removing Template elements,
Example: *ngFor & *ngIf.
Attribute Directives change the appearance or the
behavior of an existing Template element,
Example: ngModel, ngStyle & ngClass.

35. Building Blocks
A Service is a TypeScript class with the Decorator
@Injectable,
A Service achieve some functionalities for the
application such us fetching data from server,
authentication…
This kind of functionalities should not be done in
the Component,
A Component should only take care of rendering
the Template (view).

36. Thanks for your attention !!