Angular Tutoriel
Commencer avec Angular
Recherche…
Remarques
Angular (communément appelé " Angular 2+ " ou " Angular 2 ") est une infrastructure Web frontale open source basée sur TypeScript, dirigée par Angular Team chez Google et par une communauté d'individus et de sociétés. parties du flux de travail du développeur lors de la création d'applications Web complexes. Angular est une réécriture complète de la même équipe qui a construit AngularJS . ¹
Le framework est constitué de plusieurs bibliothèques , certaines centrales ( @ angular / core par exemple) et d'autres optionnelles ( @ angular / animations ).
Vous écrivez des applications angulaires en composant des modèles HTML avec un balisage angularisé, en écrivant des classes de composants pour gérer ces modèles, en ajoutant une logique d’application dans les services et en intégrant des composants et des services dans des modules .
Ensuite, vous lancez l'application en amorçant le module racine . Angular prend le relais en présentant le contenu de votre application dans un navigateur et en répondant aux interactions des utilisateurs en fonction des instructions que vous avez fournies.
La partie la plus fondamentale du développement d'applications angulaires est sans doute les composants . Un composant est la combinaison d'un modèle HTML et d'une classe de composants qui contrôle une partie de l'écran. Voici un exemple de composant qui affiche une chaîne simple:
src / app / app.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>` }) export class AppComponent { name = 'Angular'; }
Chaque composant commence par une fonction de décorateur @Component qui prend un objet de métadonnées . L'objet métadonnées décrit comment le modèle HTML et la classe de composants fonctionnent ensemble.
La propriété selector indique à Angular d'afficher le composant dans une <my-app> dans le fichier index.html .
index.html (dans la balise
body)<my-app>Loading AppComponent content here ...</my-app>
La propriété template définit un message dans un en-tête <h1> . Le message commence par "Hello" et se termine par {{name}} , qui est une expression de liaison par interpolation angulaire. Au moment de l'exécution, Angular remplace {{name}} par la valeur de la propriété name du composant. La liaison d'interpolation est l'une des nombreuses fonctionnalités angulaires que vous découvrirez dans cette documentation. Dans l'exemple, modifiez la propriété name la classe de composants de 'Angular' à 'World' et voyez ce qui se passe.
Cet exemple est écrit en TypeScript , un sur-ensemble de JavaScript. Angular utilise TypeScript car ses types facilitent la productivité des développeurs avec les outils. En outre, presque tout le support est pour TypeScript et l'utilisation de JavaScript simple pour écrire votre application sera difficile . Écrire du code angulaire en JavaScript est cependant possible; Ce guide explique comment.
Plus d'informations sur l' architecture d'Angular peuvent être trouvées ici
Versions
| Version | Date de sortie |
|---|---|
| 5.0.0-beta.1 (dernière) | 2017-07-27 |
| 4.3.2 | 2017-07-26 |
| 5.0.0-beta.0 | 2017-07-19 |
| 4.3.1 | 2017-07-19 |
| 4.3.0 | 2017-07-14 |
| 4.2.6 | 2017-07-08 |
| 4.2.5 | 2017-06-09 |
| 4.2.4 | 2017-06-21 |
| 4.2.3 | 2017-06-16 |
| 4.2.2 | 2017-06-12 |
| 4.2.1 | 2017-06-09 |
| 4.2.0 | 2017-06-08 |
| 4.2.0-rc.2 | 2017-06-01 |
| 4.2.0-rc.1 | 2017-05-26 |
| 4.2.0-rc.0 | 2017-05-19 |
| 4.1.3 | 2017-05-17 |
| 4.1.2 | 2017-05-10 |
| 4.1.1 | 2017-05-04 |
| 4.1.0 | 2017-04-26 |
| 4.1.0-rc.0 | 2017-04-21 |
| 4.0.3 | 2017-04-21 |
| 4.0.2 | 2017-04-11 |
| 4.0.1 | 2017-03-29 |
| 4.0.0 | 2017-03-23 |
| 4.0.0-rc.6 | 2017-03-23 |
| 4.0.0-rc.5 | 2017-03-17 |
| 4.0.0-rc.4 | 2017-03-17 |
| 2.4.10 | 2017-03-17 |
| 4.0.0-rc.3 | 2017-03-10 |
| 2.4.9 | 2017-03-02 |
| 4.0.0-rc.2 | 2017-03-02 |
| 4.0.0-rc.1 | 2017-02-24 |
| 2.4.8 | 2017-02-18 |
| 2.4.7 | 2017-02-09 |
| 2.4.6 | 2017-02-03 |
| 2.4.5 | 2017-01-25 |
| 2.4.4 | 2017-01-19 |
| 2.4.3 | 2017-01-11 |
| 2.4.2 | 2017-01-06 |
| 2.4.1 | 2016-12-21 |
| 2.4.0 | 2016-12-20 |
| 2.3.1 | 2016-12-15 |
| 2.3.0 | 2016-12-07 |
| 2.3.0-rc.0 | 2016-11-30 |
| 2.2.4 | 2016-11-30 |
| 2.2.3 | 2016-11-23 |
| 2.2.2 | 2016-11-22 |
| 2.2.1 | 2016-11-17 |
| 2.2.0 | 2016-11-14 |
| 2.2.0-rc.0 | 2016-11-02 |
| 2.1.2 | 2016-10-27 |
| 2.1.1 | 2016-10-20 |
| 2.1.0 | 2016-10-12 |
| 2.1.0-rc.0 | 2016-10-05 |
| 2.0.2 | 2016-10-05 |
| 2.0.1 | 2016-09-23 |
| 2.0.0 | 2016-09-14 |
| 2.0.0-rc.7 | 2016-09-13 |
| 2.0.0-rc.6 | 2016-08-31 |
| 2.0.0-rc.5 | 2016-08-09 |
| 2.0.0-rc.4 | 2016-06-30 |
| 2.0.0-rc.3 | 2016-06-21 |
| 2.0.0-rc.2 | 2016-06-15 |
| 2.0.0-rc.1 | 2016-05-03 |
| 2.0.0-rc.0 | 2016-05-02 |
Installation d'angulaire à l'aide d'angles
Cet exemple est une configuration rapide de Angular et comment générer un exemple de projet rapide.
Conditions préalables:
- Node.js 6.9.0 ou supérieur.
- npm v3 ou plus ou fil .
- Typings v1 ou plus.
Ouvrez un terminal et exécutez les commandes une par une:
npm install -g typings ou yarn global add typings
npm install -g @angular/cli ou yarn global add @angular/cli
La première commande installe globalement la bibliothèque de typages (et ajoute l’exécutable typings à PATH). Le second installe globalement @ angular / cli , en ajoutant l'exécutable ng à PATH.
Pour configurer un nouveau projet
Naviguez avec le terminal dans un dossier où vous souhaitez configurer le nouveau projet.
Exécutez les commandes:
ng new PROJECT_NAME
cd PROJECT_NAME
ng serve
C'est ça, vous avez maintenant un exemple de projet simple réalisé avec Angular. Vous pouvez maintenant naviguer vers le lien affiché dans le terminal et voir ce qu’il exécute.
Ajouter à un projet existant
Accédez à la racine de votre projet en cours.
Exécutez la commande:
ng init
Cela ajoutera l'échafaudage nécessaire à votre projet. Les fichiers seront créés dans le répertoire en cours, assurez-vous donc de l'exécuter dans un répertoire vide.
Lancer le projet localement
Pour voir et interagir avec votre application pendant son exécution dans le navigateur, vous devez démarrer un serveur de développement local hébergeant les fichiers de votre projet.
ng serve
Si le serveur a démarré avec succès, il doit afficher une adresse sur laquelle le serveur est exécuté. Est habituellement ceci:
http://localhost:4200
Ce serveur de développement local est prêt à être utilisé avec Hot Module Reloading. Ainsi, toute modification apportée au code HTML, texte dactylographié ou CSS, déclenchera le rechargement automatique du navigateur (mais peut être désactivé si vous le souhaitez).
Composants, directives, tuyaux et services générateurs
La commande ng generate <scaffold-type> <name> (ou simplement ng g <scaffold-type> <name> ) vous permet de générer automatiquement des composants angulaires:
# The command below will generate a component in the folder you are currently at
ng generate component my-generated-component
# Using the alias (same outcome as above)
ng g component my-generated-component
# You can add --flat if you don't want to create new folder for a component
ng g component my-generated-component --flat
# You can add --spec false if you don't want a test file to be generated (my-generated-component.spec.ts)
ng g component my-generated-component --spec false
Il existe plusieurs types d’échafaudages possibles:
| Type d'échafaudage | Usage |
|---|---|
| Module | ng g module my-new-module |
| Composant | ng g component my-new-component |
| Directif | ng g directive my-new-directive |
| Tuyau | ng g pipe my-new-pipe |
| Un service | ng g service my-new-service |
| Classe | ng g class my-new-class |
| Interface | ng g interface my-new-interface |
| Enum | ng g enum my-new-enum |
Vous pouvez également remplacer le nom du type par sa première lettre. Par exemple:
ng gm my-new-module pour générer un nouveau module ou ng gc my-new-component pour créer un composant.
Bâtiment / groupement
Lorsque vous avez fini de créer votre application Web Angular et que vous souhaitez l'installer sur un serveur Web tel qu'Apache Tomcat, il vous suffit d'exécuter la commande de génération avec ou sans l'indicateur de production. La production minimisera le code et optimisera pour un environnement de production.
ng build
ou
ng build --prod
Recherchez ensuite dans le répertoire racine des projets un dossier /dist contenant la version.
Si vous souhaitez bénéficier des avantages d'une offre de production plus petite, vous pouvez également utiliser la compilation de modèles Ahead-of-Time, qui supprime le compilateur de modèle de la version finale:
ng build --prod --aot
Test d'unité
Angular fournit des tests unitaires intégrés, et chaque élément créé par angular-cli génère un test élémentaire de base, qui peut être utilisé. Les tests unitaires sont écrits en jasmine et exécutés via Karma. Pour lancer le test, exécutez la commande suivante:
ng test
Cette commande exécute tous les tests du projet et les ré-exécute chaque fois qu'un fichier source change, qu'il s'agisse d'un test ou d'un code de l'application.
Pour plus d'infos, visitez également: la page angular-cli github
Programme angulaire "Hello World"
Conditions préalables:
Mise en place de l'environnement de développement
Avant de commencer, nous devons configurer notre environnement.
Installez Node.js et npm s'ils ne sont pas déjà sur votre machine.
Vérifiez que vous exécutez au moins le noeud 6.9.x et npm 3.xx en exécutant node -v et npm -v dans une fenêtre de terminal / console. Les anciennes versions génèrent des erreurs, mais les nouvelles versions sont correctes.
Installez la CLI angulaire globalement en utilisant
npm install -g @angular/cli.
Etape 1: Créer un nouveau projet
Ouvrez une fenêtre de terminal (ou une invite de commande Node.js dans Windows).
Nous créons un nouveau projet et une application squelette en utilisant la commande:
ng new my-app
Ici, le ng est pour angulaire. Nous obtenons une structure de fichier comme celle-ci.
Il y a beaucoup de fichiers. Nous n'avons pas à nous soucier de tous maintenant.
Étape 2: servir l'application
Nous lançons notre application en utilisant la commande suivante:
ng serve
Nous pouvons utiliser un drapeau -open (ou simplement -o ) qui ouvrira automatiquement notre navigateur sur http://localhost:4200/
ng serve --open
Naviguez dans le navigateur jusqu'à l'adresse http://localhost:4200/ . Cela ressemble à ceci:
Étape 3: Édition de notre premier composant angulaire
La CLI a créé le composant Angular par défaut pour nous. C'est le composant racine et il s'appelle app-root . On peut le trouver dans ./src/app/app.component.ts .
Ouvrez le fichier de composant et modifiez la propriété title de Welcome to app!! à Hello World . Le navigateur se recharge automatiquement avec le titre révisé.
Code d'origine: Notez le title = 'app';
Code modifié: la valeur du title est modifiée.
De même, il y a un changement dans ./src/app/app.component.html .
HTML original
HTML modifié
Notez que la valeur du title du ./src/app/app.component.ts sera affichée. Le navigateur se recharge automatiquement lorsque les modifications sont effectuées. Cela ressemble à quelque chose comme ça.
Pour en savoir plus sur le sujet, visitez ce lien ici .