Formation COMPLÈTE sur ANGULAR  

elearndev.net

mOHAMED IDBRAHIM

Formation COMPLÈTE sur ANGULAR 5  

elearndev.net

mOHAMED IDBRAHIM

elearndev.net

mOHAMED IDBRAHIM

Formation Complète SUR Angular 5

firebase, laravel, cms voyager et bulma.io

Programme

• INTRODUCTION

• PRINCIPES DE BASE DE TYPESCRIPT

• LES FONDAMENTAUX DE ANGULAR 5

• AFFICHAGE DES DONNÉES ET GESTION DES ÉVÉNEMENTS

• CONSTRUIRE DES COMPOSANTS RÉUTILISABLES

• LES DIRECTIVES

• GESTION DES FORMULAIRES

• CONSOMMATION DE SERVICES HTTP

• ROUTAGE ET NAVIGATION

• AUTHENTIFICATION ET AUTORISATION

• DÉPLOIEMENT

• CONSTRUIRE DES APPLICATIONS SANS SERVEUR EN TEMPS RÉEL AVEC FIREBASE

• PROJET SITE WEB COMPLET AVEC ANGULAR ET LARAVEL (CMS VOYAGER)

• SITE WEB PROFESSIONNEL DE TYPE E-COMMERCE

brightcoding.teachable.com

mOHAMED IDBRAHIM

Formation Complète SUR Angular 5

firebase, laravel, cms voyager et bulma.io

Mohamed IDBRAHIM

Formateur et Expert Full Stack

Animée par 

elearndev.net

mOHAMED IDBRAHIM

Formation Complète SUR Angular 5

firebase, laravel, cms voyager et bulma.io

Qu'est-ce que Angular

C'est un framework frontEnd à pour but de créer

des applications client avec HTML, CSS

et JAVASCRIPT / TypeSCRIPT

elearndev.net

mOHAMED IDBRAHIM

Formation Complète SUR Angular 5

firebase, laravel, cms voyager et bulma.io

Avantages d'Angular

• Donne à nos Applications une Structure Propre
• Code Réutilisable et Facile à Maintenir 
• Rendre le HTML Dynamique
• Minimiser la charge au Serveur

elearndev.net

mOHAMED IDBRAHIM

Formation Complète SUR Angular 5

firebase, laravel, cms voyager et bulma.io

ARCHITECTURE Simplifiée

frontEnd

backEnd

Logique 

Métier

API

Logique 

Présentation

elearndev.net

mOHAMED IDBRAHIM

Formation Complète SUR Angular 5

firebase, laravel, cms voyager et bulma.io

Implémentation 

Développeur front-end

Développeur back-end

HTML

CSS

JAVASCRIPT

ANGULAR

API

BASES DE DONNÉES 

elearndev.net

mOHAMED IDBRAHIM

Formation Complète SUR Angular 5

firebase, laravel, cms voyager et bulma.io

Installation de Angular CLI

Command-Line Interface

npm install -g @angular/cli

ng --version

elearndev.net

mOHAMED IDBRAHIM

Formation Complète SUR Angular 5

firebase, laravel, cms voyager et bulma.io

Installation de GIT

Git est un système de contrôle de version distribuée gratuit et open source conçu pour gérer tout, des petits aux très grands projets avec rapidité et efficacité.

elearndev.net

mOHAMED IDBRAHIM

Formation Complète SUR Angular 5

firebase, laravel, cms voyager et bulma.io

Visual Code Studio

Visual Studio Code est un éditeur de code est pour créer et déboguer des applications web et cloud modernes. Visual Studio Code est gratuit et disponible sur votre plate-forme préférée - Linux, Mac OSX et Windows.

elearndev.net

mOHAMED IDBRAHIM

Formation Complète SUR Angular 5

firebase, laravel, cms voyager et bulma.io

On commence ...

elearndev.net

mOHAMED IDBRAHIM

