Docsity
Docsity
Prepare for your exams
Prepare for your exams

Study with the several resources on Docsity

Earn points to download
Earn points to download

Earn points by helping other students or get them with a premium plan

Guidelines and tips
Guidelines and tips
Sell on Docsity
Sell on Docsity
Docsity AI
Docsity AI
Log inSign up

Prepare for your exams

Study with the several resources on Docsity

Find documents

Prepare for your exams with the study notes shared by other students like you on Docsity

Search for your university

Find the specific documents for your university's exams

Docsity AINEW

Summarize your documents, ask them questions, convert them into quizzes and concept maps

Explore questions

Clear up your doubts by reading the answers to questions asked by your fellow students

Earn points to download

Earn points by helping other students or get them with a premium plan

Share documents
download point icon20 Points

For each uploaded document

Answer questions
download point icon5 Points

For each given answer (max 1 per day)

All the ways to get free points
Get points immediately

Choose a premium plan with all the points you need

Study Opportunities

Choose your next study program

Get in touch with the best universities in the world. Search through thousands of universities and official partners

Community

Ask the community

Ask the community for help and clear up your study doubts

Free resources

Our save-the-student-ebooks!

Download our free guides on studying techniques, anxiety management strategies, and thesis advice from Docsity tutors

Atelier Framework Web Côté Client, Summaries of Operating Systems

Instituts Supérieurs des Etudes TechnologiquesOperating Systems

Ce document présente les objectifs et les étapes d'installation et de démarrage d'Angular, un framework MVC côté client développé en JavaScript. Il explique les concepts clés d'Angular tels que le modèle MVC, les Single Page Applications (SPA) et les langages utilisés. Le document guide également sur les prérequis d'installation d'Angular, notamment l'installation de Node.js, Visual Studio Code et Angular CLI. Il détaille ensuite les étapes de création d'un nouveau projet Angular et de lancement de l'application. Enfin, il explique comment ouvrir le projet Angular dans l'éditeur Visual Studio Code.

Typology: Summaries

2022/2023

Uploaded on 11/27/2023

ghaya-manai
ghaya-manai 🇹🇳

4 documents

1 / 6

Toggle sidebar

This page cannot be seen from the preview

Don't miss anything!

bg1
Année Universitaire : 2022|2023
Enseignante: Boussetta imtinen
Atelier Framework Web Côté Client
Atelier n° 1: Installation et Démarrage d’Angular
Objectifs
• Découvrir, installer et configurer l’environnement de développement,
• Installation et configuration d’Angular,
• Démarrer un projet avec Angular,
• Ouvrir la structure d’un projet Angular dans l’éditeur.
• Qu’est-ce que Angular?
Angular est un framework MVC côté client, développé en JavaScript, ce qui est obligatoire pour créer
une application moderne à page unique (ou même un site internet).
• Le modèle MVC
Angular a une courbe d'apprentissage assez courte qui consiste principalement à appréhender la
terminologie et la “pensée MVC”. MVC signifie Modèle-VueContrôleur :
Ces trois pôles ont des responsabilités différentes :
Modèle:
Structure de données représentant une entité de l'application, généralement transmise en
JSON.
Vue:
pf3
pf4
pf5

Partial preview of the text

Download Atelier Framework Web Côté Client and more Summaries Operating Systems in PDF only on Docsity!

Année Universitaire : 2022|

Enseignante: Boussetta imtinen

Atelier Framework Web Côté Client

Atelier n° 1: Installation et Démarrage d’Angular

Objectifs

  • Découvrir, installer et configurer l’environnement de développement,
  • Installation et configuration d’Angular,
  • Démarrer un projet avec Angular,
  • Ouvrir la structure d’un projet Angular dans l’éditeur.

• Qu’est-ce que Angular?

Angular est un framework MVC côté client, développé en JavaScript, ce qui est obligatoire pour créer une application moderne à page unique (ou même un site internet).

