Créer rapidement une application Angular (Part1/3)

Nous allons voir dans ce blog comment très rapidement, (moins de 10 min) et "quasiment" sans coder, on peut démarrer un projet Angular à l'aide de l'outil officiel AngularCLI.

Ce billet fait partie d'un ensemble de billets 🙂

Nous partons du principe que vous n'avez aucun environnement NodeJS d'installé.

Installation de Node sous Ubuntu

On peut choisir deux options:

  • Docker, pour récupérer un outil Node prépackagé
  • En local.

Nous choisirons l'option locale, plus pratique à mon avis pour un usage quotidien.

$>curl -sL https://deb.nodesource.com/setup_7.x | sudo bash -
$>sudo apt-get install nodejs
Installation de NodeJs 7

Configuration de l'environnement Node

Par défaut, le gestionnaire de paquets node installe les paquets localement à chaque projet. Cela a pour:

  • avantages :
    • de bien cloisoner l'arbre des dépendances au projet
    • de finir finir son projet, rm -rf projet et de ne plus avoir les dépendances en libérant l'espaces disques non utiles
  • inconvénient :
    • de ne pouvoir utiliser les paquets que depuis notre projet

Pour palier à cela, il faut installer les paquets de manière globale (transversales aux projets). L'avantage est que l'on peut utiliser des binaires directement.

Malheureusement sous Ubuntu (linux, en général), l'installation du package (Node et ses modules) est réalisée dans le répertoire "/usr/lib".
Ceci impose donc d'avoir les droits root pour y écrire dedans, or souvent l'installation d'un outil Node est liée à l'utilisateur. Du coup, l'installation par le root n'est pas la bonne solution (et ce n'est pas pratique de devoir faire un sudo avant chaque commande :p).

Pour palier à cela, NodeJS nous permet de configurer son installation localement à un utilisateur. Pour cela, créer le fichier .npmrc au sein de votre répertoire $HOME avec le contenu suivant:

prefix=/home/<username>/npm
$HOME/.npmrc

On pensera à rajouter au passage les répertoires des binaires NodeJS dans le path afin de pouvoir utiliser des exécutables en provenance de paquets NodeJS:

# ~/.profile: executed by the command interpreter for login shells.

# if running bash
if [ -n "$BASH_VERSION" ]; then
    # include .bashrc if it exists
    if [ -f "$HOME/.bashrc" ]; then
	. "$HOME/.bashrc"
    fi
fi

# set PATH so it includes user's private bin directories
PATH="$PATH:$HOME/bin:$HOME/.local/bin:$HOME/npm/bin"
$HOME/.profile

Installation de YARN (optionnelle)

Pour ceux qui aiment comme moi la nouveauté, je vous invite à essayer YARN, un outils similaire à NPM (le gestionnaire de paquets natifs de Node), plus rapide:

$>curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
$>echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
$>sudo apt-get update && sudo apt-get install yarn
Installation de YARN sous Ubuntu

Installation de AngularCLI sous Ubuntu

Afin d'accéder à la console CLI Angular, nous allons l'installer désormais sur notre machine de manière globale:

$>npm install -g @angular/cli
Installation d'Angular CLI

Désormais on est presque prêt à utiliser Angular CLI:

$>ng --help
Test de l'installation AngularCLI

Normalement vous devriez voir l'aide en ligne très complète fournie par l'équipe d'Angular CLI:

Avant de démarrer, il n nous reste plus qu'une dernière manipulation à réaliser: demander à AngularCLI d'utiliser YARN au lieu de NPM:

$>ng set --global packageManager=yarn
Configuration d'AngularCLI pour utiliser yarn

Création du projet

Notre petit projet sera simple. Il s'agira d'une application WEB avec 2 simples pages et une petite barre de navigation entre les 2 pages.

Initialisation

Avec AngularCLI, rien de plus facile que de générer un nouveau projet:

$> ng new --prefix myapp --style=scss --routing --directory angular myapp
Initialisation d'un nouveau projet

Bien entendu, ces options sont liées au contexte du projet que nous allons construire. Ils peuvent varier selon vos besoins.

Vous devriez obtenir le projet ci dessous:

Test de l'application

On lance yarn start et on doit obtenir le résultat suivant avec l'écran principal:

Ajout des 2 pages

On rajoute rapidement les écrans souhaités avec AngularCLI via:

$>ng generate component home 
$>ng generate component talk
Ajout des deux écrans via AngularCLI

Puis on ajoute nos deux routes correspondants à nos deux nouveaux écrans:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { TalkComponent } from './talk/talk.component';

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  }, 
  {
    path: 'talk',
    component: TalkComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
app-routing.module.ts

Désormais si on va sur l'url: http://localhost:4200, on tombera sur Home Works ! et si on va sur http://localhost:4200/talk: Talk Works !

Ajout de la barre de navigation

Afin que cela soit plus "user-friendly", nous allons rajouter une petite barre de navigation pour l'instant toute simple 🙂

<h1>{{title}}</h1>
<nav>
  <a class="nav-item nav-link" routerLink="/" routerLinkActive="active">Home</a>
  <a class="nav-item nav-link" routerLink="/talk" routerLinkActive="active">Talk</a>
</nav>
<router-outlet></router-outlet>
app.component.html

Et voilà, vous venez d'initialiser rapidement un projet Angular avec 2 écrans sur lequel vous avez la possibilité de naviguer entre 🙂

 

Conclusion

On vient de voir comment très rapidement:

  • monter un environnement Node sous Ubuntu
  • initialiser un projet Angular avec une navigation entre deux écrans de manière ultra rapide à l'aide d'AngularCLI

Happy coding et see you soon pour la prochaine partie de ce sujet .... pas de teasing, vous verrez qu'on va avancer petit à petit pour obtenir à la fin une belle petite application WEB opérationnelle 🙂

 

Référence

Source

Vous pouvez retrouver les sources de cette étape du projet sur mon github

2 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.