01. Initialisation du projet avec NPM comme outil de build
Pour commencer ce cours, nous allons dans cette première leçon mettre en place notre environnement de développement en utilisant seulement NPM. Il faut donc que vous connaissiez les bases de NPM. Si ce n’est pas le cas, vous pouvez consulter la leçon sur NPM dans le cours NodeJs, NPM et outils javascript.
Initialisation
Première étape: créons ensemble un répertoire pour notre projet que j'appelle showtheque-angularjs. Allez dedans et initiez un nouveau package NPM:
$> npm init -y
Ensuite, nous allons créer un répertoire src qui contiendra les sources de notre application.
Puis, dans ce répertoire créons un fichier index.html qui sera la page d'entrée de notre application.
Installation des dépendances
Avant d'aborder Angular, commençons par nos autres dépendances: Bootstrap pour le style, toastr pour afficher des messages et jQuery qui est necessaire pour ces deux dépendances.
$> npm install bootstrap jquery --save
Ensuite, au tour d'Angular, comme nous utiliserons le routing plus tard, installons le aussi:
$> npm install angular angular-route --save
Comme pour tout bon développement web il faut un serveur, ajoutons en un en tant que dépendance de développement; je choisi ici, lite-server:
$> npm install lite-server --save-dev
Comme je travaille toujours en local, il ne reste plus qu'à ajouter dans la section script du package.json la commande relative à ce serveur. Ce qui donne au final:
{
"name": "showtheque-front-angularjs",
"version": "1.0.0",
"main": "index.html",
"scripts": {
"lite": "lite-server",
"start": "npm run lite"
},
"dependencies": {
"angular": "^1.5.8",
"bootstrap": "^3.3.7",
"jquery": "^3.1.1",
"angular-route": "^1.5.8"
},
"devDependencies": {
"lite-server": "2.2.2"
}
}
Ajout des dépendances
Après les avoir récupérées, il faut maintenant ajouter nos 4 dépendances dans notre fichier index.html. Attention, jquery doit être en première position.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ShowTheque - AngularJS</title>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../node_modules/toastr/build/toastr.min.css">
</head>
<body>
<h1>ShowTheque - AngularJS</h1>
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../node_modules/toastr/build/toastr.min.js"></script>
<script src="../node_modules/angular/angular.min.js"></script>
<script src="../node_modules/angular-route/angular-route.min.js"></script>
</body>
</html>
Il ne reste plus qu'à lancer notre application et vérifier que nous avons bien notre titre et aucune erreur
$> npm start