Angular

Les Solutions Digitales d'Aujourd'hui et de Demain

Je transforme vos idées en réalité numérique

Contactez-nous

La solution ANGULAR

Angular est un framework front-end de la firme Google pour construire des applications web dynamique et performante (SPA - Single Page Aplication). Il se distingue par son approche structurée basée sur des composants, des modules et une forte intégration d'outils modernes.Angular fournit une large suite d'outils, APIs, et de librairies pour simplifier et rationaliser votre flux de développement. Il est basé sur l'architecture Modèle-Vue-Contrôleur qui favorise des applications extensibles, maintenable, testable, et standardisé. Pour travailler correctement avec Angular, il est préférable d'avoir des connaissances de base en HTML, CSS, et surtout en JavaScript. Création du fichier index.html contenu dans l'application.


{{getName()}}'s To Do List

<table class="table table-striped table-bordered"> <thead>> <tr><th></th><th>Description</th><th>Done</th></tr> </thead> <tbody> <tr *ngFor="let item of getTodoItems(); let i = index"> <td>{{ i + 1 }}</td> <td>{{ item.action }}</td> <td [ngSwitch]="item.done"> <span *ngSwitchCase="true">Yes</span> <span *ngSwitchDefault>No</span> </td> </tr> </tbody> </table>
Nous avons mis en avant dans ce morceau de code le double binding {{item}}.

Environnement de travail

Pour développer une application avec Angular, il vous faut installer node.js qui est un environnement d'exécution JavaScript gratuit, open-source et multiplateforme. Après installation, vous pouvez saisir la commande suivante dans l'invite de commande pour savoir si Node.js a été bien installé et voir la version installée.

node -v 
Il est à noter que Node.js est installer avec NPM(Node Package Manager) qui télécharge des paquets et qui gère les dépendances entre elles. On peur mettre npm à jour en faisant  :
npm install -g npm@ x.xx.x
Les x.xx.x représentant la version que l'on souhaite installer. Le développement avec Angular peur se faire dans n'importe qu'elle éditeur de programmation. Ici nous choisirons VS Code qui est connue de tous. Le choix final à faire est celui du navigateur qui vous permettra de vérifier votre travail pendant le développement.

Coder votre première application avec ANGULAR

Après l'installation de Node.js,de NPM, d'un navigateur, il vient le temps de créer une structure de dossier pour le projet. Il faudra créer un dossier dans lequel sera stocké tous les fichiers du projet. Pour configurer le projet, il faut créer un fichier package.json et définir le contenu.


{
    "dependencies": {
        "@angular/common": "2.2.0",
        "@angular/compiler": "2.2.0",
        "@angular/core": "2.2.0",
        "@angular/forms": "2.2.0",
        "@angular/platform-browser": "2.2.0",
        "@angular/platform-browser-dynamic": "2.2.0",
        "reflect-metadata": "0.1.8",
        "rxjs": "5.0.0-beta.12",
        "zone.js": "0.6.26",
        "core-js": "2.4.1",
        "classlist.js": "1.1.20150312",
        "systemjs": "0.19.40",
        "bootstrap": "4.0.0-alpha.4"
    },
    "devDependencies": {
        "lite-server": "2.2.2",
        "typescript": "2.0.3",
        "typings": "1.4.0",
        "concurrently": "3.1.0"
    },
    "scripts": {
        "start": "consurrently\"npm run  tscwatch\"\"npm run lite\"",
        "tsc": "tsc",
        "tscwatch": "tsc -w",
        "lite": "lite-server",
        "typings": "typings"
    }
}
                            

Nos Coordonnées

  • Chemin des Prés, Meylan
  • +33 9 80 69 27 39
  • service@appsdeal.fr