Formation Complète SUR Angular 5

firebase, laravel, cms voyager et bulma.io

Avantages de TypeScript

• Trans typage (optionnel)

• Notions de l'orienté objet POO

• Riche de fonctionnalités

• Débogage des errors

• Supporté par plusieurs Editeurs de code 

elearndev.net

mOHAMED IDBRAHIM

Formation Complète SUR Angular 5

firebase, laravel, cms voyager et bulma.io

TypeScript est un langage Compilé

Javascript

TypeScript

Complilation

elearndev.net

mOHAMED IDBRAHIM

Formation Complète SUR Angular 5

firebase, laravel, cms voyager et bulma.io

Modules (Export et Import)

Fichier 1

Fichier 2

Fichier 3

Export

Export

Import

Import

<<Module>>

<<Module>>

<<Module>>

elearndev.net

mOHAMED IDBRAHIM

Formation Complète SUR Angular 5

firebase, laravel, cms voyager et bulma.io

Components

elearndev.net

mOHAMED IDBRAHIM

Formation Complète SUR Angular 5

firebase, laravel, cms voyager et bulma.io

Components

DONNEES

TEMPLATE

LOGIQUE

elearndev.net

mOHAMED IDBRAHIM

Formation Complète SUR Angular 5

firebase, laravel, cms voyager et bulma.io

AppComponent.ts 

{ }

elearndev.net

mOHAMED IDBRAHIM

Formation Complète SUR Angular 5

firebase, laravel, cms voyager et bulma.io

Les cours

Le menu

Footer

SideBar

Site de Elearndev.net

{ }

{ }

{ }

{ }

elearndev.net

mOHAMED IDBRAHIM

Formation Complète SUR Angular 5

firebase, laravel, cms voyager et bulma.io

Le menu

Footer

SideBar

Site de Elearndev.net

Cours

Cours

Cours

Cours

Cours

{ }

{ }

{ }

{ }

{ }

{ }

{ }

{ }

elearndev.net

mOHAMED IDBRAHIM

Formation Complète SUR Angular 5

firebase, laravel, cms voyager et bulma.io

Le menu

Footer

SideBar

Site de Elearndev.net

Cours

Cours

Cours

Cours

Cours

Avis

Avis

Avis

Avis

{ }

{ }

{ }

{ }

{ }

{ }

{ }

{ }

{ }

{ }

{ }

{ }

elearndev.net

mOHAMED IDBRAHIM

Formation Complète SUR Angular 5

firebase, laravel, cms voyager et bulma.io

App

Footer

Courses

Sidebar

Course

Avis

Menu

elearndev.net

mOHAMED IDBRAHIM

Formation Complète SUR Angular 5

firebase, laravel, cms voyager et bulma.io

Modules

elearndev.net

mOHAMED IDBRAHIM

Formation Complète SUR Angular 5

firebase, laravel, cms voyager et bulma.io

Modules

Professeurs

Courses

Messagerie

Admin

elearndev.net

mOHAMED IDBRAHIM

Formation Complète SUR Angular 5

firebase, laravel, cms voyager et bulma.io

elearndev.net

mOHAMED IDBRAHIM

Formation Complète SUR Angular 5

firebase, laravel, cms voyager et bulma.io

{ }

Input

output

Passer Data

Déclencher Event

elearndev.net

mOHAMED IDBRAHIM

Formation Complète SUR Angular 5

firebase, laravel, cms voyager et bulma.io

Component API

elearndev.net

mOHAMED IDBRAHIM

Formation Complète SUR Angular 5

firebase, laravel, cms voyager et bulma.io

Handling errors

Manipuler les erreurs

elearndev.net

mOHAMED IDBRAHIM

Formation Complète SUR Angular 5

firebase, laravel, cms voyager et bulma.io

Handling errors

Unexpected

expected

• Server Offline
• Network is Down
• Unhandled exceptions

• Not found errors 404
• Bad request 400