Elm - Syntaxe de base

Ce chapitre explique comment écrire un programme simple dans elm.

Step 1 − Create a directory HelloApp in VSCode

Maintenant, créez un fichier - Hello.elm dans ce répertoire.

Le diagramme ci-dessus montre le dossier du projet HelloApp et terminal ouvert en VSCode.

Step 2 − Install the necessary elm packages

Le gestionnaire de packages dans elm est elm-package . Installez le package elm-lang / html . Ce package nous aidera à afficher la sortie du code elm dans le navigateur.

Traverser vers le HelloApp dossier de projet en faisant un clic droit sur Fichier → Ouvrir dans l'invite de commande dans VSCode.

Exécutez la commande suivante dans la fenêtre du terminal -

C:\Users\dell\Elm\HelloApp> elm-package install elm-lang/html

Les fichiers / dossiers suivants sont ajoutés au répertoire du projet lors de l'installation du package.

• elm-package.json (fichier), stocke les métadonnées du projet
• elm-stuff (dossier), stocke les packages externes

Le message suivant apparaîtra une fois le package installé avec succès.

Step 3 − Add the following code to the Hello.elm file

-- importing Html module and the function text
import Html exposing (text)

-- create main method
main =
-- invoke text function
text "Hello Elm from TutorialsPoint"

Le programme ci-dessus affichera un message de chaîne Hello Elm from TutorialsPoint dans le navigateur.

Pour cela, nous devons importer la fonction text dans le Htmlmodule. La fonction de texte est utilisée pour imprimer toute valeur de chaîne dans le navigateur. La méthode principale est le point d'entrée d'un programme. La méthode main appelle la fonction de texte et lui transmet une valeur de chaîne.

Step 4 − Compile the project

Exécutez la commande suivante dans la fenêtre du terminal VSCode.

elm make Hello.elm

La sortie de la commande ci-dessus est comme indiqué ci-dessous -

//update path to the proj folder in the command elm make
C:\Users\dell\elm\HelloApp>elm make Hello.elm
Success! Compiled 38 modules.
Successfully generated index.html

La commande ci-dessus générera un index.htmlfichier. Le compilateur elm convertit le fichier .elm en JavaScript et l'incorpore dans leindex.html fichier.

Step 5 − Open the index.html in the browser

Ouvrez le fichier index.html dans n'importe quel navigateur. La sortie sera comme indiqué ci-dessous -

Commentaires dans Elm

Les commentaires sont un moyen d'améliorer la lisibilité d'un programme. Les commentaires peuvent être utilisés pour inclure des informations supplémentaires sur un programme comme l'auteur du code, des conseils sur une construction de fonction, etc. Les commentaires sont ignorés par le compilateur.

Elm prend en charge les types de commentaires suivants -

• Commentaires sur une seule ligne (-) - Tout texte entre un - et la fin d'une ligne est traité comme un commentaire.

• Commentaires sur plusieurs lignes ({- -}) - Ces commentaires peuvent s'étendre sur plusieurs lignes.

Illustration

-- this is single line comment

{- This is a
   Multi-line comment
-}

Lignes et retrait

Elm ne fournit pas d'accolades pour indiquer des blocs de code pour les définitions de fonction ou le contrôle de flux. Les blocs de code sont indiqués par une indentation de ligne, qui est appliquée de manière rigide. Tous les relevés d'un bloc doivent être mis en retrait du même montant. Par exemple -

module ModuleIf exposing (..)
x = 0

function1 =
   if x > 5 then
      "x is greater"
   else
      "x is small"

Cependant, le bloc suivant génère une erreur -

-- Create file ModuleIf.elm
module ModuleIf exposing (..)
x = 0

function1 =
   if x > 5 then
      "x is greater"
         else --Error:else indentation not at same level of if statement
      "x is small"

Ainsi, dans Elm, toutes les lignes continues indentées avec le même nombre d'espaces formeraient un bloc.

C:\Users\admin>elm repl
---- elm-repl 0.18.0 -----------------------------------------------------------
   :help for help, :exit to exit, more at 
   <https://github.com/elm-lang/elm-repl>
   ---------------------------------------
   -----------------------------------------

> import ModuleIf exposing(..) -- importing module from ModuleIf.elm file
>function1 -- executing function from module
-- SYNTAX PROBLEM ---------------------------------------------------

I need whitespace, but got stuck on what looks like a new declaration. 
You are either missing some stuff in the declaration above or just need to add some spaces here:
7| else
   ^
I am looking for one of the following things:

   whitespace