AngularJS sur Mac

Pour continuer dans le développement web, nous allons aujourd'hui parler d'AngularJS. Je vais grandement m'inspirer des tutoriels que j'ai pu suivre et trouver sur le web. La documentation française n'est pas des plus claires d'après moi. Le meilleur cours sur le sujet restant celui d'OpenClassrooms, sans conteste.

Dans mon cas je suis sur un MacBook Pro et nous allons devoir beaucoup utiliser le terminal de votre mac, il faut aller le chercher dans le Launchpad et "Autre" :

te-le-chargement

Pré-requis :

  • Homebrew
  • NodeJs
  • NPM

node-npm-homebrew

  1. On démarre en installant Homebrew :

    usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

  2. Puis on enchaîne avec NodeJs et NPM :

    brew install node

  3. Après quoi on va pouvoir updater NPM, le gestionnaire de paquet pour Javascript :

    npm update [-g] [...]

  4. Et ensuite attaquer le dur en installant les trois outils qui forment le noyau du fonctionnement d'AngularJS

Capture-d-e-cran-2014-10-11-a--15.01.04

npm install -g bower

npm install -g yo

npm install -g generator-angular

Précision : l'option -g permet d'installer sur l'ensemble du système de fichier de votre mac, le package choisi, et non uniquement en local dans une direction choisie (exemple : home/workspace).

  1. Bien, créons un répertoire de travail puis un répertoire pour notre première application :

    mkdir workspace ; mkdir workspace/first-app ; cd workspace/first-app

  2. On lance l'initialisation de notre application Angular avec :

    yo angular

Vous l'aurez remarqué, dans le projet, se trouve un répertoire app. Sans trop de surprise, c'est dans ce répertoire que se trouve le code de votre projet. Voyons les répertoires et fichiers importants que nous y trouvons:

  • Répertoire images : c'est dans ce répertoire que nous mettrons les images.

  • Répertoire styles : l'ensemble des feuilles de style CSS iront dans ce dossier.

  • Répertoire views : c'est ici que nous mettrons les templates HTML.

  • Répertoire scripts : c'est le cœur de l'application. C'est notamment ici qu'iront les contrôleurs, services et directives Angular.

  • Page index.html : c'est le point d'entrée de notre application. Comme il s'agit d'une application web, il s'agit donc d'une page HTML.

Voilà les répertoires et fichiers importants auxquels nous allons prêter longuement attention au cours des prochains chapitres.

On dénombre 3 fichiers de configurations qui se trouvent TOUS à la racine de votre projet:

  • package.json

  • bower.json

  • Gruntfile.js

L'ajout d'un module à votre projet se fera par la commande suivante :

npm install nomdumodule

Les tests

Premier test de grunt dans le terminal à la racine du projet (chez moi Home/workspace/first-app):

grunt test

Le navigateur doit afficher ceci :

Capture-d-e-cran-2017-12-31-a--10.12.52

Et le terminal :

Capture-d-e-cran-2014-10-12-a--10.38.15

Le cas échéant il faudra pousser cette commande :

sudo npm install grunt-karma --save-dev

On démarre un test dans son navigateur en tapant grunt à la racine du dossier de son projet toujours, puis :

grunt serve

Ce qui va lancer le serveur http de votre projet et ouvrir automatiquement une page web dans le navigateur web préférentiel de votre ordinateur, sur le port 9000, soit localhost:9000

Capture-d-e-cran-2018-01-02-a--18.59.58

Le truc vraiment sympa avec Angular et les autres templates Javascript en général, c'est le côté immédiat des actualisations de vos modifications sur les fichiers de votre projet. En effet, une fois la sauvegarde effectuée sur le fichier index.html par exemple, votre page web va automatiquement s'actualiser en temps réel.

Bootstrap dans votre projet Angular

use-bootstrap-and-angularjs

Installer Bootstrap

Maintenant que le projet Angular est prêt, nous pouvons continuer et ajouter Bootstrap au projet. Il existe différentes façons d'ajouter la bibliothèque à votre projet, nous allons en décrire deux dont une plus précisèment.

Ajout de Bootstrap à partir de CDN

Ouvrir le fichier src / index.html et insérer le contenu indiqué ci-dessous.

Capture-d-e-cran-2018-01-03-a--19.01.30

<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://bootswatch.com/cerulean/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

L'include Bootstrap dans votre projet nous devons ajouter deux fichiers:

  • Bootstrap CCS fichier
  • Bootstrap fichier JavaScript

Les parties JavaScript de Bootstrap dépendent de jQuery. Nous avons donc aussi besoin du fichier de bibliothèque jQuery JavaScript.

Tous ces fichiers peuvent être directement ajoutés à partir d'un CDN (Content Delivery Network) à votre projet. Les liens CDN pour Bootstrap peuvent être trouvés sur http://getbootstrap.com/getting-started/ et le lien vers jQuery peut être trouvé sur https://code.jquery.com/.

Installation de Boostrap depuis NPM

On ajoute le module au dossier nodemodules et au fichier package.json via :

$ npm install bootstrap@3 jquery --save

Pour utiliser le module Bootstrap, utilisez soit la première solution en ajoutant les liens dans le index.html soit en ajoutant ceci à angular-cli.json

"styles": [
    "styles.css",
    "../nodemodules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
    "../nodemodules/jquery/dist/jquery.min.js",
    "../nodemodules/bootstrap/dist/js/bootstrap.min.js"
  ],

La partie fun : le codage

Maintenant votre projet peut-être codé entièrement en boostrap en ajoutant par exemple une navbar comme j'ai pu le faire dans la dernière capture d'écran :

Capture-d-e-cran-2018-01-03-a--19.01.30-1

Etc..

AngularJS sur Mac
Share this