• Le modèle MVC

Angular a une courbe d'apprentissage assez courte qui consiste principalement à appréhender la terminologie et la “pensée MVC”. MVC signifie Modèle-VueContrôleur : Ces trois pôles ont des responsabilités différentes :  Modèle:  Structure de données représentant une entité de l'application, généralement transmise en JSON.  Vue:

Contient la présentation graphique à renvoyer à l’utilisateur.  Contrôleur:  Traite les actions utilisateur (via des requêtes), demande au modèle d’effectuer les changements, puis passe les données à la vue.

  • Single Page Application: SPA Angular permet de créer la partie front end des applications web de type SPA (Single Page Application). SPA : c’est une application Web avec une page parent et des pages enfants (vues partielles) sont chargées en fonction de la demande. Dans SPA, toutes les ressources requises sont chargées avec la demande initiale et le reste des ressources est chargé en fonction de la demande. Le but est d’éviter le chargement d’une nouvelle page à chaque action demandée et d’améliorer ainsi l’expérience utilisateur.  L'application traditionnelle : à chaque demande de l'utilisateur, elle revient au serveur etaffiche la nouvelle page avec le rechargement de la page.

Pour faciliter le développement d’une application Angular, les outils suivant doivent être installés :

  • Node.js : sera notre plateforme de développement javascript. Pas le choix, sans Node.js ça ne marchera pas.
  • Visual studio Code : sera notre éditeur de code. Le choix est totalement arbitraire mais pour un outil Microsoft c'est une petite merveille.
  • Angular CLI : est un outil permettant de créer, construire, générer et tester vos applications etlibrairies Angular.
  • Préparer l’Environnement de Développement Pour préparer l’installation d’Angular, il faut commencer par réaliser les étapes suivantes :
  • Installer l’éditeur de texte : Visual Studio Code depuis https://code.visualstudio.com// HYPERLINK "https://code.visualstudio.com/".
  • Installer Node.js depuis https://nodejs.org/en/download/ HYPERLINK "https://nodejs.org/en/download/". Remarque : Node JS installe l’outil npm (Node Package Manager) qui permet de télécharger et installer des bibliothèques Java Script.
  • Ouvrir l’invite de commande CMD et taper la commande node --version ou node - v pour vérifier la version de Node.js.
  • Vérifier la version de npm en tapant : npm --version ou npm - v. Remarque : On peut mettre à jour le npm en tapant : npm install npm - g.
  • Installer la dernière version de d'angular-cli « environnement pour créer les composants etservices de l’application » à l’aide du gestionnaire de dépendances de Node JS qui est « npm » en tapant la commande suivante sur l’invite de cmd : npm install - g @angular/cli. Remarque 1 : On peut faire l’installation d'angular-cli version spécifique en tapant : npm install - g @angular/[email protected]. Remarque 2 : L'installation de ce module mettra à votre disposition la commande ng qui vous permettra plus tard de créer votre application Angular.
  • Tester la version installée en tapant : ng version

Remarque :

  • Pour désinstaller Angular : npm uninstall - g @angular/cli.
  • Pour vider le cache : npm cache verify (version 5+ de NPM), npm cache clean (avant la version 5).
  • Création d’un nouveau projet Angular Pour créer un nouvel espace de travail et une application de démarrage initiale :
  • Ouvrez l’invite de cmd dans le répertoire où vous voulez créer votre projet.
  • Tapez la commande : ng new my- app. Remarque :
  • La CLI Angular installe les packages Angular npm nécessaires et d'autres dépendances. Cela peut prendre quelques minutes.
  • L'interface de ligne de commande crée un nouvel espace de travail et une applicationde bienvenue simple, prête à fonctionner.
  • Lancer l'application La CLI angulaire comprend un serveur, afin que vous puissiez créer et servir votre application Localement :
  • Accédez au dossier de l'espace de travail, tel que my-app :